/ / Utilisation de la propriété CSS " display: none "

Utilisation de la propriété CSS " display: none "

Les feuilles de style en cascade (CSS) vous permettent d'organiser l'apparence d'une page Web. L'une des propriétés et valeurs les plus couramment utilisées est " display: none ".

Définition de propriété

afficher aucun

La propriété elle-même est polyvalente et définitle type d'affichage de l'élément dans le document. Selon la valeur sélectionnée, une certaine section de la page peut être affichée en blocs, linéairement, sous forme d'éléments de liste, dans le cadre d'un tableau, etc. Ainsi, grâce à la propriété « display », vous pouvez changer le type du bloc lui-même dans le document.

En ce qui concerne la liaison propriété-valeur d'affichage :none ", alors cela vous permet de supprimer un élément ou un bloc du document. Dans ce cas, l'espace pour cette partie de la page n'est pas réservé, c'est-à-dire qu'il sort du flux. Tous les éléments qui se trouvent derrière le" supprimé "ne le voyez tout simplement pas et ignorez la taille et la position de tels Pour renvoyer un objet caché, vous devez accéder au document via des scripts qui modifieront simplement la valeur de la propriété au format requis, ce qui formatera automatiquement la page en fonction du nouveau objet dessus.

Différence entre les propriétés « affichage » et « visibilité »

style d'affichage aucun

Malgré le fait qu'en fin de compte les deux propriétés cachentélément de l'utilisateur, leur principe de fonctionnement est sensiblement différent. Comme mentionné ci-dessus, le paramètre " display: none " supprime complètement l'élément du document. Le bloc tombe de la page, n'occupant ainsi pas de place. Dans ce cas, l'objet lui-même reste dans le code HTML comme avant.

À son tour, la « visibilité :caché "masque un élément à l'utilisateur, mais ne le supprime pas du modèle de document. Cela laisse un espace réservé sur la page pour ce bloc. C'est-à-dire que le flux de documents percevra et prendra en compte la position et la taille d'un élément avec la propriété « visibilité : cachée » exactement de la même manière que sans elle.

Une telle différence dans l'organisation de la structure du document par ces deux propriétés permet d'obtenir le résultat nécessaire à l'affichage correct de la page.

Utilisation de CSS - affichage : aucun

div afficher aucun

Le document Internet vous permet d'utiliserplusieurs options pour définir la propriété d'un élément. Tout d'abord, l'affichage : aucun ne peut être écrit dans un fichier de feuille de style en cascade séparé. Cette méthode est la plus avancée et la plus correcte, car elle vous permet de déplacer tous les sélecteurs, classes et leurs propriétés dans un document séparé. Un tel modèle permet de retrouver et de modifier très rapidement les paramètres de la page.

Dans le titre du document

La deuxième option consiste à définir des styles dansl'en-tête du document entre les balises de style. L'efficacité de cette méthode est bien moindre. Il est recommandé de ne l'utiliser qu'en dernier recours, car en présence d'un grand nombre de styles, la lisibilité de la page par le concepteur Web est considérablement altérée. Cela conduit à des erreurs et ralentit le processus de développement d'un document Internet. Cette approche est recommandée uniquement lors de l'ajout d'un petit nombre de styles à cette balise ou pour le débogage d'un document.

Il ne faut pas oublier que si cette méthodeSi l'organisation du style est située dans le document en dessous de l'import d'une feuille de style distincte, les propriétés d'intersection seront écrasées par celles trouvées dans le corps du document html.

Bloc div. Affichage : aucun

css afficher aucun

Une autre façon est d'ajouterdirectement dans la balise d'élément de code "style = display: none;". Cette approche est souvent utilisée lorsque l'on travaille avec divers frameworks, dont le but est de réduire le nombre de propriétés directement dans la feuille de style et de les afficher dans le document Internet lui-même. De plus, une telle entrée se produit souvent lorsque "l'inspecteur de code" consulte la page. Il est important de se rappeler qu'en utilisant cette approche, vous pouvez modifier la propriété et sa valeur comme indiqué dans la feuille de style. Par conséquent, vous devez être prudent, car au final, vous pouvez vous créer des problèmes supplémentaires et passer du temps à rechercher et à corriger une erreur dans le code de la page.

JavaScript

Il convient également de mentionner le supplémentla possibilité de changer cette propriété. Il ne fait plus référence à la feuille de style et au code html, mais au langage de script. Par conséquent, pour l'utiliser, vous devez avoir au moins quelques connaissances dans ce domaine. Pour supprimer un élément du flux de documents, vous pouvez utiliser la propriété JavaScript " display = none ". Il vous permet de modifier la structure du document lorsqu'un certain événement se produit. De plus, grâce à l'utilisation de scripts, vous pouvez dynamiquement ("à la volée") modifier le paramètre de propriété et ainsi mettre à jour la vue de la page sans avoir à la recharger. Cette approche est utile pour organiser les menus déroulants, les modaux et les formulaires.

Référencement

javascript afficher aucun

Dans le domaine de l'optimisation de contenu web pour les moteurs de recherchemachine, il y a beaucoup de superstitions et d'ambiguïtés. Par exemple, de nombreux référenceurs en herbe considèrent l'utilisation de la propriété « affichage » comme de mauvaises manières. Ils expliquent cela par le fait que les moteurs de recherche, voyant du contenu caché, commencent à considérer la page comme du spam. Il y a une certaine logique dans leurs propos, mais rien de plus. À ce stade, la propriété de masquage d'objet est assez souvent utilisée pour formater les menus déroulants et masquer les parties du document qui n'intéressent pas actuellement l'utilisateur (par exemple, lorsqu'une catégorie est sélectionnée, les informations sur les autres sont supprimées ). Cette approche est utilisée par des portails Internet assez puissants (l'un d'eux est "Amazon"). Ainsi, les robots des moteurs de recherche ne peuvent pas considérer l'utilisation de la propriété " display: none " comme du spam.

C'est une autre affaire lorsque cette approche est utilisée pourcacher des mots et des symboles individuels. Malgré le fait que les robots de recherche ne disposent pas encore d'algorithmes parfaits pour reconnaître un tel "spam" dans les documents, la probabilité que la page soit prise en compte est assez élevée. Par conséquent, il est recommandé d'utiliser la propriété « affichage » strictement aux fins prévues - pour modifier le type de bloc ou le masquer temporairement aux yeux de l'utilisateur.

J'ai aimé:
0
Messages populaires
Développement spirituel
Nourriture
yup