Y a-t-il un opposé à display:none?

Question

Le contraire de visibility: hidden est visibility: visible. De même, y a-t-il un contraire pour display: none ?

Beaucoup de gens sont confus pour savoir comment afficher un élément lorsqu'il a display: none, car ce n'est pas aussi clair que d'utiliser la propriété visibility.

Je pourrais simplement utiliser visibility: hidden à la place de display: none, mais cela ne donne pas le même effet, donc je ne vais pas avec ça.

Answer 1

J'utilise display:block; ça marche pour moi

Answer 2

Voici une réponse du futur... environ 8 ans après que vous ayez posé la question. Alors qu'il n'y a toujours pas de valeur opposée à display: none, continuez à lire... Il y a quelque chose de encore mieux.

La propriété display est tellement surchargée que ce n'est pas amusant. Elle a au moins trois fonctions différentes. Elle contrôle :

• le type d'affichage externe (comment l'élément participe à la mise en page du parent, par exemple block, inline)
• le type d'affichage interne (la mise en page des éléments enfants, par exemple flex, grid)
• la boîte d'affichage (si l'élément s'affiche ou non, par exemple contents, none).

C'est ainsi depuis si longtemps que nous avons appris à vivre avec, mais certaines améliorations très attendues (espérons-le !) arrivent sur notre chemin.

Firefox prend maintenant en charge la syntaxe à deux valeurs (ou valeurs à mots-clés multiples) pour la propriété display qui sépare les types d'affichage externe et interne. Par exemple, block devient maintenant block flow, et flex devient block flex. Cela ne résout pas le problème de none, mais la séparation explicite des préoccupations est, je pense, un pas dans la bonne direction.

Pendant ce temps, Chromium (85+) nous a donné la propriété content-visibility, et l'a annoncée avec un certain éclat. Elle vise à résoudre un problème différent - accélérer les temps de chargement de la page en ne rendant pas un élément (et ses mises en page enfant) jusqu'à ce qu'il approche du viewport et ait vraiment besoin d'être vu, tout en restant accessible pour les recherches 'Trouver', etc. Cela se fait automatiquement en lui attribuant simplement la valeur auto. C'est une nouvelle passionnante en soi, mais regardez ce qu'elle fait aussi...

La propriété content-visibility: hidden vous offre tous les mêmes avantages que le contenu non rendu et l'état de rendu mis en cache comme le fait content-visibility: auto hors écran. Cependant, contrairement à auto, il ne commence pas automatiquement à se rendre à l'écran.

Cela vous donne plus de contrôle, vous permettant de masquer les contenus d'un élément et de les afficher rapidement plus tard.

Comparez-le à d'autres moyens courants de masquer les contenus d'éléments :

• display: none : masque l'élément et détruit son état de rendu. Cela signifie que le fait de démasquer l'élément est aussi coûteux que de rendre un nouvel élément avec les mêmes contenus.
• visibility: hidden : masque l'élément et conserve son état de rendu. Cela ne supprime pas vraiment l'élément du document, car il (et son sous-arbre) occupent toujours de l'espace géométrique sur la page et peuvent toujours être cliqués. Cela met également à jour l'état de rendu à chaque fois qu'il est nécessaire, même lorsqu'il est masqué.

content-visibility: hidden, en revanche, masque l'élément tout en préservant son état de rendu, de sorte que, s'il y a des changements à apporter, ils sont effectués uniquement lorsqu'ils sont à nouveau affichés (c'est-à-dire lorsque la propriété content-visibility: hidden est supprimée).

Wow. C'est un peu ce que display: none aurait dû être dès le départ - une façon de supprimer un élément de la mise en page, de manière élégante, et complètement indépendamment du type d'affichage ! Ainsi, l ' 'opposé' de content-visibility: hidden est content-visibility: visible, mais vous avez une troisième option très utile en auto qui effectue un rendu paresseux pour vous, accélérant le chargement initial de votre page.

La seule mauvaise nouvelle ici est que Firefox et Safari ne l'ont pas encore adopté. Mais qui sait, au moment où vous (cher collègue développeur) lirez ceci, cela pourrait avoir changé. Gardez un œil sur https://caniuse.com/css-content-visibility !

Answer 3

Dans le cas d'une feuille de style adaptée à l'impression, j'utilise le code suivant :

/* style pour l'écran */
.print_only { display: none; }

/* feuille de style pour l'impression */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

J'ai utilisé ceci lorsque j'avais besoin d'imprimer un formulaire contenant des valeurs et que les champs de saisie étaient difficiles à imprimer. J'ai donc ajouté les valeurs enveloppées dans une balise span.print_only (div.print_only était utilisé ailleurs) puis j'ai appliqué la classe .no_print aux champs de saisie. A l'écran, vous verriez les champs de saisie et à l'impression, seulement les valeurs. Si vous voulez être plus sophistiqué, vous pourriez utiliser JS pour mettre à jour les valeurs dans les balises span lorsque les champs étaient mis à jour, mais ce n'était pas nécessaire dans mon cas. Ce n'est peut-être pas la solution la plus élégante, mais cela a fonctionné pour moi !

Answer 4

J'ai rencontré ce défi lors de la construction d'une application où je souhaitais cacher un tableau pour certains utilisateurs mais pas pour d'autres.

Initialement, je l'ai configuré comme display:none mais ensuite display:inline-block pour les utilisateurs que je voulais le voir mais j'ai rencontré les problèmes de mise en forme que vous pourriez attendre (colonnes consolidées ou généralement désordonnées).

La façon dont j'ai contourné cela a été de montrer d'abord le tableau puis de faire "display:none" pour les utilisateurs que je ne voulais pas le voir. De cette façon, il s'est formaté normalement mais a ensuite disparu au besoin.

Une solution un peu latérale mais qui pourrait aider quelqu'un !

Answer 5

Vous pouvez utiliser display: block

Exemple :

Lorem Ipsum

Cliquez moi !
Cliquez moi !