CSS Display

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.
Candidat au statut de recommandation 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 AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
displayChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
contentsChrome 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 Support complet 79Firefox 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 52
Support complet 52
Aucun support 45 — 52
Désactivée
Désactivée From version 45 until version 52 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 11.1WebView Android Support complet 65Chrome Android 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.
Firefox Android Support complet 57Opera Android Support complet 47
Support complet 47
Aucun support 43 — 47
Désactivée
Désactivée From version 43 until version 47 (exclusive): this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Support complet 11.3Samsung Internet Android Support complet 9.0
contents: Specific behavior of unusual elements when display: contents is applied to themChrome Support complet 58Edge Support complet 79Firefox Support complet 59IE Aucun support NonOpera Support complet 45Safari Aucun support NonWebView Android Support complet 65Chrome Android Support complet 58Firefox Android Support complet 59Opera Android Support complet 43Safari iOS Aucun support NonSamsung Internet Android Support complet 9.0
<display-outside>Chrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
display-outside.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 — 19Safari 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 ≤37 — ≤37Chrome Android Aucun support 18 — 32Firefox Android Aucun support NonOpera Android Aucun support 10.1 — 19Safari iOS Aucun support 1 — 8
Notes
Aucun support 1 — 8
Notes
Notes Before Safari 5, run-in was not supported before inline elements.
Samsung Internet Android Aucun support 1.0 — 2.0
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 partiel 11
Notes
Support partiel 11
Notes
Notes IE incorrectly positions inline block content inside flex containers. See the discussion on Microsoft Answers.
Support partiel 8
Notes Autre nom
Notes IE incorrectly positions inline block content inside flex containers. See the discussion on Microsoft Answers.
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 ≤37
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-
Firefox 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
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 2.0
Support complet 2.0
Support complet 1.5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
flow-rootChrome Support complet 58Edge Support complet 79Firefox Support complet 53IE Aucun support NonOpera Support complet 45Safari Support complet 13WebView Android Support complet 58Chrome Android Support complet 58Firefox Android Support complet 53Opera Android Support complet 43Safari iOS Support complet 13Samsung Internet Android Support complet 7.0
gridChrome 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 10.1WebView Android Support complet 57Chrome Android Support complet 57Firefox Android Support complet 52Opera Android Support complet 43Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.0
Notes
Support complet 6.0
Notes
Notes Samsung Internet added this earlier than the corresponding Chrome version would indicate.
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 ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 14Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
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 — 20
Désactivée
Désactivée From version 18 until version 20 (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-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 ≤37
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-
Firefox Android Support complet 20
Notes
Support complet 20
Notes
Notes Firefox 28 added multi-line flexbox support.
Aucun support 18 — 20
Désactivée
Désactivée From version 18 until version 20 (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-
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 2.0
Support complet 2.0
Support complet 1.5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
inline-gridChrome 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 10.1WebView Android Support complet 57Chrome Android Support complet 57Firefox Android Support complet 52Opera Android Support complet 43Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.0
Notes
Support complet 6.0
Notes
Notes Samsung Internet added this earlier than the corresponding Chrome version would indicate.
inline-tableChrome Support complet 1Edge Support complet 12Firefox Support complet 3IE Support complet 8Opera Support complet 7Safari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 14Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
list-itemChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 6Opera Support complet 7Safari Support complet 1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 14Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
list-item: Supported on <legend>Chrome Support complet 71Edge Support complet 79Firefox Support complet 64IE Aucun support NonOpera Support complet 58Safari Aucun support NonWebView Android Support complet 71Chrome Android Support complet 71Firefox Android Support complet 64Opera Android Support complet 50Safari iOS Aucun support NonSamsung Internet Android Support complet 10.0
Multi-keyword values
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 70IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
noneChrome Support complet 1
Notes
Support complet 1
Notes
Notes Chrome 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7
Notes
Support complet 7
Notes
Notes Opera 52 stopped creating layout objects for elements inside an <iframe> with display:none applied.
Safari Support complet 1WebView Android Support complet ≤37
Notes
Support complet ≤37
Notes
Notes WebView 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
Chrome Android Support complet 18
Notes
Support complet 18
Notes
Notes Chrome 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
Firefox Android Support complet 4Opera Android Support complet 10.1
Notes
Support complet 10.1
Notes
Notes Opera Android 47 stopped creating layout objects for elements inside an <iframe> with display:none applied.
Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
Notes
Support complet 1.0
Notes
Notes Chrome 65 stopped creating layout objects for elements inside an <iframe> with display:none applied.
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-containerChrome Aucun support NonEdge Aucun support 12 — 79Firefox 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 Support complet 7Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox 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 Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
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 ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 14Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
-moz-box and -moz-inline-box
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 1 — 64
Notes
Aucun support 1 — 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 NonFirefox Android Aucun support 4 — 64
Notes
Aucun support 4 — 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-deck
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 1 — 62
Notes
Aucun support 1 — 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 NonFirefox Android Aucun support 4 — 62
Notes
Aucun support 4 — 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-grid, -moz-grid-group, and -moz-grid-line
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 1 — 62
Notes
Aucun support 1 — 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 NonFirefox Android Aucun support 4 — 62
Notes
Aucun support 4 — 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-inline-grid and -moz-inline-stack
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 1 — 62
Notes
Aucun support 1 — 62
Notes
Notes Available to Firefox UI code.
Aucun support 62 — 70
Désactivée
Désactivée From version 62 until version 70 (exclusive): 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 NonFirefox Android Aucun support 4 — 62
Notes
Aucun support 4 — 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 1 — 62
Notes
Aucun support 1 — 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 NonFirefox Android Aucun support 4 — 62
Notes
Aucun support 4 — 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
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 1 — 62
Notes
Aucun support 1 — 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 NonFirefox Android Aucun support 4 — 62
Notes
Aucun support 4 — 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
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.