Il peut y avoir des moments, lorsque vous travaillez sur le développement de pages Web, où vous devez « cacher » des zones spécifiques des éléments pour une raison ou une autre. Vous pouvez, bien sûr, simplement supprimer le(s) élément(s) en question du code HTML, mais que faire si vous voulez qu’ils restent dans le code, mais ne s’affichent pas sur l’écran du navigateur pour une raison quelconque. Pour garder un élément dans votre HTML, mais le cacher pour l’affichage, vous vous tournerez vers CSS.
Les deux façons les plus courantes de masquer un élément contenu dans le HTML seraient d’utiliser les propriétés CSS pour « Display » ou « Visibility ». À première vue, ces deux propriétés peuvent sembler faire en grande partie la même chose, mais elles ont chacune des différences distinctes dont vous devriez être conscient. Jetons un coup d’œil à ces différences.
A lire aussi : Pour Elon Musk, Tesla disposera d'une voiture autonome jusqu'à la fin de l'année.
Visibilité
Utiliser la paire Propriété/Valeur de CSS
Visibilité : Cachée
A lire aussi : Comment choisir la meilleure structure de conseils en innovation ?
masque un élément dans le navigateur. Toutefois, cet élément caché occupe toujours de l’espace dans la mise en page. C’est comme si vous aviez rendu l’élément invisible, mais il reste toujours en place et occupe la place qu’il aurait occupée s’il avait été seul.
Si vous placez un DIV sur votre page et utilisez CSS pour lui donner des dimensions de 100 x 100 pixels,
Visibilité : Cachée
La propriété fera en sorte que le DIV ne s’affiche pas à l’écran, mais le texte qui le suit agira comme si elle était toujours là, respectant cet espacement de 100 x 100.
La propriété de visibilité n’est pas un élément que nous utilisons très fréquemment, et il n’est certainement pas le seul. Si nous utilisons aussi d’autres propriétés CSS comme le positionnement pour obtenir la mise en page que nous voulions pour un certain élément, nous pourrions alors utiliser « Visibility » pour cacher cet élément initialement, pour ensuite le « rendre » au survol. C’est une utilisation possible de cette propriété, mais encore une fois, ce n’est pas quelque chose vers quoi nous nous tournons fréquemment.
Affichage
A la différence de la propriété « visibilité », qui laisse un élément dans le flux normal de documents.
Affichage : Aucun
enlève complètement l’élément du document. Il ne prend pas de place, même si sa balise HTML est toujours dans le code source. C’est parce qu’il est, en effet, supprimé du flux du documents. A toutes fins utiles, l’objet a disparu. Cela peut être une bonne ou une mauvaise chose, selon vos intentions. Il peut également être dommageable pour votre page si vous abusez de cette propriété !
Nous utilisons souvent « Affichage : Aucun » lorsque nous testons une page. Si nous avons besoin d’une zone pour « s’éloigner » un moment afin de pouvoir tester d’autres zones de la page, nous pouvons utiliser cette commande. La chose à retenir, cependant, est que l’élément doit être retourné à la page avant le lancement effectif de ce site. En effet, un élément supprimé du flux de documents dans cette méthode n’est pas vu par les moteurs de recherche ou les lecteurs d’écran, même s’il reste dans la balise HTML. Dans le passé, cette méthode était utilisée comme une méthode de hack pour essayer d’influencer le classement dans les moteurs de recherche, de sorte que les éléments qui ne sont pas affichés pourraient être un drapeau rouge pour Google pour examiner pourquoi cette approche est utilisée.
Nous trouvons l’une des façons d’utiliser « Affichage : Aucun », et nous l’utilisons sur des sites Web de production en direct lorsque nous construisons un site responsive pouvant contenir des éléments disponibles pour une taille d’affichage mais pas pour d’autres. Vous pouvez utiliser « Affichage : Aucun » pour cacher cet élément et le réactiver ensuite avec les requêtes multimédia. C’est une utilisation acceptable de « Affichage : Aucun » parce que vous n’essayez pas de cacher quoi que ce soit pour des raisons néfastes, mais que vous avez un besoin légitime de le faire.
