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 OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
display-outsideChrome 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 OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
display-outside: display: run-in supportChrome Aucun support ? — 32Edge Aucun support NonFirefox Aucun support NonIE Support complet 8Opera Aucun support ? — 19Safari Aucun support ? — 7WebView Android Support complet OuiChrome Android Aucun support ? — 32Firefox Android Aucun support NonOpera Android Aucun support ? — 19Safari iOS Aucun support ? — 7Samsung Internet Android Support complet Oui
Multi-keyword values
Expérimentale
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 NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
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 OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
list-item: Supported on <legend>Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 64IE Aucun support NonOpera Aucun support NonSafari Support complet OuiWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 64Opera Android Aucun support NonSafari iOS Support complet OuiSamsung Internet Android Aucun support Non
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 OuiFirefox 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 OuiFirefox 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 OuiFirefox 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 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 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-
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.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 — 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 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-
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 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 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 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 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 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 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 Aucun support NonEdge 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 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
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.3Chrome Android Aucun support ? — 32
Notes
Aucun support ? — 32
Notes
Notes Before Chrome 4, run-in was not supported before inline elements.
Firefox 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 Aucun support NonFirefox Support complet 53IE Aucun support NonOpera Support complet 45Safari Aucun support NonWebView Android Support complet 58Chrome Android Support complet 58Firefox Android Support complet 53Opera Android Support complet 43Safari iOS Aucun support NonSamsung 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 65Firefox Android Support complet 57Opera Android Support complet 47Safari 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 Support complet 58Edge Aucun support NonFirefox Support complet 59IE Aucun support NonOpera Support complet 45Safari Aucun support NonWebView Android Support complet 58Chrome Android Support complet 58Firefox Android Support complet 59Opera Android Support complet 43Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
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 Oui
Notes
Support complet Oui
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
-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-grid, -moz-inline-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-stack 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 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-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-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

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, mdnwebdocs-bot, xdelatour
Dernière mise à jour par : SphinxKnight,