L’utilisation du sélecteur « target » en CSS permet d’appliquer des styles à un élément spécifique lorsqu’il est ciblé par une ancre dans l’URL. Cette fonctionnalité offre une manière élégante de créer des interactions utilisateur sans nécessiter de JavaScript. En exploitant cette capacité, les développeurs peuvent créer des effets d’interface utilisateur (UI) attrayants et dynamiques.
L’un des avantages principaux de l’utilisation du sélecteur « target » est sa capacité à modifier l’apparence d’un élément en fonction de l’interaction de l’utilisateur avec l’URL. Par exemple, en cliquant sur un lien, l’URL peut être modifiée pour inclure un fragment d’ancre qui cible un élément spécifique de la page. En conséquence, cet élément ciblé peut être stylisé différemment pour indiquer qu’il est actuellement sélectionné ou mis en évidence.
Pour mettre en œuvre cet effet, les développeurs peuvent utiliser le sélecteur « target » dans leur feuille de style CSS pour définir les styles d’un élément lorsqu’il est ciblé. Par exemple, ils peuvent spécifier un changement de couleur, de taille, de position ou toute autre propriété CSS pour modifier l’apparence de l’élément lorsqu’il est sélectionné.
Voici un exemple simple pour illustrer son utilisation :
Supposons que nous avons une liste de liens dans notre HTML :
html<ul>
<li><a href="#section1">Section 1a>li>
<li><a href="#section2">Section 2a>li>
<li><a href="#section3">Section 3a>li>
ul>
<div id="section1">Contenu de la section 1div>
<div id="section2">Contenu de la section 2div>
<div id="section3">Contenu de la section 3div>
Maintenant, dans notre feuille de style CSS, nous pouvons définir des styles pour ces sections lorsqu’elles sont ciblées :
css/* Styles par défaut pour les sections */
div {
display: none;
}
/* Styles appliqués lorsque l'élément est ciblé */
div:target {
display: block;
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
}
Dans cet exemple, lorsque l’utilisateur clique sur un lien pour une section spécifique, l’élément correspondant devient la cible de l’URL, et le sélecteur « :target » est appliqué à cet élément. En conséquence, les styles définis dans la règle « :target » sont appliqués, ce qui modifie son apparence pour la mettre en évidence.
Il convient de noter que bien que le sélecteur « target » offre une manière pratique de créer des effets d’interface utilisateur sans JavaScript, il peut présenter certaines limitations. Par exemple, il ne permet pas des transitions fluides ou des interactions complexes comme celles réalisables avec JavaScript. Cependant, pour les effets simples et la stylisation basique, il constitue une option efficace et légère.
Plus de connaissances
Bien sûr, plongeons un peu plus dans les détails de l’utilisation du sélecteur « :target » en CSS pour créer des effets d’interface utilisateur (UI) intéressants sans recourir à JavaScript.
L’un des usages les plus courants du sélecteur « :target » est la création d’onglets. Les onglets sont des éléments d’interface utilisateur qui permettent aux utilisateurs de basculer entre différents contenus ou fonctionnalités sur une même page. En utilisant le sélecteur « :target », il est possible de créer des onglets sans avoir besoin de JavaScript pour gérer les changements de contenu.
Voici un exemple d’onglets simples créés avec HTML et CSS utilisant le sélecteur « :target » :
HTML :
html<div class="tabs">
<a href="#tab1">Tab 1a>
<a href="#tab2">Tab 2a>
<a href="#tab3">Tab 3a>
div>
<div id="tab1">Contenu du tab 1div>
<div id="tab2">Contenu du tab 2div>
<div id="tab3">Contenu du tab 3div>
CSS :
css/* Styles pour les onglets */
.tabs a {
display: inline-block;
padding: 10px 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-bottom: none;
text-decoration: none;
}
/* Styles pour les onglets actifs */
.tabs a:target {
background-color: #ccc;
}
/* Styles pour les contenus des onglets */
.tabs div {
display: none;
padding: 20px;
}
/* Styles pour les contenus des onglets actifs */
.tabs div:target {
display: block;
}
Dans cet exemple, chaque lien d’onglet a un href correspondant à l’ID d’un élément de contenu. Lorsqu’un lien d’onglet est cliqué, l’ID correspondant devient la cible de l’URL et le sélecteur « :target » est appliqué à cet élément, ce qui le rend visible.
Un autre cas d’utilisation populaire du sélecteur « :target » est la création de fenêtres modales. Les fenêtres modales sont des éléments d’interface utilisateur qui apparaissent au-dessus du contenu principal pour afficher des informations supplémentaires, des messages d’erreur, ou demander une confirmation à l’utilisateur.
Voici un exemple simple de fenêtre modale créée avec CSS en utilisant le sélecteur « :target » :
HTML :
html<a href="#modal">Ouvrir la fenêtre modalea>
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">×span>
<p>Contenu de la fenêtre modale...p>
div>
div>
CSS :
css/* Styles pour la fenêtre modale */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
/* Styles pour le contenu de la fenêtre modale */
.modal-content {
background-color: #fff;
margin: 20% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* Styles pour le bouton de fermeture */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Styles appliqués lorsque la fenêtre modale est ciblée */
.modal:target {
display: block;
}
Dans cet exemple, lorsque l’utilisateur clique sur le lien pour ouvrir la fenêtre modale, l’ID correspondant devient la cible de l’URL et le sélecteur « :target » est appliqué à la classe « modal », ce qui la rend visible.
En conclusion, le sélecteur « :target » en CSS offre une manière puissante et élégante de créer des effets d’interface utilisateur sans utiliser de JavaScript. Qu’il s’agisse de créer des onglets, des fenêtres modales, ou d’autres interactions utilisateur, le sélecteur « :target » permet aux développeurs de concevoir des expériences utilisateur riches et dynamiques tout en maintenant une base de code légère et accessible.