Remplacer les IFRAME avec les feuilles de style

jeudi 26 février 2004 :: perrick :: CSS :: 17 commentaires :: aucun trackback

Lors d'un projet récent, j'ai du me plier à l'utilisation - exigée par le client - d'une IFRAME : un attribut pourtant déprécié selon le W3C. Et voilà-t-il pas qu'aujourd'hui je découvre qu'on peut remplacer ces IFRAME par quelques lignes bien pensées en CSS :

div#content {
  width: 500px;
  height: 300px;
  overflow: auto;
}

J'ai découvert ce truc sur le site du designer Jon Hicks. Un grand merci à Laurent Jouanneau pour cette chouette découverte indirecte.

Vos commentaires et/ou trackbacks

Le vendredi 27 février 2004 à 11:04, commentaire par JMF :: site :: #

Ah bah c'est balôt qu'on en ait pas parlé parce que je connaissais ce truc. :)

Le vendredi 27 février 2004 à 18:17, commentaire par Bobe :: #

Désolé mais un div scrollable et une iframe sont deux choses clairement différentes.
Leur seul point commun est d'avoir un ascenseur (si données dépassent la hauteur du bloc bien sùr)

Le vendredi 27 février 2004 à 23:04, commentaire par pk :: site :: #

Oui je sais qu'il s'agit de 2 choses différentes mais à l'écran ce n'est pas évident pour tout le monde. Car quand je dis 'remplacer', je pense surtout à ceux qui ne connaitront jamais la différence entre le chtemele de Mosaic et le ikschtemele de Opera, Firefox et Cie. Parfois il m'arrive même de les envier ;-)

Le samedi 28 février 2004 à 11:32, commentaire par Bobe :: #

Ah oui, désolé.
Je réfléchissais en tant que développeur, pas en tant que client. Et c'est vrai que la vision de la chose est bougrement différente :)

Le lundi 1 mars 2004 à 17:02, commentaire par Ldo :: site :: #

Point de vue référencement, les deux sont aussi totallement différent.

Le jeudi 29 avril 2004 à 12:06, commentaire par Charles Népote :: site :: #

Je ne vois nulle part dans la norme XHTML ou HTML 4.01 que la balise iframe est dépréciée (peux-tu pointer l'endroit exact où c'est écrit ?). Il est possible qu'elle soulève en effet des problèmes, mais je ne vois pas bien lesquels.

Le jeudi 29 avril 2004 à 13:06, commentaire par Charles Népote :: site :: #

En fait, je confirme que la balise <iframe> n'est pas dépréciée en XHTML 1.0 ; elle est présente dans la DTD Transitional mais elle a en revanche disparu de la DTD strict.
Cf. openweb.eu.org/articles/d...
et aamcf.co.uk/html/ele

Le jeudi 29 avril 2004 à 15:07, commentaire par pk :: site :: #

Effectivement l'extrait sur lequel je me base : "Finally, note that XHTML 1.0 has deprecated the name attribute of the [...] iframe [...] elements, and it will be removed from XHTML in subsequent versions." ne dit pas tout à fait la même chose : désolé pour l'erreur. Par contre dans le strict c'est effectivement le cas ! Merci pour la précision.

Le dimanche 16 mai 2004 à 16:24, commentaire par julien :: site :: #

Est-ce que les styles dcc d'une iframe puevtn se répercuter sur le reste d'une page? et avec les <div></div>??

Le dimanche 20 juin 2004 à 03:13, commentaire par francis :: site :: #

overflow: auto;
c'est le morceau que je cherchais pour que ça tourne, niquel !

Le dimanche 18 juillet 2004 à 16:47, commentaire par Raphael Goetter :: site :: #

Si je peux me permettre, voici un petit didacticiel sur ce sujet :
www.alsacreations.com/art...

Raphaël

Le vendredi 6 août 2004 à 17:52, commentaire par Yoda :: #

Perso j'utilise
<object type="text/html" data="index.html" width="640px" height="480px"></object>
et c'est valide XHTML 1.1 Strict !

Le samedi 4 septembre 2004 à 12:44, commentaire par djorb :: #

salut à tous,
Yoda, tu utilise

<object type="text/html" data="index.html" width="640px" height="480px"></object>

J'avais deja essayé, mais je me demande comment metre un fond qui serrai fixe dans cet objet ??

Le jeudi 9 septembre 2004 à 10:08, commentaire par Raphael :: site :: #

L'inclusion de fichiers html avec <object> ne fonctionne pas sous IE me semble-t-il. (si si, il reste des utilisateurs d'IE)

Le lundi 25 juillet 2005 à 12:20, commentaire par hdh :: #

Pour ce qui est de IE cela semble fonctionner avec cela

<style type="text/css">
body {
overflow:auto;
border:1;}
object{position:relative;width:400px;height:40px}
-->
</style>
</head>
<body bgcolor="#FFFFCC">
<object data="file.html" type="text/html" />

par contre je n'arrive pas à voir les différences d'utilisation techniques entre iframe et object... qq1 peut expliquer cela à 1 newbie please ?? merci !!

Le dimanche 2 avril 2006 à 17:25, commentaire par Zener131 :: site :: #

Bonjour.

Pour du HTML on doit pouvoir remplacer proprement par <object>.

Mais pour afficher proprement (je veux dire en incrustation dans le contenu HTML mais aussi avec le cadre du plugin et tout) certains documents dans certains navigateurs (PDF dans Firefox par exemple),

... avec <object> et après parcours complet du Web :-) ça ne marche pas ou ça n'est pas fiable.
Alors que dans une <iframe> c'est visiblement correct.

Ca introduit bien sûr un point d'inaccessibilité locale, mais elle est déjà inhérente à l'utilisation d'un PDF (ou autre). Or interdire ça même ponctuellement pour un site est justement la raison de l'assimilation accessible <=> double développement, et donc "tant pis on se contente de pas accessible".

Donc en attendant que <object> marche correctement partout, mieux vaut une iframe qu'une popup.

A moins que qualqu'un ait trouvé le <param> ou autre argument secret qui habille le PDF dans Firefox ?

Merci,
Cordialement,
IPZB

e-mail: lien sur zener131.free.fr/ContactM...

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.