Bert
Bos, coordinateur de l'activité
styleCopyright © 1994–2021 W3C® Privacy policy
Created 7 July 2011;
Last updated mer. 06 janv. 2021 05:40:49 UTC
Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Coralie Mercier
Voir aussi l'index de toutes les astuces.
Les deux tableaux ci-dessous peuvent s'afficher en entier ou en omettant une ou plusieurs colonnes. Cette page illustre deux méthodes pour basculer entre les différentes vues. Soit
| Élément | Info | JAN | FÉV | MAR | AVR | MAI | JUN | JUL | AOÛ | SEP | OCT | NOV | DÉC |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Premier | 1er | 56 | 28 | 85 | 24 | 67 | 27 | 67 | 20 | 21 | 74 | 45 | 48 |
| Deuxième | 2ème | 34 | 28 | 84 | 74 | 95 | 77 | 21 | 31 | 54 | 34 | 84 | 47 |
| Élément | Info | JAN | FÉV | MAR | AVR | MAI | JUN | JUL | AOÛ | SEP | OCT | NOV | DÉC |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Premier | 1er | imo | boo | ba | fie | ro | ore | yu | ek | quo | phe | lei | ats |
| Deuxième | 2ème | eu | eo | suh | ohn | hye | lef | wa | bu | orf | ir | soi | se |
Habituellement, pour masquer un élément, on utilise la propriété 'display' à laquelle on assigne la valeur 'none'. Mais CSS dispose d'une propriété appelée 'visibility', qui masque les éléments d'une manière différente. En particulier, on utilise ici 'visibility: collapse' qui est conçu spécialement pour masquer les lignes et colonnes de tableaux.
Avec cette méthode, l'agencement du tableau est effectivement calculé en prenant en compte la présence de la colonne occultée, qui n'est simplement pas affichée. Ceci a pour effet de laisser l'espace inutilisé sur le bord droit du tableau.
La valeur 'collapse' est conçue pour utilisation intéractive : au début toutes les colonnes sont visible, puis un événement (nous verrons cela plus bas) change les valeurs de la propriété 'visibility' de certaines colonnes, de 'visible' à 'collapse'. Ces colonnes disparaissent, mais le contenu des colonnes restantes n'est en aucune manière affecté. Les colonnes se regroupent simplement. Lorsque la valeur 'visible' est re-assignée, les colonnes occultées réapparaissent et les autres colonne reprennent leur place, sans aucun changement de l'aspect des cellules. L'opération est non seulement rapide, mais aussi, elle permet une reconnaissance visuelle de chaque colonne après déplacement.
Pour appliquer des règles de style sur les colonnes d'un
tableau, le document doit contenir des éléments qui représentent
ces colonnes. En HTML, il s'agit des éléments <col>. Le code HTML des tableaux ci-dessus est du
type :
<table> <col> <col> <col class=m01> <col class=m02> <col class=m03> <col class=m04> <col class=m05> <col class=m06> <col class=m07> <col class=m08> <col class=m09> <col class=m10> <col class=m11> <col class=m12> <thead> <tr> <th>...
Les attributs de classe servent à rendre plus aisée l'écriture des règles de style. L'une d'entre elles est :
col.m04 { visibility: collapse }
Cette règle replie toute colonne de classe m04. Ensuite il s'agit de l'activer et la désactiver.
La première méthode utilise les feuilles de style alternatives (se référer à l'article “Alternative style sheets” [Feuilles de style alternatives]). Cette page contient onze styles alternatifs nommés “View for…” [“Vue pour…”], qui correspondent aux onze façons différentes de présenter les tableaux. Le code HTML est du type :
<link rel="alternate stylesheet" href="foldingstyle/month02.css" title="Vue pour février"> <link rel="alternate stylesheet" href="foldingstyle/month03.css" title="Vue pour mars"> <link rel="alternate stylesheet" href="foldingstyle/month04.css" title="Vue pour avril"> ...
Chacun de ces styles alternatifs ne comprend que deux lignes : une ligne qui importe la feuille de style par défaut, et une ligne qui masque la colonne concernée. Par exemple, voici le fichier month04.css complet. Il cache les colonnes .m01, .m02 et .m03, à savoir, les colonnes de janvier, février et mars :
@import "../../CSS/w3c-2010/main.css";
.m01, .m02, .m03 { visibility: collapse }
La méthode des feuilles de style alternatives est facile. Comme on peut le voir, les règles de style sont courtes et simple. En revanche, alterner les styles n'est pas très rapide, parce que l'utilisateur doit les sélectionner depuis un menu. Ceci implique un certain nombre de mouvements de souris ou de combinaisons de touches.
La deuxième méthode s'appuie sur le sélecteur ':target'. Il sélectionne dans un document l'élément (un, au plus) qui est la cible du lien que l'on a suivi pour parvenir à ce document. (Se référer à l'article “A tabbed interface” [Une interface à onglets] pour plus d'information sur ':target'.)
Ce sélecteur peut être utilisé pour donner au tableau un style différent en fonction de l'élément qui est ciblé. Il s'agit ensuite de fournir des liens à ces cibles et à chaque clic sur un lien, un élément différent devient la cible, et un style différent s'applique.
On a besoin dans le document d'autant de cibles potentielles que
l'on a de style différents, et d'autant d'hyperliens vers ces
cibles. Cette page utilise comme cibles des élément <div> vides et des éléments <a>
dans les entêtes de colonnes :
<div class=hack id=view02></div> <div class=hack id=view03></div> <div class=hack id=view04></div> ... <table> ... <th><a title="Cliquer pour masquer les colonnes précédentes" href="#view02"> FÉV<a> <th><a title="Cliquer pour masquer les colonnes précédentes" href="#view03">MAR<a> <th><a title="Cliquer pour masquer les colonnes précédentes" href="#view04">AVR<a> ...
(Les attributs de titre ('title') donnent une explication succincte de l'action de chaque lien.)
La méthode est un stratagème car ces éléments <div>
et <a> n'ont de fonction que de
servir le style. Lors d'une future extension de CSS il y aura
probablement un moyen d'activiter directement le style des éléments
(voir ci-dessous).
Les règles de style sont un peu complexes. Voici l'une d'elles :
#view02:target ~ * .m01 {
visibility: collapse }
Elle dit d'occulter l'élément .m01 s'il est descendant de l'élément qui, lui-même est le frère suivant de l'élément dont l'ID est “view02” et qui est la cible courante. Se référer à la feuille de style “view.css” pour l'ensemble complet des règles. (Il y en a 66 pour cet exemple en particulier.)
Ces règles permette au lecteur d'afficher ou masquer les colonnes en cliquant sur les entêtes de colonnes. Un avantage supplémentaire de la méthode est que chaque vue possible dispose de son URL propre. Par exemple, à l'ouverture de la page http://www.w3.org/ Style/Examples/folding#view06 les colonnes JAN, FÉV, MAR, AVR sont déjà occultée.
Normalement, lorsqu'on suit un lien, le navigateur fait défiler la fenêtre de manière à ce que l'élément cible apparaissent vers le haut. Dans ce cas, les cibles ne sont pas visibles:
.hack { display: none }
Aucune spécification ne définit jusqu'où le navigateur doit faire défiler la fenêtre dans ce cas, mais espérons qu'il ne fasse simplement rien défiler.
Puisque cette page utilise deux méthodes différentes pour replier les colonnes, l'une des deux doit avoir priorité. Dans ce cas, c'est la feuille de style alternative : si l'on sélectionne le style de la “Vue pour juin” et que l'on clique sur la colonne d'août, alors la colonne de juin ne se masquera pas.
Cependant, il est facile d'inverser la priorité. Le lien vers la feuille de style contenant des règles portant sur ':target' est du type :
<link rel=stylesheet href="foldingstyle/view.css" title="Main">
ce qui signifie que la feuille de style n'est chargée qu'avec les autres styles nommés “Main” [principaux], et non pas avec ceux nommés “Vue pour…” Il suffit d'enlever l'attribut "title" [titre] afin que la feuille de style s'applique quelle que soit la feuille de style alternative chargée.
Cette page montre deux tableaux dont les colonnes se replient et se déplient de la même manière, ce qui illustre les limites des deux méthodes : en effet, il serait impossible d'occulter les colonnes dans les deux tableaux indépendamment.
Comme décrit plus haut, la méthode avec le sélecteur ':target' nécessite l'ajout l'éléments supplémentaire dans la source. De plus, si l'on veut utiliser des hyperliens à d'autres fins, par exemple, dans une table des matières, ils ne peuvent plus servir à replier des tableaux. (En revanche, on peut élaborer un stratagème similaire avec le sélecteur ':checked' à la place du sélecteur ':target'. Ce qui libère les hyperliens, mais est soumis à d'autres contraintes. Une autre page montre un exemple avec ':checked'.)
Pour ces raisons, CSS devrait à terme se doter d'une fonction qui bascule directement entre deux ou plusieurs style pour un même élément sans avoir recours aux hyperliens.
À dater de juillet 2011, le groupe de travail CSS n'a pas encore publié de version préliminaire de document ayant une telle fonction, mais les idées existent. L'une d'elles est d'introduire la pseudo- classe ':alternative'. Une règle telle que :
ul:alternative { content: "+" }
signifierait que les élément <ul> peuvent
être basculés d'un état à l'autre, et que lorsque l'utilisateur les
bascule vers le deuxième état possible, un “+” est affiché à la
place du contenu des éléments.
Bert
Bos, coordinateur de l'activité
styleCreated 7 July 2011;
Last updated mer. 06 janv. 2021 05:40:49 UTC