`@custom-media` - Directive CSS

@custom-media

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

Description rapide

Définit 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 une requête media query qui pourra ensuite être incluse dans une directive @media. Ceci pour éviter de répéter la définition d'une media query 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) {
		...
	}

Si une media query personnalisée est incluse dans une expression comportant d'autres conditions, la media query personnalisée est évaluée prioritairement.


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

Consultez également la page sur la directive @media.