CSS Conditional Rules (ou règles conditionnelles CSS) est un module CSS qui permet de définir un ensemble de règles qui ne s'appliqueront qu'en fonction des capacités du processeur ou du document auquel la feuille de styles est appliquée.

Référence

Règles @

Spécifications

Spécification État Commentaires
CSS Conditional Rules Module Level 3 Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

@document

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Support complet 61
Préfixée Notes Désactivée
Support complet 61
Préfixée Notes Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Disabled by default in web pages, except for an empty url-prefix() value, which is supported due to its use in Firefox browser detection. Still supported in user stylesheets.
Désactivée From version 61: this feature is behind the layout.css.moz-document.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 1.5 — 61
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non
regexp()
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Support complet 6IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile ? Firefox Android ? Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

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.
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.
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é nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

@import

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet 5.5Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

@media

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 OuiFirefox Support complet 1IE Support complet 6Opera Support complet 9.2Safari Support complet 1.3WebView Android Support complet 1Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 9Safari iOS Support complet 3.1Samsung Internet Android ?
speech media typeChrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet 9.2Safari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Support complet 9Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
Media feature expressionsChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 9Opera Support complet 9.2Safari Support complet 1.3WebView Android Support complet 1Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 9Safari iOS Support complet 3.1Samsung Internet Android ?
any-hover media featureChrome Support complet 41Edge Support complet 16Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1035774.
IE Aucun support NonOpera Support complet 28Safari Support complet 9WebView Android Support complet 41Chrome Android Support complet 41Edge Mobile Support complet 16Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1035774.
Opera Android Support complet 28Safari iOS Support complet 9.2Samsung Internet Android Support complet 5.0
any-pointer media featureChrome Support complet 41Edge Support complet 12Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1035774.
IE Aucun support NonOpera Support complet 28Safari Support complet 9WebView Android Support complet 41Chrome Android Support complet 41Edge Mobile Support complet 12Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1035774.
Opera Android Support complet 28Safari iOS Support complet 9.2Samsung Internet Android ?
aspect-ratio media featureChrome Support complet 4Edge ? Firefox Support complet 3.5IE Support complet 9Opera Support complet 53Safari Support complet OuiWebView Android Support complet OuiChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
color media featureChrome Support complet OuiEdge ? Firefox Support complet OuiIE ? Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
color-gamut media featureChrome Support complet 58Edge ? Firefox Aucun support NonIE Aucun support NonOpera Support complet 45Safari Support complet OuiWebView Android ? Chrome Android Support complet 58Edge Mobile ? Firefox Android Aucun support NonOpera Android Support complet 45Safari iOS ? Samsung Internet Android ?
color-index media feature
Non-standard
Chrome Support complet OuiEdge ? Firefox Aucun support NonIE Aucun support NonOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
device-aspect-ratio media feature
ObsolèteNon-standard
Chrome Support complet OuiEdge ? Firefox Support complet OuiIE ? Opera ? Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
device-height media feature
ObsolèteNon-standard
Chrome Support complet OuiEdge ? Firefox Support complet OuiIE ? Opera ? Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
device-width media featureChrome Support complet OuiEdge ? Firefox Support complet OuiIE ? Opera ? Safari ? WebView Android ? Chrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
display-mode media featureChrome Support complet 46Edge Aucun support NonFirefox Support complet 47
Notes
Support complet 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
IE ? Opera ? Safari ? WebView Android ? Chrome Android Support complet 46Edge Mobile Aucun support NonFirefox Android Support complet 47
Notes
Support complet 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
Opera Android ? Safari iOS ? Samsung Internet Android ?
grid media featureChrome Support complet OuiEdge ? Firefox Support complet OuiIE ? Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
height media featureChrome ? Edge ? Firefox ? IE Support complet 9Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
inverted-colors media feature
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Support complet OuiWebView Android ? Chrome Android Aucun support NonEdge Mobile ? Firefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Support complet OuiSamsung Internet Android ?
hover media featureChrome Support complet 38
Notes
Support complet 38
Notes
Notes Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Edge Support complet 12Firefox Support complet 64IE Aucun support NonOpera Support complet 28Safari Support complet 9WebView Android ? Chrome Android Support complet 50Edge Mobile Support complet 12Firefox Android Support complet 64Opera Android Support complet 28Safari iOS Support complet 9.2Samsung Internet Android ?
light-level media feature
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile ? Firefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?
monochrome media featureChrome Support complet OuiEdge ? Firefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
orientation media featureChrome Support complet OuiEdge ? Firefox Support complet OuiIE ? Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
overflow-block media feature
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1422235.
IE ? Opera ? Safari ? WebView Android ? Chrome Android Aucun support NonEdge Mobile ? Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1422235.
Opera Android ? Safari iOS ? Samsung Internet Android ?
overflow-inline media feature
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1422235.
IE ? Opera ? Safari ? WebView Android ? Chrome Android Aucun support NonEdge Mobile ? Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1422235.
Opera Android ? Safari iOS ? Samsung Internet Android ?
pointer media featureChrome Support complet 41Edge Support complet 12Firefox Support complet 64IE ? Opera Support complet 28Safari Support complet 9WebView Android ? Chrome Android Support complet 50Edge Mobile Support complet 12Firefox Android Support complet 64Opera Android Support complet 28Safari iOS Support complet 9.2Samsung Internet Android ?
prefers-reduced-motion media feature
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 63IE Aucun support NonOpera Aucun support NonSafari Support complet 10.1WebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Support complet 10.3Samsung Internet Android ?
resolution media featureChrome Support complet 29Edge ? Firefox Support complet 8
Support complet 8
Support partiel 3.5
Notes
Notes Supports <integer> values only.
IE ? Opera Support complet OuiSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
scan media featureChrome Aucun support NonEdge ? Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Aucun support NonOpera Android ? Safari iOS ? Samsung Internet Android ?
scripting media feature
ExpérimentaleNon-standard
Chrome Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 489957.
Edge ? Firefox Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1166581.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 489957.
Chrome Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 489957.
Edge Mobile ? Firefox Android Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 1166581.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?
update media feature
Expérimentale
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
width media featureChrome Support complet OuiEdge ? Firefox Support complet OuiIE Support complet 9Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-moz-device-pixel-ratio media feature
ObsolèteNon-standard
Chrome Aucun support NonEdge ? Firefox Support complet 4IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-animation media feature
Non-standard
Chrome Support complet OuiEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-device-pixel-ratio media feature
Non-standard
Chrome Support complet OuiEdge ? Firefox Support complet 49
Notes Désactivée
Support complet 49
Notes Désactivée
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Désactivée From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 45
Notes Désactivée
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Désactivée From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet OuiSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-max-device-pixel-ratio media feature
Non-standard
Chrome Support complet OuiEdge ? Firefox Support complet 49
Notes Désactivée
Support complet 49
Notes Désactivée
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Désactivée From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 45
Notes Désactivée
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Désactivée From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet OuiSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-min-device-pixel-ratio media feature
Non-standard
Chrome Support complet OuiEdge ? Firefox Support complet 63
Notes
Support complet 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Support complet 49
Notes Désactivée
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Désactivée From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 45
Notes Désactivée
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Désactivée From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet OuiSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transform-2d media feature
Non-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Support complet OuiSafari Support complet 1WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transform-3d media feature
Non-standard
Chrome Support complet OuiEdge ? Firefox Support complet 49
Support complet 49
Support complet 46
Désactivée
Désactivée From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera Support complet OuiSafari Support complet 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transition media feature
ObsolèteNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE ? Opera Support complet OuiSafari Support complet 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung 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.
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é.

@supports

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 28Edge Support complet 12Firefox Support complet 22
Support complet 22
Aucun support 17 — ?
Désactivée
Désactivée From version 17: this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 12.1Safari Support complet 9WebView Android Support complet OuiChrome Android Support complet 28Edge Mobile Support complet OuiFirefox Android Support complet 22
Support complet 22
Aucun support 17 — ?
Désactivée
Désactivée From version 17: this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 12.1Safari iOS Support complet 9Samsung Internet Android Support complet Oui
selector()
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 64
Désactivée
Support complet 64
Désactivée
Désactivée From version 64: this feature is behind the layout.css.supports-selector.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 Support complet 64
Désactivée
Support complet 64
Désactivée
Désactivée From version 64: this feature is behind the layout.css.supports-selector.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
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.
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é.

Étiquettes et contributeurs liés au document

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