Ces mots-clés définissent si un élément génère des boîtes d'affichage ou aucune.

Syntaxe

contents 
L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur contents affecte les éléments « inhabituels » tels que les éléments remplacés. Voir Appendix B: Effects of display: contents on Unusual Elements pour plus de détails.

À l'heure actuelle, en raison d'un bug, les éléments ciblés par une règle avec display: contents sont retirés de l'arbre d'accessibilité et ne sont donc pas parcourus par les lecteurs d'écran.
none
Désactive l'affichage d'un élément afin que celui-ci n'ait aucun effet sur la disposition du document (le document est affiché comme si l'élément n'existait pas). Tous les éléments descendants voient également leur affichage désactivé.
Si on souhaite que l'élément ne soit pas affiché mais occupe néanmoins un espace, il faudra utiliser la propriété visibility.

Syntaxe formelle

La syntaxe n'a pas été trouvée !

Exemples

display: none

CSS

p.secret {
  display: none;
}

HTML

<p>Texte visible</p>
<p class="secret">Texte invisible</p>

Résultat

display: contents

Dans cet exemple, l'élément <div> externe a une bordure rouge sur 2 pixels et mesure 300 pixels de large. Toutefois, cet élément est ciblé avec display: contents et l'élément <div> ne sera pas affiché tel quel : la bordure et la largeur ne s'appliqueront pas et l'élément fils sera affiché comme si le parent n'avait pas existé.

CSS

.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}

HTML

<div class="outer">
  <div>Inner div.</div>
</div>

Résultat

Compatibilité des navigateurs

Prise en charge contents

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet 65
Support complet 65
Aucun support 58 — 65
Désactivée
Désactivée From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Aucun support NonFirefox Support complet 37
Support complet 37
Aucun support 36 — 53
Désactivée
Désactivée From version 36 until version 53 (exclusive): this feature is behind the layout.css.display-contents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 52Safari Support complet 11.1WebView Android Support complet 65Chrome Android Support complet 65Edge Mobile Aucun support NonFirefox Android Support complet 57Opera Android Support complet 52Safari iOS Support complet 11.1Samsung Internet Android Aucun support Non
Specific behavior of unusual elements when display: contents is applied to them
Expérimentale
Chrome ? Edge Aucun support NonFirefox Support complet 59IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 59Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,