`@custom-media` - Directive CSS

@custom-media

Résumé des caractéristiques de la directive `@custom-media`

Description rapide

Définit le conditions d'une requête-média personnalisée.

Statut

Problèmes de compatibilité ⚠

Module W3C

Media Queries

Références (W3C)

Media Queries Level 5

Statut du document: WD (document de travail)

Description de la directive `@custom-media`.

@custom-media définit les conditions d'une requête media, qui pourront ensuite être incluses dans une directive @media. Ceci pour éviter de répéter la définition d'une requête media plusieurs fois dans la feuille de styles. On sait que répéter une définition est source d'erreurs et complique la maintenance des feuilles de styles.

L'exemple ci-dessous définit le nom --dinosaure et le fait correspondre à une série de conditions décrivant un matériel peu performant ou ancien : écran monochrome ou de petites dimensions. Ce nom peut ensuite être utilisé dans une ou plusieurs directives @media.


	@custom-media --dinosaure (monochrome), (width < 780px), (height < 600px);
	
	@media (--dinosaure) {
		...
	}

La virgule est équivalente à or mais il est possible d'utiliser ce mot clé à la place. De même les mots clés and et not peuvent être utilisés

Si une requête média personnalisée est incluse dans une expression comportant d'autres conditions, la requête média personnalisée est évaluée prioritairement.


	@custom-media --petit-ecran (width < 780px) or (height < 600px);
	@media (monochrome) and (--petit-ecran) { ... }
	
	/* Est équivalent à */
	
	@media ((width < 780px) or (height < 600px)) and (monochrome) { ... }

Une requête média personnalisé peut faire appel à d'autres requêtes média personnalisées. Mais attention à ne pas créer de boucles. Si une boucle est détectée par les navigateurs toutes les requêtes médias faisant partie de la boucle risquent d'être invalides.

Si plusieurs requêtes média personnalisées définissent le même nom, seule la dernière version est prise en compte. Les définitions précédentes sont ignorées.

Les mots clés true ou false peuvent être utilisés dans une requête média personnalisée (dans ce cas il est inutile de prévoir d'autres conditions). Ces mots clés peuvent servir à écrire une requête média personnalisée qui est toujours vraie ou toujours fausse, pour les besoins du débogage par exemple.


	@custom-media --actif true;
	@custom-media --inactif false;

La syntaxe des conditions est la même que celle de @media. Consultez la directive @media.

Compatibilité des navigateurs avec la directive `@custom-media`..

La directive @custom-media est encore mal supportée (2026). Elle ne peut pas être utilisée. Seul Firefox la traite, et encore faut-il activer un flag (voir comment accéder aux flags sur Firefox).

Colonne 1

Prise en charge de la directive @custom-media qui permet de définir une règle @media-query personnalisée.

Remarques :

(1) Désactivé par défaut. Peut être activé en positionnant le flag layout.css.custom-media.enabled à true.

Directive
@custom-media

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

KaiOS Browser

Opéra

Safari

Safari sur IOS

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Évolution de la directive `@custom-media`.

Requêtes-média - Niveau 5

Le niveau 5 introduit la possibilité de tester de nombreuses caractéristiques, telles que le nombre de segments de l'écran, les caractéristiques des vidéos, la présence d'un langage de script, etc..
Les requêtes @media personnalisées sont également introduites.

Concernant @custom-media Première description de la directive @custom-media.

03 Mars 2020
Document de travail.

Voir aussi, au sujet des requêtes média.

@custom-media est décrit dans la spécification "media Queries" (media Queries). Voir aussi, dans ce même module :

Directives :