
Tous les billets sont listés ici et classés par titres et mois dans la boîte Archives.
Les iframes sont à l'origine une exclusivité de Microsoft et leur usage est contestable, en termes de référencement. Aussi vaut-il mieux y recourir à titre exceptionnel, d'autant que les magic'CSS offrent, on va le voir, une alternative intéressante à cette pratique.
Pourquoi l'iframe ?
Souvent, on justifie l'usage de l'iframe en termes d'ergonomie. En effet, en insérant une autre page dans une fenêtre dotée de barres défilantes, on réduit l'espace occupé par l'information à un cadre de dimensions fixes. Cette iframe, créée avec l'Iframe Maker, rend compte de l'économie réalisée :» Voir le code correspondant
Assurément, on gagne de la place à l'affichage, mais on doit en contrepartie créer les pages à framer (iframe.html, ici).
CSS : l'overflow
Or, la propriété overflow des CSS permet d'obtenir le même effet, c'est-à-dire de réaliser le même gain de place, sans avoir à créer ces pages à framer. Elle permet de créer, dans une page, une petite boite dotée d'une barre de défilement et d'afficher du contenu dans cet espace limité. En un mot, elle simule l'iframe, dont elle a tous les avantages, sans l'inconvénient de la création de pages externes :Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
» Voir le code correspondant
Plus précisément, la propriété overflow permet de déterminer ce qu'il advient d'un contenu (typiquement : du texte) s'il est trop grand pour son conteneur (typiquement : une div), grâce à quatre valeurs :
- visible : ce qui dépasse est affiché, quitte à se superposer à d'autres éléments [à proscrire]
- hidden : ce qui dépasse est caché et inaccessible [à proscrire]
- scroll : que le contenu excède ou non son conteneur, ce dernier est équipé de deux barres de défilement, horizontale et verticale [pourquoi pas]
- auto : dès que le contenu excède la taille du conteneur, une barre de défilement apparaît et permet d'avoir accès au contenu caché. Si le contenu n'excède pas la taille allouée par le conteneur, les barres de défilement n'apparaissent pas [solution optimale]
Commentaires sur le code
Décortiquons le code utilisé :<div align="center"><div style="border:5px double #99bb33; padding: 10px; margin: 10px; background-color: lightyellow; width: 400px; height: 100px; overflow: auto; text-align: left;">Ici tout le texte</div></div>
- <div align="center"></div> : pour centrer le cadre, j'utilise une div de centrage
- border:5px double #99bb33; : je dessine une bordure verte double de 5px autour de le fenêtre
- padding: 10px; : j'insère une marge de 10px entre le cadre et son contenu
- margin: 10px; : j'insère une marge de 10px entre le cadre et le reste de la page
- background-color: lightyellow; : je choisis de mettre du jaune clair en couleur de fond du cadre
- width: 400px; height: 100px; : je fixe la largeur et la hauteur du cadre
- overflow: auto; : le cadre sera doté de barres de défilement si le contenu dépasse
- text-align: left; : j'aligne le contenu à gauche