Cours de HTML
Règles supplémentaires du CSS2
G. Chagnon
Ce chapitre présente les concepts généraux des feuilles de style niveau 2 (CSS2).
html, css, css2, css-p, introduction
Le CSS2 est une recommandation du W3C définie en mai 1998. Elle est une extension du format CSS1 permettant notamment une gestion améliorée de la prise en compte de nouveaux types de media (imprimante, navigateurs à synthèse vocale...), mais aussi de la présentation. Ce dernier ensemble de propriétés constitue ce que l'on nomme souvent le CSS-P, P pour positioning.
Si la gestion du CSS-P est à peu près correcte pour les navigateurs récents, il n'en est pas de même pour les autres propriétés du CSS2. Bon nombre des propriétés innovantes ne sont pas prises en compte, et relèvent en l'état actuel des choses d'un pari sur l'avenir. Il est donc recommandé de limiter leur utilisation à des cas où elles seraient susceptibles d'apporter des fonctionnalités supplémentaire au site, et non critiques.
Il existe en HTML deux types d'éléments : les éléments en ligne et les éléments de type bloc.
- Les éléments en ligne sont destinés à être placés au fil du texte. Il s'agit par exemple des éléments d'emphase (
em), des images (img), des liens (a)... Normalement, ces éléments n'ont pas vocation à être placés sur une page, mais à être affichés dans le contexte de l'élément parent qui les encadre. Un élément en ligne ne peut contenir que des éléments en ligne ou du texte.
- Les éléments de type bloc sont ceux qui, par défaut, ont un rendu visuel "en bloc" sur un navigateur graphique : c'est le cas par exemple des titres (
h1...6), des paragraphes (p), des tableaux (table)... Ils peuvent être positionnés sur une page. Les éléments de type bloc peuvent contenir des éléments en ligne. Tous les éléments de type bloc, sauf les paragraphes et les titres, peuvent de plus contenir d'autres éléments de type bloc.
Attention : alors que les éléments en ligne n'ont pas de marge ou de padding prédéfini, il n'en est pas de même pour les éléments de type bloc. Or ces marges et paddings par défaut peuvent être différents d'un navigateur à l'autre ; il est donc souvent nécessaire de les redéfinir.
Sans feuille de style appliquée à un document, un navigateur graphique appliquera une mise en page par défaut au fur et à mesure qu'il rencontrera, au fil du code source du fichier HTML qu'il lit, les éléments qu'il doit placer. Le flux correspond à l'ordre dans lequel les éléments apparaissent dans ce code source, ce qui conditionne leur position. Par défaut, deux éléments de type bloc s'affichent l'un en-dessous de l'autre. Les éléments en ligne s'affichent les uns à la suite des autres., et un retour à la ligne est inséré quand l'affichage atteint le bord droit du cadre.
Certaines propriétés CSS permettent de sortir des éléments du flux pour les afficher ailleurs dans la fenêtre du navigateur. Il est possible d'inverser l'ordre d'élément de type bloc, de les afficher l'un à côté de l'autre ; il est possible également de changer le type d'un élément, et de faire d'un élément en ligne un élément de type bloc et réciproquement.
Selon les recommandations du W3C, tous les éléments d'une page Web peuvent être placés à un endroit fixé dans la fenêtre du navigateur indépendamment des autres éléments de la page : c'est le positionnement.
Cette recommandation est intégralement respectée par Internet Explorer à partir de la version 4 et les versions du moteur Gecko à partir de Netscape 7 (ce qui inclut l'intégralité des versions de FireFox), ainsi qu'Opera à partir de la version 6.
position permet de spécifier le type de positionnement à appliquer à l'élément. Cette propriété peut prendre quatre valeurs :
static, la valeur par défaut. L'élément est traité "dans le flot". Il est posé dans la page à la suite des autres comme d'habitude.-
absolute, deux cas se présentent :
- si l'élément n'est enchâssé dans aucun autre. Les propriétés de positionnement (voir plus loin) sont alors relatives au coin supérieur gauche de la fenêtre du navigateur.
- si l'élément est enchâssé dans un autre élément pour lequel la propriété de position vaut
absolute ou relative. Les propriétés de positionnement (voir plus loin) sont alors relatives au coin supérieur gauche de la boîte contenant l'élément-parent).
relative. Les propriétés de positionnement (voir plus loin) sont alors relatives à la position qu'aurait eue l'élément s'il avait été traité "dans le flot" (position: static).fixed. Dans ce cas, la position de l'élément reste fixe par rapport à la zone de visualisation. Cette propriété n'est pas supportée par Internet Explorer.bottom, top, left et right permettent de spécifier la position d'un élément. Ces propriétés prennent comme valeur les unités de longueur vues précédemment, l'unité par défaut étant le pixel, mais aussi un pourcentage (qui renvoie alors aux dimensions de l'élément-parent ou de la fenêtre du navigateur suivant les valeurs de la propriété position). Par exemple
#copyright
#copyright span.nomauteur
Dans cet exemple, l'élément identifié par l'identifiant copyright est positionné en bas à droite de la fenêtre du navigateur (quelle que soit la taille de celle-ci), et son élément-enfant span de classe nomauteur est à 10% de sa marge gauche, et à 10% au-dessus de sa marge supérieure.
bottom est compatible avec IE 5.5+ pour Windows, Netscape 6+ et toutes les versions de Mozilla.overflow permet de spécifier de quelle manière le contenu d'un élément doit être affiché s'il dépasse de la boîte qui lui est réservée. Cette propriété peut prendre les valeurs suivantes :
visible, la valeur par défaut. Le contenu peut être affiché de telle sorte qu'il dépasse de la boîte réservée.hidden. Le contenu de l'élément est partiellement affiché. La position et la forme de la zone dont l'affichage est préservé sont spécifiées par la propriété clip.scroll. Des barres de défilement sont automatiquement ajoutées, que le contenu de l'élément dépasse ou non de la boîte, permettant l'affichage de la totalité de l'élément.auto. Des barres de défilement ne sont affichées que si le besoin s'en fait sentir.<blockquote> est trop grand pour être intégralement affiché dans l'élément ]]> parent.
La véritable modestie consiste à ne jamais se prendre pour moins que ce qu'on estime qu'on croit qu'on vaut.
auteur- Pierre DAC
div
blockquote
div.auteur
Comme overflow vaut visible, la citation apparaît en entier :
Si overflow vaut hidden pour l'élément contenant, ici l'élément ]]>, alors la citation est tronquée :
Si overflow vaut scroll pour l'élément contenant, ici l'élément ]]>, alors des barres de défilement apparaissent :
Remarque : Sous Internet Explorer (même la version 6), il semblerait que la valeur hidden ne marche pas.
clip permet de spécifier quelle portion du contenu de l'élément peut être affichée. Cette propriété s'applique aux éléments pour lesquels la propriété overflow vaut autre chose que visible. Exemples d'utilisation :
p
p
En CSS2, la seule forme possible est un rectangle. On donne les longueurs dans l'ordre suivant : haut, droite, bas et gauche. Les exemples précédents définissent ainsi les régions suivantes :
Cette propriété est supportée par tous les navigateurs à partir de la version 4. Attention cependant :
- Sous Internet Explorer 4 pour Macintosh, cette propriété est boguée ;
- Sous Netscape 4, les éléments affectés par cette propriété peuvent être "oubliés" par le navigateur lorsqu'il doit calculer des barres de défilement.
visibility permet de spécifier si la boîte contenant l'élément doit apparaître ou non. La place réservée à son apparition reste réservée, au contraire de la propriété display, qui supprime cette réservation d'espace. Cette propriété peut prendre les valeurs suivantes :
visible, la valeur par défaut. La boîte est visible.hidden, la boîte est... invisible (complètement transparente), mais sa place reste réservée dans la fenêtre du navigateur. Il est possible, en utilisant des scripts, de cacher ou de faire apparaître des portions de texte...collapse. Cette valeur n'est utile que lors de la manipulation de cellules d'un tableau. Dans le cas général, elle est équivalente à hidden.z-index permet de gérer l'ordre d'"empilement" des boîtes contenant les éléments. Exemple d'utilisation :
img.derriere
span.devant
Dans l'exemple précédent, la valeur du z-index de l'élément ]]> étant supérieure, ce dernier sera devant l'image de classe derriere. Il est possible ainsi de combiner différents niveaux de profondeurs.
Les quatre propriétés min-height, max-height, min-width et max-width permettent de gérer les limites extrêmes de la boîte contenant l'élément.
cursor permet de gérer l'apparence du curseur au moment où il survole l'élément. Les valeurs possibles de cette propriété sont :
auto, la valeur par défaut. La forme dépend du contexte.default, le curseur par défaut du système (sous Windows, une flèche).crosshair, en forme de croix (le signe "+").pointer, la forme indiquant un lien.move, réservé normalement au cas où l'élément peut être déplacé.direction-resize, où direction vaut e, ne, nw, n, se, sw, s ou w, qui est réservé normalement au cas où la taille de l'élément peut être modifiée.texte, réservé normalement au cas où le contenu de l'élément peut être sélectionné en mode texte (souvent rendu sous la forme du caractère |).help, réservé normalement au cas où l'élément doit fournir une aide (en forme de point d'interrogation souvent).- une url, ou une liste d'url indiquant où trouver un fichier de curseur. Si le curseur n'est pas accepté par le système, le navigateur "regarde" la deuxième adresse fournie, etc. Il est recommandé, comme pour les polices, de spécifier une forme de curseur par défaut en dernier choix.
Cette propriété est supportée par tous les navigateurs, sauf Netscape 4.
Cette famille de propriétés permet de mettre en évidence des éléments en les encadrant. Les différences avec la propriété border résident dans les faits que :
- Les encadrements ne prennent pas de place en plus dans l'apparence générale de la page.
- Les encadrements ne sont pas limités à une forme rectangulaire.
On distingue trois propriétés, qui peuvent être résumées par la propriété outline :
outline-width : une unité de longueur, qui permet de gérer la largeur de l'encadrement.outline-style : respecte la même syntaxe que border-style.outline-color : une couleur, ou bien la valeur invert, qui est équivalente à prendre automatiquement la couleur opposée des pixels de l'écran.direction et unicode-bidi.
direction peut prendre deux valeurs, ltr (left to right), la valeur par défaut, ou rtl (right to left).unicode-bidi reprend un algorithme complexe de gestion de la direction d'écriture défini dans la norme Unicode. Les valeurs possibles de cette propriété ne concernent l'immense majorité du temps pas les normes de l'écriture latine.quotes permet de spécifier les guillemets à utiliser en fonction du niveau de profondeur. Le type de guillemet est indiqué par une chaîne de caractères. Exemple d'utilisation :
q:lang(en)
q:lang(fr)
q:before
q:after
Là encore, cette propriété est encore mal supportée. Pour information, les entités représentant les doubles guillemets français sont CSS2 inclut aussi la prise en compte du rendu visuel à l'impression ; en effet, selon le W3C, l'écran d'un ordinateur n'est qu'un media parmi d'autres, et notamment le support papier. Il était donc nécessaire d'inclure des propriétés spécialisées.
Cette règle permet de spécifier le format général de la page. Exemple d'utilisation :
@page
L'exemple précédent permet de définir une taille de page A4, avec des marges de 2cm.
La propriété size permet de spécifier la taille de la page à imprimer. Cette propriété peut prendre les valeurs suivantes :
auto, la valeur par défaut.- Deux longueurs donnant largeur et hauteur. Si une des deux longueurs seulement est donnée, la boîte d'impression est carrée.
portrait ou landscape, qui sont normalement prioritaires par rapport à tout autre réglage d'impression.page:first est un pseudo-élément, page:left et page:right sont des pseudo-classes qui permettent de spécifier une apparence différente respectivement pour la première page, les pages de gauche et de droite lors de l'impression. Cela est particulièrement utile lors des impressions recto-verso. Par exemple,
page:right
page:left
page:first
Trois propriétés gèrent les sauts de page.
page-break-inside peut prendre les valeurs auto (valeur par défaut) ou avoid (dans la mesure du possible, l'impression doit éviter un saut de page qui couperait l'élément).page-break-before et page-break-before peuvent prendre les valeurs auto (valeur par défaut), avoid (dans la mesure du possible, l'impression doit éviter un saut de page qui couperait l'élément), always (qui force le saut de page avant ou après l'élément), left ou right (qui force la page suivante à être une page de gauche ou de droite).widows et orphans permettent de spécifier le nombre minimum de lignes d'un élément qui peuvent être laissées en haut (respectivement en bas) d'une page imprimée.
Il est possible de donner des noms à des pages particulières, et de les traiter de manière analogue à des éléments imbriqués. Exemple d'utilisation :
@page tournee
table
Cette propriété s'applique aux pseudo-éléments :before et :after. Elle peut prendre les valeurs suivantes :
- Une chaîne de caractères (voir l'exemple plus loin).
- Une URL, un lien vers une ressource externe donnant des détails sur l'élément.
-
counter. Les compteurs (voir plus loin) peuvent être spécifiés par l'appel à deux différentes fonctions, counter() ou counters().
- La première a deux formes :
counter(nom) ou counter(nom, style). Le texte produit est la valeur du compteur désigné par nom, en ce point précis du document. Il est formatté dans le style indiqué (ce sont les mêmes que pour les types de listes, la valeur par défaut est decimal).
- La seconde possède aussi deux formes :
counters(nom, chaine) ou counters(nom, chaine, style). Le texte produit est la valeur de tous les compteurs désignés par nom, en ce point précis du document, séparés par la chaîne de caractères spécifiée. Les compteurs sont formattés dans le style indiqué.
open-quote et close-quote qui permettent de compléter l'action de la propriété quotes.
attr(X). Cette fonction retourne la valeur de l'attribut X pour le sélecteur. Si l'attribut X n'existe pas pour le sélecteur, la fonction retourne une chaîne vide.content n'est pas gérée par certains navigateurs (comme Internet Explorer 6). Netscape 6, Mozilla, Opera supportent quelques valeurs de cette propriété (affectation d'une chaîne de caractères quelconque, et gestion des guillemets).
CSS2 permet une numérotation automatique par des compteurs, et l'utilisation des propriétés counter-increment et counter-reset.
counter-increment est la propriété permettant de déclarer un compteur et la manière dont il sera... incrémenté. La syntaxe est counter-increment: nom_compteur incrémant. incrémant est un entier (éventuellement négatif) indiquant de combien le compteur doit être incrémenté. Cet incrémant est facultatif, et la valeur par défaut est 1.counter-reset est la propriété permettant de ramener un compteur à une valeur donnée. La syntaxe est counter-reset: nom_compteur valeur. valeur est optionnel, la valeur par défaut étant 0.CSS, à partir d'une version du site du W3C. Les résultats sont accessibles à partir de l'adresse http://w3mix.web-graphics.com/win.php, mais aussi le CSS Zen Garden.