Règles conditionnelles CSS

Les règles conditionnelles CSS définissent les requêtes média et de support CSS, vous permettant de définir des styles qui ne sont appliqués que si des conditions spécifiques sont remplies. Les règles conditionnelles définies dans ce module sont basées sur les capacités de l'appareil, de l'agent utilisateur et de la fenêtre d'affichage. Avec les règles conditionnelles, vous pouvez cibler les styles CSS en fonction des valeurs de requête ou des fonctionnalités du navigateur et de l'appareil, indépendamment du document rendu.

Les premières règles conditionnelles CSS étaient les types de média définissant le support de destination prévu pour les styles liés, par exemple screen ou print. Ceux-ci étaient définis comme valeur des attributs media des éléments HTML <link> et <style> ou comme une liste de types de média séparés par des virgules dans une instruction ou une règle @import. La capacité d'appliquer conditionnellement des règles CSS a été considérablement étendue depuis les implémentations CSS 2.1 et HTML 4.01 qui limitaient les requêtes conditionnelles à quelques types de média.

Les règles conditionnelles CSS incluent désormais les requêtes de fonctionnalités ; la règle @supports permet de cibler les styles CSS en fonction des capacités CSS de l'agent utilisateur. D'autres conditions incluent les sélecteurs, les formats de police et les technologies de police pris en charge.

Le module des règles conditionnelles CSS étend également @media pour permettre l'imbrication des règles @, le module connexe requêtes média CSS supprimant les types de média inutilisés et ajoutant de nombreuses fonctionnalités et conditions de média pouvant être ciblées.

Le module des requêtes de conteneur CSS définit des règles conditionnelles similaires, mais basées sur le parent d'un élément plutôt que sur la fenêtre d'affichage.

Il est prévu d'étendre davantage les requêtes possibles en ajoutant la règle conditionnelle généralisée @when et la règle conditionnelle en chaîne @else. Ces deux règles @ ne sont pas encore prises en charge.

<container-name>
<style-feature>
Unités de <length> relatives au conteneur
<media-query>
<supports-condition>
<supports-feature> (voir supports())

Interfaces

Termes et définitions du glossaire

Média
Requête de support (Voir requête de fonctionnalité)

Guides

Utiliser les requêtes de fonctionnalités CSS: Appliquer sélectivement des règles CSS après avoir vérifié la prise en charge par le navigateur des propriétés et valeurs définies par les requêtes de fonctionnalités.
Utiliser les requêtes média CSS: Introduit les requêtes média, leur syntaxe, et les opérateurs et fonctionnalités média utilisés pour construire des expressions de requêtes média.
Prise en charge des navigateurs plus anciens : requêtes de fonctionnalités: Comment utiliser les requêtes de fonctionnalités pour cibler le CSS en fonction du niveau de prise en charge des fonctionnalités web par le navigateur.
Détection des fonctionnalités du navigateur : CSS @supports: Un aperçu de la détection des fonctionnalités en JavaScript et CSS, y compris CSS @supports.
Utiliser les requêtes de défilement de conteneur: Utiliser les requêtes de défilement de conteneur, avec un exemple de chaque type.