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 :



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 :



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 :

1. visible : ce qui dépasse est affiché, quitte à se superposer à d'autres éléments [à proscrire]
2. hidden : ce qui dépasse est caché et inaccessible [à proscrire]
3. 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]
4. 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]

Au final, c'est la propriété overflow: auto que nous retiendrons.

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

Peut-être ferai-je un générateur pour faciliter la création du code, mais en attendant, l'overflow est la bonne trouvaille du jour !