Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Anne-Marie Luigi

Conseils & astuces CSS pour Web Style Sheets

Voir aussi l'index de tous les conseils.

Sur cette page :

La pseudo classe ':target'

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 interface à onglets

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"...

Tab 1
One might well argue, that...
Tab 2
... 30 lines of CSS is rather a lot, and...
Tab 3
... that 2 should have been enough, but...
Default
... it works!

Mention

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é style
Copyright © 1994–2018 W3C®

Created 6 Feb 2003;
Last updated mer. 23 mai 2018 14:30:04 UTC

Langues

À propos des traductions