@custom-media

The CSS @custom-media at-rule allows creating aliases for media queries . This is particularly valuable if you have long or complex media queries that you use multiple times across your codebase. The feature is similar in nature to a media query version of CSS custom properties (CSS variables) . Syntax The syntax for defining an alias is: @media () [ | true | false ]; For example: @custom-media --modern-touch (pointer: coarse) and (min-width: 1024px); …where the dashed ident is --modern-touch . The syntax for using an alias is the same as using any media query, but instead of providing media types or media features, you provide the of your defined @custom-media : @media { /* ... */ } Arguments and Descriptors : A user-defined identifier that must start with two dashes ( -- ), similar to functions or custom properties. Just like custom properties, the name is case-sensitive. For example, --mobile-breakpoint and --Mobile-Breakpoint would refer to different custom media definitions. : A list of media queries, separated by operators. true / false : Always-match / never-match toggles. Let’s look at how these work in different contexts, such as how they’re scoped, using them with booleans, defining complex logic, setting rules with the CSS range syntax, and even nesting aliases. Scope and Placement Unlike custom properties, which are scoped to the element they are defined on (and their children), @custom-media rules are global. They are evaluated in the global scope of the stylesheet and will always apply to the entire document. If multiple @custom-media rules are defined with the same name, the one in scope at the time of evaluation is the one that is used. When a @media rule uses a custom alias, i.e. the dashed ident, it looks at the current definition of that alias at that point in the stylesheet. If the alias is redefined later, it does not “update” the media queries that w