L'affichage CSS (CSS Display) est un module CSS qui définit la façon dont l'arbre des boîtes pour la mise en forme est généré à partir de l'arbre des éléments du document et qui définit les propriétés qui le contrôlent.

Référence

Propriétés CSS

Types de donnée CSS

Guides

Disposition en flux (display: block, display: inline)

Les boîtes flexibles (display: flex)

Les grilles CSS (display: grid)

Spécifications

Spécification État Commentaires
CSS Display Module Level 3
La définition de 'display' dans cette spécification.
Version de travail Ajout des valeurs run-in, flow, flow-root, contents et de la syntaxe avec plusieurs mots-clés.
CSS Level 2 (Revision 1)
La définition de 'display' dans cette spécification.
Recommendation Ajout des valeurs pour les tableaux et ajout de inline-block.
CSS Level 1
La définition de 'display' dans cette spécification.
Recommendation Spécification initiale. Valeurs de base : none, block, inline et list-item.

En plus du module de spécification CSS Display de niveau 3, d'autres modules de spécifications définissent le comportement à avoir selon les différentes valeurs de display.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
Multi-keyword values
Expérimentale
Chrome ? Edge ? Firefox Aucun support NonIE Aucun support NonOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Aucun support NonOpera Android ? Safari iOS ? Samsung Internet Android ?
list-itemChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 6Opera Support complet 7Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
inline-blockChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 8
Support complet 8
Support partiel 6
Notes
Notes Until Internet Explorer 8, inline-block is only for natural inline elements.
Opera Support complet 7Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
inline-tableChrome Support complet 1Edge Support complet 12Firefox Support complet 3IE Support complet 8Opera Support complet 7Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-groupChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 8Opera Support complet 7Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
flexChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12Firefox Support complet 20
Notes
Support complet 20
Notes
Notes Firefox 28 added multi-line flexbox support.
Aucun support 18 — 28
Désactivée
Désactivée From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Support complet 11
Support complet 8
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -ms-flexbox
Opera Support complet 16
Support complet 16
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Aucun support 12.1 — 15
Safari Support complet 9
Support complet 9
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Support complet 4.4
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet 12Firefox Android Support complet 20
Notes
Support complet 20
Notes
Notes Firefox 28 added multi-line flexbox support.
Aucun support 18 — 28
Désactivée
Désactivée From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 16
Support complet 16
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Aucun support 12.1 — 14
Safari iOS Support complet 9
Support complet 9
Support complet 7.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet Oui
inline-flexChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12Firefox Support complet 20
Notes
Support complet 20
Notes
Notes Firefox 28 added multi-line flexbox support.
Aucun support 18 — ?
Désactivée
Désactivée From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Support complet 11
Support complet 8
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -ms-inline-flexbox
Opera Support complet 16
Support complet 16
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 9
Support complet 9
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Support complet 4.4
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile Support complet 12Firefox Android Support complet 20
Notes
Support complet 20
Notes
Notes Firefox 28 added multi-line flexbox support.
Aucun support 18 — ?
Désactivée
Désactivée From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 16
Support complet 16
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 9
Support complet 9
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet Oui
grid
Expérimentale
Chrome Support complet 57Edge Support complet 16
Support complet 16
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Support complet 52IE Support partiel 10
Préfixée Notes
Support partiel 10
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes Internet Explorer implements an older version of the specification.
Opera Support complet 44Safari Support complet OuiWebView Android Support complet 57Chrome Android Support complet 57Edge Mobile Support complet 16
Support complet 16
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Android Support complet 52Opera Android Support complet 44Safari iOS Support complet OuiSamsung Internet Android Support complet 7.0
inline-grid
Expérimentale
Chrome Support complet 57Edge Support complet 16
Support complet 16
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Support complet 52IE Support partiel 10
Préfixée Notes
Support partiel 10
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Notes Internet Explorer implements an older version of the specification.
Opera Support complet 44Safari ? WebView Android Support complet 57Chrome Android Support complet 57Edge Mobile Support complet 16
Support complet 16
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Firefox Android Support complet 52Opera Android Support complet 44Safari iOS ? Samsung Internet Android Support complet 7.0
subgrid
Obsolète
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container
Expérimentale
Chrome ? Edge Support complet 12Firefox Support complet 38
Support complet 38
Aucun support 34 — 38
Désactivée
Désactivée From version 34 until version 38 (exclusive): this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Support complet 12Firefox Android Support complet 38
Support complet 38
Aucun support 34 — 38
Désactivée
Désactivée From version 34 until version 38 (exclusive): this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?
run-in
Expérimentale
Chrome Aucun support 1 — 32
Notes
Aucun support 1 — 32
Notes
Notes Before Chrome 4, run-in was not supported before inline elements.
Edge Aucun support NonFirefox Aucun support NonIE Support complet 8Opera Aucun support 7 — 15Safari Aucun support 1 — 8
Notes
Aucun support 1 — 8
Notes
Notes Before Safari 5, run-in was not supported before inline elements.
WebView Android Aucun support ? — 4.4.3
Notes
Aucun support ? — 4.4.3
Notes
Notes Before version 4, run-in was not supported before inline elements.
Chrome Android Aucun support ? — 32
Notes
Aucun support ? — 32
Notes
Notes Before Chrome 4, run-in was not supported before inline elements.
Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android ? Safari iOS Aucun support ? — 8
Notes
Aucun support ? — 8
Notes
Notes Before Safari 5, run-in was not supported before inline elements.
Samsung Internet Android ?
flow-root
Expérimentale
Chrome Support complet 58Edge ? Firefox Support complet 53IE ? Opera Support complet 45Safari ? WebView Android Support complet 58Chrome Android Support complet 58Edge Mobile ? Firefox Android Support complet 53Opera Android Support complet 45Safari iOS ? Samsung Internet Android Support complet 7.0
contents
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
contents: 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 ?
-moz-box and -moz-inline-box
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support ? — 64
Notes
Aucun support ? — 64
Notes
Notes This is still available to Firefox UI code.
Support complet 62
Désactivée
Désactivée From version 62: this feature is behind the layout.css.xul-box-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support ? — 64
Notes
Aucun support ? — 64
Notes
Notes This is still available to Firefox UI code.
Support complet 62
Désactivée
Désactivée From version 62: this feature is behind the layout.css.xul-box-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
-moz-grid, -moz-inline-grid, -moz-grid-group and -moz-grid-line
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support ? — 62
Notes
Aucun support ? — 62
Notes
Notes This is still available to Firefox UI code.
Support complet 62
Désactivée
Désactivée From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support ? — 62
Notes
Aucun support ? — 62
Notes
Notes This is still available to Firefox UI code.
Support complet 62
Désactivée
Désactivée From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
-moz-stack and -moz-inline-stack
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support ? — 62
Notes
Aucun support ? — 62
Notes
Notes This is still available to Firefox UI code.
Support complet 62
Désactivée
Désactivée From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support ? — 62
Notes
Aucun support ? — 62
Notes
Notes This is still available to Firefox UI code.
Support complet 62
Désactivée
Désactivée From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
-moz-deck
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support ? — 62
Notes
Aucun support ? — 62
Notes
Notes This is still available to Firefox UI code.
Support complet 62
Désactivée
Désactivée From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support ? — 62
Notes
Aucun support ? — 62
Notes
Notes This is still available to Firefox UI code.
Support complet 62
Désactivée
Désactivée From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
-moz-popup
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support ? — 62
Notes
Aucun support ? — 62
Notes
Notes This is still available to Firefox UI code.
Support complet 62
Désactivée
Désactivée From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support ? — 62
Notes
Aucun support ? — 62
Notes
Notes This is still available to Firefox UI code.
Support complet 62
Désactivée
Désactivée From version 62: this feature is behind the layout.css.xul-display-values.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Support partiel  
Support partiel
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.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
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é.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Étiquettes et contributeurs liés au document

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