Bert
Bos, coordinateur de l'activité
styleCopyright © 1994–2023 W3C® Privacy policy
Created 6 Feb 2003;
Last updated lun. 11 sept. 2023 17:40:36
Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Anne-Marie Luigi
Une URL pointe normalement vers une page. Mais lorsque l'URL se termine par "#quelque chose", elle cible un élément spécifique de cette page. Les navigateurs essaient généralement de s'assurer que l'élément ciblé est visible et si possible en haut de l'écran.
Avec le sélecteur ': target', vous pouvez ajouter un style spécifique à l'élément target, afin qu'il attire davantage l'attention.
Mais vous pouvez faire plus. Vous pouvez masquer ou afficher les éléments selon qu'ils sont ou non la target. Voici un exemple. Il comprend un petit menu avec quatre éléments et chaque élément est lié à du texte. Mais au début, aucun texte n'est affiché. Chaque élément est un lien vers un élément avec une target ID (# item1, # item2 ...) et ces éléments ne sont visibles que lorsqu'ils sont la target de l'URL en cours.
Essayez de cliquer sur les éléments du menu et regardez également la barre d'adresse du navigateur pour voir l'URL actuelle.
C'est l'élément qui correspond à l'item 1. Il ne devrait pas être visible, sauf si vous avez suivi un lien qui ciblait explicitement "#item1".
Si vous êtes passé à l'élément 2, cet élément devrait être visible.
Cet élément est visible si vous avez cliqué sur le troisième élément du menu. L'élément a une URL que vous pouvez utiliser ailleurs. Vous pouvez la mettre dans une autre page Web et passer directement à cet élément.
Voici comment ça marche. Il y a deux parties importantes, la source HTML et la propriété 'display'. D'abord le document HTML. Il a quelques liens et des éléments avec des ID correspondantes :
<p> <a href="#item1">item 1</a> <a href="#item2">item 2</a> <a href="#item3">item 3</a> <a href="#default">clear</a> <div class="items"> <p id="item1">... item 1... <p id="item2">... item 2... <p id="item3">... <p id="default"><!-- by default, show no text --> </div>
Les règles de style cachent d'abord tous les P à l'intérieur du DIV, mais remplacent celle du P qui est la target actuelle :
div.items p {display: none}
div.items p:target {display: block}
C'est tout. L'exemple ci-dessus ajoute des couleurs, des marges, des bordures, etc. de sorte qu'il ressemble plus à un menu. Vous pouvez regarder la source de cette page pour voir comment cela est fait.
En fait, nous avons ajouté ':not (:target)', pour garantir que seuls les navigateurs CSS3 cacheront l'élément. Donc, les meilleures règles sont les suivantes :
div.items p:not(:target) {display: none}
div.items p:target {display: block}
Une fois que vous avez compris ce qui précède, il n'est pas si difficile de jouer et de créer une véritable interface «tabulée» : un ensemble de règles de style qui non seulement montre le contenu différent selon le bouton pressé, mais modifie également l'apparence du bouton.
Voici un exemple. Il n'utilise pas 'display: none', mais 'z-index'. Si vous voulez savoir comment cela fonctionne, faites simplement "view source"...
Cette page est basée sur une idée originale de Daniel Glazman. Voir l'explication dans son "blog" du 9 janvier 2003 et sa démo du 13 janvier.
Bert
Bos, coordinateur de l'activité
styleCreated 6 Feb 2003;
Last updated lun. 11 sept. 2023 17:40:36