'visibility'
Valeur : visible | hidden | collapse | inherit Initiale : visible
S'applique à : tous les éléments
Héritée : oui Pourcentage : sans objet Médias : visuel
La propriété 'visibility' spécifie le rendu, ou non, des boîtes générées par un élément donné. Ces boîtes, bien qu'invisibles, influencent toujours la mise en forme du document (utiliser la propriété 'display' avec la valeur 'none' pour prohiber la génération d'une boîte, et ainsi toutes influences sur la mise en forme). Les valeurs ont les significations suivantes :
visible
La boîte générée est visible ; hidden
La boîte générée est invisible (entièrement transparente), mais celle−ci influençant toujours la mise en forme ;
collapse
Consulter le passage traitant des effets dynamiques sur les rangées et colonnes des tables. Quand on l'utilise avec autre chose, cette valeur 'collapse' correspond à 'hidden'.
On peut employer cette propriété conjointement avec des scripts pour créer des effets dynamiques.
Dans l'exemple suivant, quand on presse l'un ou l'autre bouton du formulaire, un script actionné par un utilisateur provoque l'apparition de la boîte qui lui correspond et, en même temps, la disparition de l'autre. Ces boîtes conservant leur taille et leur emplacement, l'effet produit le remplacement de l'une par l'autre (le script, écrit dans un langage hypothétique, pouvant, ou non, produire un effet avec un agent utilisateur conforme).
<!DOCTYPE HTML PUBLIC "−//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!−−
#conteneur1 { position: absolute;
top: 2in; left: 2in; width: 2in } #conteneur2 { position: absolute;
top: 2in; left: 2in; width: 2in;
<P>Nom : Al Capone</P>
<P>Résidence : Chicago</P>
</DIV>
<DIV id="conteneur2">
<IMG alt="Lucky Luciano"
width="100" height="100"
src="suspect2.jpg">
<P>Nom : Lucky Luciano</P>
<P>Résidence : New York</P>
</DIV>
<FORM method="post"
action="http://www.suspect.org/process−bums">
<P>
<INPUT name="Capone" type="button"
value="Capone"
onclick='show("conteneur1");hide("conteneur2")'>
<INPUT name="Luciano" type="button"
value="Luciano"
onclick='show("conteneur2");hide("conteneur1")'>
</FORM>
</BODY>
</HTML>
12 Le contenu généré, le numérotage automatique et les listes
Dans certains cas, les auteurs peuvent souhaiter que les agents utilisateurs puissent représenter un contenu qui n'apparaît pas dans l'arborescence du document. Une liste numérotée en est une illustration familière, où l'auteur ne veut pas avoir à fournir la liste des numéros explicitement, préférant laisser l'agent utilisateur les générer automatiquement. De façon similaire, l'auteur peut vouloir que le mot "Illustration" soit inséré avant la légende d'une illustration, ou encore, "Chapitre 7" avant le titre du septième chapitre. Les agents utilisateurs, notamment pour des appareils audio ou braille, devraient être capables d'effectuer ce genre d'opération.
En CSS2, plusieurs mécanismes peuvent gnérer un contenu :
La propriété 'content' conjointement avec les pseudo−éléments :before et :after ;
•
Les propriétés auditives 'cue−before' et 'cue−after' (voir le chapitre sur les feuilles de style auditives).
Quand on utilise la propriété 'content' en combinaison avec ces propriétés auditives, l'interprétation se fait dans cet ordre : :before, 'cue−before', ('pause−before'), le contenu de l'élément en question, ('pause−after'), 'cue−after' et :after ;
•
Les éléments dont la valeur de la propriété 'display' est 'list−item'.
•
On décrit plus loin le mécanisme associé à la propriété 'content'.
12.1 Les pseudo−éléments :before et :after
L'auteur spécifie le style et l'emplacement d'un contenu généré au moyen des pseudo−éléments :before et :after.
Comme leurs noms l'indiquent, ceux−ci précisent l'emplacement du contenu avant ou après celui d'un élément de l'arborescence du document. La propriété 'content', utilisée en conjonction avec eux, spécifie la nature de ce qui est inséré.
Exemple(s) :
Par exemple, cette règle insère la chaîne "Note : " avant le contenu de chacun des éléments P dont l'attribut "class"
a la valeur "note" :
P.note:before { content: "Note : " }
Les objets de mise en forme (ex. les boîtes) générés par un élément comprennent également le contenu généré.
Ainsi, en changeant la feuille de style précédente pour :
P.note:before { content: "Note : " } P.note { border: solid green }
ceci produirait une bordure verte en trait plein autour du paragraphe, y compris la chaîne rajoutée.
Les pseudo−éléments :before et :after héritent de chacune des propriétés, celles qui sont transmissibles, de l'élément de l'arborescence du document auquel ceux−ci se rattachent.
Exemple(s) :
Par exemple, les règles suivantes insèrent un guillemet ouvrant avant chacun des éléments Q. Ce guillemet aura une couleur rouge et sa police sera la même que celle employée ailleurs dans ces éléments :
Q:before {
content: open−quote;
color: red }
Dans les déclarations avec les pseudo−éléments :before ou :after, les propriétés non héritées prennent leur valeur initiale.
Exemple(s) :
Ainsi, dans l'exemple précédent, la valeur initiale de la propriété 'display' étant 'inline', le guillemet s'inscrit dans une boîte en−ligne (c.à.d. celle−ci se trouve sur la même ligne que le texte initial de élément). Dans celui qui suit, la propriété 'display' a la valeur explicite 'block', le texte en insertion s'inscrit dans une boîte de bloc :
BODY:after {
Noter qu'un agent utilisateur auditif synthétiserait le mot "Fin" après avoir rendu tout le contenu de l'élément BODY.
Les agents utilisateurs doivent ignorer les propriétés suivantes avec les pseudo−éléments :before et :after : les propriétés 'position', 'float', celles des listes et celles des tables.
Les pseudo−éléments :before et :after admettent certaines valeurs en conjonction avec la propriété 'display' : Si le sujet du sélecteur est un élément de type bloc, les valeurs admises sont 'none', 'inline', 'block' et 'marker'. Pour toute autre valeur de la propriété 'display', le pseudo−élément se comporte comme si la valeur était 'block' ;
•
Si le sujet du sélecteur est un élément de type en−ligne, les valeurs admises sont 'none' et 'inline'. Pour toute autre valeur de la propriété 'display', le pseudo−élément se comporte comme si la valeur était 'inline'.
•
Note : D'autres valeurs pourraient être admises dans les versions ultérieures de CSS.