Nous avons de nombreuses propriétés CSS, et les maîtriser toutes peut être un défi. La visibilité CSS est l’une des propriétés importantes que vous devez maîtriser si vous souhaitez devenir un développeur Web qualifié.
Dans cet article, je vais définir la visibilité CSS, expliquer son importance, lister et expliquer les différentes valeurs de visibilité CSS.
Table des matières
Qu’est-ce que la visibilité CSS ?
La propriété de visibilité CSS masque ou affiche un élément dans une page Web. Par exemple, vous pouvez avoir quatre cases sur votre page Web et utiliser la propriété de visibilité pour déterminer comment elles seront affichées. Tous les éléments apparaîtront sur la page si vous définissez la visibilité sur visible.
Cependant, si l’élément est masqué, il occupera toujours de l’espace mais sera masqué du navigateur/écran final.
La visibilité CSS est importante dans les cas suivants ;
- Contrôle de la visibilité : vous pouvez contrôler ce qui doit être affiché en fonction de l’utilisateur actuel. Vous pouvez définir la visibilité d’un élément pour qu’il ne soit visible que lorsqu’un utilisateur le déclenche à l’aide d’une certaine action. Par exemple, un survol ou un clic sur un bouton.
- Préservation de la mise en page : Une bonne application doit conserver sa mise en page et son contenu quelle que soit la taille de l’écran. Lorsque vous définissez la visibilité d’un élément comme masqué, il occupera toujours de l’espace mais ne sera pas visible pour les utilisateurs finaux. Une telle approche permet de conserver une disposition cohérente.
- Optimiser les performances : le navigateur n’a pas besoin de continuer à recalculer la mise en page lorsque la propriété de visibilité est définie sur visibilité : masqué. Cependant, lorsque vous utilisez la propriété display:none, le navigateur doit recalculer la mise en page chaque fois que vous décidez d’afficher à nouveau l’élément.
- Créez une interface utilisateur dynamique et interactive : vous pouvez combiner la propriété de visibilité CSS avec d’autres propriétés, telles que l’opacité, pour créer des effets de fondu, des animations et des transitions fluides.
Différentes valeurs de visibilité CSS
La visibilité CSS a cinq valeurs possibles. Je vais entrer dans les détails à travers des blocs de code et des captures d’écran. Si vous avez l’intention de suivre,
- Créez un dossier sur votre ordinateur local.
- Ajoutez deux fichiers ; index.html et styles.css.
- Ouvrez le projet dans votre éditeur de code préféré (j’utilise VS Code)
Vous pouvez utiliser cette commande ;
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
La prochaine consiste à connecter les fichiers index.html et styles.css. Dans la section
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">
Vous devriez maintenant avoir quelque chose de similaire à ceci sur votre éditeur de code ;
Visible
Lorsque vous définissez la valeur d’un élément sur visibilité : visible, il apparaîtra sur la page Web. Cette visibilité est là par défaut. Nous pouvons avoir trois cases dans notre document HTML pour mieux comprendre ce concept. Dans la section
de votre index.html, ajoutez 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 styliser nos divs (boîtes) en utilisant le 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);
}Lorsque la dernière page sera rendue, vous aurez quelque chose comme ça ;
Si vous définissez la visibilité des cases sur Visibilité : visible, cela n’aura aucun effet car toutes les cases sont visibles par défaut.
Cependant, nous pouvons démontrer comment la propriété visible fonctionne en utilisant la propriété display: none sur l’une des cases. Nous pouvons sélectionner box3 comme exemple. Modifiez le code CSS sur la classe .box3 comme suit ;
.box3 {
background-color: rgb(154, 43, 12);
display: none
}Lorsque vous réafficherez la page, vous remarquerez que nous n’avons que deux cases, une et deux.
Si vous êtes enthousiaste, vous remarquerez que notre élément .container a une taille réduite. Lorsque vous utilisez la propriété display: none, la boîte 3 n’est pas rendue et son espace sur notre navigateur devient vacant pour que d’autres boîtes puissent l’occuper.
Caché
Lorsque nous appliquons la visibilité : propriété CSS masquée sur un élément, il sera masqué à l’utilisateur final. Cependant, il occupera toujours de l’espace. Par exemple, nous pouvons masquer Box2 en utilisant cette propriété.
Pour ce faire, modifiez le code CSS Box2 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 sera telle qu’elle est affichée ;
Nous pouvons voir un espace entre la boîte 1 et la boîte 3 car l’élément de la boîte 2 est uniquement masqué.
Nous pouvons voir que la boîte 2 est toujours sur le DOM si nous inspectons notre page rendue.
Effondrement
Collapse est une valeur de visibilité utilisée sur les sous-éléments. Les tableaux HTML sont un parfait exemple d’application de l’attribut visibilité:collapse.
Nous pouvons ajouter le code suivant pour créer un tableau dans notre fichier HTML ;
<table> <tr> <th>Programming Language</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 styliser notre tableau avec une bordure de 1px sur toutes ses cellules. Ajoutez ceci à votre fichier CSS ;
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}Lorsque nous afficherons le tableau, nous aurons ce qui suit ;
Nous allons maintenant masquer la deuxième ligne pour montrer le fonctionnement de l’attribut visibilité : réduire. Ajoutez ceci à votre code CSS ;
.hidden-row {
visibility: collapse;
}Lorsque la page est rendue, la ligne avec Ruby et Ruby on Rails sera masquée.
Initial
La propriété visibilité : initial réinitialise un élément HTML à sa valeur initiale. Par exemple;
- Nous avons commencé avec toutes les lignes de notre tableau affichées.
- Nous avons réduit la valeur de la ligne 2, la masquant ainsi.
- On peut maintenant revenir à la valeur initiale (l’afficher)
Nous allons ajouter un bouton qui bascule entre les valeurs d’affichage et de réduction pour le démontrer.
Ajoutez ce bouton cliquable à votre code HTML ;
<button onclick="toggleVisibility()">Click Me!!</button>
Nous pouvons ensuite ajouter une fonction JavaScript qui recherche la classe .hidden-row et bascule la classe .visible-row dessus lorsque le bouton est cliqué.
<script>
function toggleVisibility() {
const hiddenRow = document.querySelector('.hidden-row');
hiddenRow.classList.toggle('visible-row');
}
</script>
Add this code to your CSS file;
.visible-row {
visibility: initial;
}La valeur de visibilité alternera lorsque vous cliquerez sur le bouton affiché ;
Hériter
La propriété visibilité : inherit permet à un élément enfant d’hériter de la propriété display du parent.
Nous pouvons avoir ce code simple pour démontrer comment cette propriété fonctionne ;
<h1>Inherit Demo</h1> <div style="visibility: hidden"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p> </p>
Seul le contenu à l’intérieur des balises h1 et paragraphe sera affiché si vous affichez la page. Cependant, un espace représentant les éléments masqués entre les balises
et
existera.
Nous avons une div dont nous avons défini la visibilité comme masquée. Nous avons la balise
à l’intérieur de la div. Nous avons défini la visibilité du sur hériter, ce qui signifie qu’il hérite de son parent, le div.
Cependant, si nous définissons la propriété de la div comme visible, le
(son enfant) en héritera également. <h>Inherit Demo</h>
<div style="visibility: visible">
<h2 style="visibility: inherit"> Hidden</h2>
</div>
<p>Visible (not inside a hidden element) </p>
Visibilité CSS : masquée ou affichée : aucune
La principale différence entre display:none et visibilité:hidden est que le premier supprime entièrement un élément de la mise en page tandis que le second masque un élément mais prend toujours de la place.
Nous pouvons utiliser ce code pour démontrer la différence entre les deux ;
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
</body>
</html>Si nous rendons notre page, nous aurons deux cases côte à côte ;
L’affichage : aucune démo
Ajoutez ceci à la classe .box1 ;
display: none;
Lorsque vous affichez la page, vous remarquerez que .box1 ne sera plus affiché. La deuxième case (noire) se déplace également vers la gauche pour occuper l’espace précédemment occupé par la case bleu clair.
La visibilité : démo masquée
Au lieu de display: none, ajoutez cette classe .box1 ;
visibility: hidden
Cette propriété laisse de la place pour box1 mais ne l’affiche pas. En revanche, box2 reste à sa place.
display:nonevisibility:hiddenRetire entièrement un élément de la page WebMasque un élément HTML mais occupe toujours de l’espace sur la page WebVous pouvez styliser un élément dont l’affichage est défini sur noneVous pouvez positionner et styliser un élément dont la visibilité est masquéeNon accessible par les lecteurs d’écranVous pouvez accéder un élément dont la visibilité est définie comme masquée à l’aide de lecteurs d’écran
Améliorez l’accessibilité avec la visibilité CSS
Vous pouvez utiliser la visibilité CSS pour masquer les éléments qui ne sont pas importants pour tous les utilisateurs. Par exemple, vous pouvez utiliser cette fonctionnalité pour masquer un utilisateur de connexion qui ne sera disponible que pour les utilisateurs qui ne sont pas connectés. Vous pouvez également avoir une barre latérale ou un pied de page contenant des conditions d’utilisation ou des informations de copyright.
Nous pouvons avoir ce code pour illustrer comment vous pouvez améliorer la visibilité ;
<!DOCTYPE html>
<html>
<head>
<title>Homepage</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>
</head>
<body>
<p class="login-text">Login</p>
<form class="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<button type="submit">Submit</button>
</form>
</body>
</html>Le formulaire de connexion ne devient visible que lorsque vous survolez le premier élément.
Conclusion
Nous pensons que vous pouvez désormais utiliser confortablement la propriété de visibilité CSS dans votre code pour effectuer des transitions fluides et améliorer l’accessibilité de vos pages Web. Cependant, vous devez savoir où utiliser chaque valeur de visibilité pour éviter de vous retrouver avec des pages bancales. Vous pouvez également masquer des données cruciales aux utilisateurs finaux lorsque vous utilisez à mauvais escient la propriété de visibilité CSS.
Consultez nos guides et ressources CSS pour en savoir plus sur les propriétés CSS que vous pouvez combiner avec la visibilité CSS.