Le domaine du CSS regorge de propriétés, et leur maîtrise complète peut s’avérer ardue. La propriété de visibilité CSS est un élément essentiel à appréhender si vous souhaitez exceller en tant que développeur web compétent.
Dans cet exposé, je vais détailler ce qu’est la visibilité CSS, souligner son importance et passer en revue les différentes valeurs qu’elle peut prendre.
Qu’est-ce que la visibilité CSS ?
La visibilité CSS est une propriété qui permet de contrôler l’affichage d’un élément sur une page web. Prenons l’exemple de quatre blocs. En jouant sur la propriété de visibilité, vous déterminez leur comportement d’affichage. Si la visibilité est réglée sur « visible », tous les éléments seront présents sur la page.
À l’inverse, si un élément est masqué, il continuera à occuper l’espace qui lui est alloué, mais restera invisible pour l’utilisateur.
La visibilité CSS est un atout précieux dans plusieurs situations :
- Gestion de l’affichage : Vous pouvez ajuster la visibilité de certains éléments en fonction de l’utilisateur et de ses actions. Par exemple, afficher un élément uniquement lorsqu’un utilisateur clique ou survole une zone précise.
- Préservation de la mise en page : Il est crucial qu’une application web maintienne sa structure et son contenu quel que soit le support utilisé. La propriété de visibilité permet de masquer un élément tout en conservant son espace, ce qui garantit une mise en page homogène.
- Optimisation des performances : Lorsque la visibilité est définie sur « masqué », le navigateur évite des calculs inutiles. À contrario, l’emploi de la propriété « display: none » oblige le navigateur à recalculer la mise en page à chaque affichage de l’élément.
- Création d’interfaces dynamiques et interactives : L’association de la visibilité CSS avec d’autres propriétés comme l’opacité permet de réaliser des effets de fondu, des animations et des transitions fluides.
Les différentes valeurs de la visibilité CSS
La propriété de visibilité CSS propose cinq valeurs distinctes. Je vais vous les exposer en détail à travers des exemples de code et des illustrations. Si vous souhaitez reproduire ces exemples :
- Créez un nouveau répertoire sur votre ordinateur.
- Ajoutez deux fichiers : « index.html » et « styles.css ».
- Ouvrez votre éditeur de code favori (pour ma part, j’utilise VS Code).
Vous pouvez utiliser cette commande :
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
L’étape suivante consiste à lier les fichiers « index.html » et « styles.css ». Dans la section <head> du fichier « index.html », ajoutez ceci :
<link rel="stylesheet" href="https://wilku.top/how-css-visibility-enhances-your-web-design-with-hidden-gems/styles.css">
Votre éditeur de code devrait afficher quelque chose de similaire à cela :
Visible
Lorsqu’un élément est défini avec la valeur « visibilité: visible », il est affiché sur la page web. Il s’agit de la valeur par défaut. Pour illustrer ce concept, nous pouvons utiliser trois blocs dans notre document HTML. Dans la section <body> de votre « index.html », insérez ce qui suit :
<div class="container">
<div class="box1"> Box 1 </div>
<div class="box2"> Box 2 </div>
<div class="box3"> Box 3 </div>
</div>
Nous pouvons maintenant appliquer des styles à nos blocs à l’aide du code CSS suivant :
.container {
padding: 15px;
width: max-content;
display: flex;
border: 1px solid black;
}
.box1,
.box2,
.box3 {
height: 30px;
width: 100px;
}
.box1 {
background-color: rgb(224, 49, 209);
margin-right: 15px;
}
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
}
.box3 {
background-color: rgb(154, 43, 12);
}
Une fois la page affichée, vous obtiendrez un résultat similaire à celui-ci :
Si vous définissez la visibilité des blocs sur « Visibilité : visible », cela ne changera rien, car ils sont tous visibles par défaut.
Cependant, nous pouvons illustrer le fonctionnement de la propriété « visible » en utilisant la propriété « display: none » sur l’un des blocs. Prenons l’exemple du bloc 3. Modifiez le code CSS de la classe « .box3 » comme suit :
.box3 {
background-color: rgb(154, 43, 12);
display: none
}
Après avoir actualisé la page, vous remarquerez que seuls deux blocs, le 1 et le 2, sont affichés.
Si vous observez attentivement, vous constaterez que notre élément « .container » a une taille réduite. En utilisant la propriété « display: none », le bloc 3 n’est plus rendu, et l’espace qu’il occupait devient disponible pour d’autres éléments.
Caché
Lorsque la propriété CSS « visibilité: caché » est appliquée à un élément, il devient invisible pour l’utilisateur final. Cependant, il continue à occuper l’espace qui lui est alloué. Par exemple, nous pouvons masquer le bloc 2 à l’aide de cette propriété.
Pour ce faire, modifiez le code CSS du bloc 2 comme suit :
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden
}
La seule modification que nous avons apportée est l’ajout de cette ligne :
visibility: hidden
La page finale aura l’apparence suivante :
Nous pouvons observer un espace entre le bloc 1 et le bloc 3, car l’élément du bloc 2 est simplement masqué.
L’inspection de notre page révélera que le bloc 2 est toujours présent dans le DOM.
Effondrer
La valeur « collapse » est une option de visibilité particulièrement adaptée aux sous-éléments, notamment les tableaux HTML. Par exemple :
Nous pouvons ajouter le code suivant pour créer un tableau dans notre fichier HTML :
<table>
<tr>
<th>Langage de programmation</th>
<th>Framework</th>
</tr>
<tr>
<td>JavaScript </td>
<td>Angular </td>
</tr>
<tr class="hidden-row">
<td>Ruby </td>
<td>Ruby on Rails</td>
</tr>
<tr>
<td>Python </td>
<td>Django </td>
</tr>
</table>
Nous pouvons maintenant ajouter des styles à notre tableau avec une bordure de 1px pour chaque cellule. Ajoutez ceci à votre fichier CSS :
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
Une fois le tableau affiché, vous obtiendrez le résultat suivant :
Nous allons maintenant masquer la deuxième ligne pour illustrer le fonctionnement de la propriété « visibilité: collapse ». Ajoutez ce code à votre CSS :
.hidden-row {
visibility: collapse;
}
La ligne contenant « Ruby » et « Ruby on Rails » sera masquée une fois la page rendue.
Initial
La propriété « visibilité: initial » permet de rétablir la valeur initiale d’un élément HTML. Par exemple :
- Notre tableau s’affiche initialement avec toutes ses lignes.
- Nous masquons la deuxième ligne avec la valeur « collapse ».
- Nous pouvons désormais rétablir l’affichage initial de cette ligne.
Pour illustrer ce concept, nous allons ajouter un bouton qui permet de basculer entre les valeurs d’affichage et de réduction de la ligne.
Ajoutez ce bouton cliquable à votre code HTML :
<button onclick="toggleVisibility()">Cliquez ici !!</button>
Ensuite, nous pouvons ajouter une fonction JavaScript qui recherche la classe « .hidden-row » et qui bascule la classe « .visible-row » lorsqu’on clique sur le bouton.
<script>
function toggleVisibility() {
const hiddenRow = document.querySelector('.hidden-row');
hiddenRow.classList.toggle('visible-row');
}
</script>
Ajoutez ce code à votre fichier CSS :
.visible-row {
visibility: initial;
}
La valeur de visibilité alternera à chaque clic sur le bouton.
Hériter
La propriété « visibilité: inherit » permet à un élément enfant d’hériter de la propriété de visibilité de son parent.
Voici un exemple simple pour illustrer cette propriété :
<h1>Démo de l'héritage</h1>
<div style="visibility: hidden">
<h2 style="visibility: inherit"> Masqué</h2>
</div>
<p>Visible (hors d'un élément masqué) </p>
Seul le contenu à l’intérieur des balises <h1> et <p> sera affiché. Cependant, un espace représentant les éléments masqués entre les balises <h1> et <p> sera présent.
Nous avons un <div> dont la visibilité est définie comme masquée. À l’intérieur de cette <div>, nous avons une balise <h2>. La visibilité de la <h2> est définie sur « hériter », ce qui signifie qu’elle hérite de son parent, la <div>.
Si nous définissons la visibilité de la <div> sur « visible », la balise <h2> (son enfant) héritera également de cette propriété.
<h1>Démo de l'héritage</h1>
<div style="visibility: visible">
<h2 style="visibility: inherit"> Masqué</h2>
</div>
<p>Visible (hors d'un élément masqué) </p>
Visibilité CSS : caché vs Affichage : aucun
La distinction essentielle entre « display:none » et « visibilité: caché » réside dans le fait que la première supprime totalement un élément de la mise en page, tandis que la seconde masque l’élément tout en préservant son espace.
Pour illustrer la différence entre ces deux propriétés, nous pouvons utiliser le code suivant :
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgray;
margin-right: 20px;
}
.box1 {
background-color: lightblue;
}
.box2 {
background-color: black;
}
.container {
padding: 10px;
border :2px solid black;
padding-left: 20px;
width: 250px;
}
</style>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
En affichant cette page, nous obtenons deux blocs côte à côte :
Démonstration de « display: none »
Ajoutez cette ligne à la classe « .box1 » :
display: none;
Après avoir rechargé la page, vous constaterez que le « .box1 » n’est plus visible. De plus, le second bloc (noir) se déplace vers la gauche pour occuper l’espace précédemment utilisé par le bloc bleu clair.
Démonstration de « visibility: hidden »
Au lieu de « display: none », ajoutez cette ligne à la classe « .box1 » :
visibility: hidden
Cette propriété laisse l’espace alloué au « .box1 », mais ne l’affiche pas. De plus, le « .box2 » conserve sa position.
| display:none | visibility:hidden |
| Supprime entièrement un élément de la page web | Masque un élément HTML, mais maintient son espace |
| Vous pouvez styliser un élément dont l’affichage est défini sur « none » | Vous pouvez positionner et styliser un élément dont la visibilité est définie comme « cachée » |
| Non accessible par les lecteurs d’écran | Vous pouvez accéder à un élément dont la visibilité est définie comme « cachée » à l’aide des lecteurs d’écran |
Améliorer l’accessibilité avec la visibilité CSS
La visibilité CSS permet de masquer des éléments qui n’ont pas d’intérêt pour tous les utilisateurs. Par exemple, un formulaire de connexion peut être masqué jusqu’à ce que l’utilisateur non identifié souhaite se connecter. Il est également possible de masquer des éléments secondaires comme un pied de page contenant des informations légales ou de copyright.
Voici un exemple de code pour illustrer comment améliorer l’accessibilité :
<title>Page d'accueil</title>
<style>
.login-form {
display: none;
}
.login-text:hover + .login-form {
display: block;
}
.login-form label {
display: block;
margin-bottom: 5px;
}
.login-form input {
width: 30%;
margin-bottom: 10px;
}
</style>
<p class="login-text">Connexion</p>
<form class="login-form">
<label for="username">Nom d'utilisateur:</label>
<input type="text" id="username" name="username" required />
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password" required />
<button type="submit">Valider</button>
</form>
Le formulaire de connexion n’apparaît que lorsque l’utilisateur survole le lien de connexion.
Conclusion
Nous espérons que vous êtes désormais en mesure d’utiliser la propriété de visibilité CSS avec aisance dans vos projets. Cela vous permettra de réaliser des transitions fluides et d’améliorer l’accessibilité de vos pages web. Toutefois, il est essentiel de savoir quand utiliser chaque valeur de visibilité pour éviter des rendus inattendus. L’utilisation incorrecte de cette propriété peut également masquer des données importantes aux utilisateurs finaux.
N’hésitez pas à consulter nos autres guides et ressources CSS pour découvrir d’autres propriétés à combiner avec la visibilité CSS.