條件查詢

Learn how to append at-rule conditions for breakpoints, modes, media types, container queries, supports checks, and ranges.

Overview

CSS at-rules such as @media, @supports, @container, @layer, and @starting-style apply CSS only when a condition is true. Master CSS writes those conditions as suffixes on the class that needs them.

hidden@mdhidden@printhidden@defaulthidden@container(xs)hidden@sidebar(xs)hidden@md&<lghidden@!screenopacity:0@startbackdrop-filter:blur(5px)@supports(backdrop-filter(0px))

Read a conditional class from left to right:

declaration<selector?>@condition

<button class="bg:blue-60:hover@md">Save</button>

This applies bg:blue-60 only when the button matches :hover and the @md condition is true.

@media (min-width: 1024px) {    .target {        display: none;    }}@container (min-width: 1024px) and (max-width: 1289.98px) {    .target {        display: none;    }}@media print {    .target {        display: none;    }}@container (min-width: 768px) {    .target {        display: none;    }}@media not screen {    .target {        display: none;    }}

Use short tokens for common cases, and use raw at-rule syntax when a condition is specific to one component. Comparison operators, logical operators, and grouped conditions let you express ranges without writing separate CSS blocks.

The same property can have different values under different conditions.

<h2 class="font:lg font:2xl@sm font:3xl@md …">

You can also combine a selector and a query in one class.

<div class="fg:white:hover@sm …">

Common at variants

At variants are named conditions. Some are built in, while breakpoint tokens and mode tokens come from your project manifest.

sm, md, lg, and more

Use @sm, @md, @lg, and other breakpoint tokens to apply styles based on viewport width. A plain breakpoint token means "at or above this width."

<div class="hidden@sm">

@layer utilities {    @media (width>=52.125rem) {        .hidden\@sm {            display: none        }    }}

See responsive design, breakpoints, and containers for the full responsive query model.

light, dark, and custom modes

Mode names also become at variants. @dark and @light are available by default, and custom modes are added when you define them in the project CSS entry.

<div class="bg:gray-90@dark">

The generated CSS depends on mode-trigger. A mode can become a media query, a class wrapper, or a shadow host wrapper.

base, default, component, utility

Use @base, @default, @component, and @utility to place generated rules in those cascade layers.

By default, there are four layer shorthands: @base, @default, @component, and @utility.

<div class="hidden@base"><div class="hidden@default"><div class="hidden@component"><div class="hidden@utility">

@layer base {    .hidden\@base {        display: none    }}@layer defaults {    .hidden\@default {        display: none    }}@layer components {    .hidden\@component {        display: none    }}@layer utilities {    .hidden\@utility {        display: none    }}

You can create an at token to simplify longer conditions.

See cascade layers for layer order and override behavior.

print, screen, all, speech

Use @print, @screen, @all, or @speech for media types. For example, hide an element when printing:

<div class="hidden@print">

motion, reduce-motion

Use @motion for motion-safe animation and @reduce-motion for reduced-motion alternatives.

<svg class="animation:rotate|slowest|linear|infinite@motion">...</svg>

orientation

Use @landscape or @portrait to apply styles based on device orientation.

<div class="hidden@landscape">

@starting-style

@starting-style and its alias @start define starting values for transitions when an element first appears.

Try opening the popover target to see the zoom in effect.

<div id="target" popover="auto" class="transition:transform|slow|smooth transform:scale(0)@start">    ...    <button popovertarget="target" popovertargetaction="hide">Close</button></div><button popovertarget="target">Open Popover</button>

@layer theme {    :root {        --duration-slow: .3s;        --easing-smooth: cubic-bezier(.4, 0, .2, 1)    }}@layer utilities {    .transition\:transform\|slow\|smooth {        transition: transform var(--duration-slow) var(--easing-smooth)    }    @starting-style {        .transform\:scale\(0\)\@starting-style {            transform: scale(0)        }    }}

Arbitrary conditions and queries

Use arbitrary conditions when a built-in token would hide too much detail or when the condition is only used once.

@media(<feature>)

Use @media() for arbitrary CSS media queries.

<div class="hidden@media(pointer:coarse)">

Create an at token if the same media query appears repeatedly.

@supports(<feature>)

Use @supports() to apply a declaration only when the browser supports a feature.

<div class="hidden@supports(backdrop-filter(0px))">

Create an at token if the same support check appears repeatedly.

@layer(<name>)

Use @layer() to put a declaration in a named cascade layer.

<div class="hidden@layer(modifiers)">

@layer utilities {    @layer modifiers {        .hidden\@layer\(modifiers\) {            display: none        }    }}

Custom layer output is still organized inside the Master CSS layer model.

@container(<size>)

Use @container(<size>) when the nearest container, not the viewport, should control the style.

<div class="container">    <div class="hidden@container(sm)">...</div></div>

@layer utilities {    .container {        container-type: inline-size    }    @container (width>=24rem) {        .hidden\@container\(sm\) {            display: none        }    }}

Create an at token if a longer container query appears repeatedly.

See container queries for the full container workflow.

@<container>(<size>)

Use @<container>(<size>) to target a named container.

<aside class="container:sidebar">    ...        <div class="hidden@sidebar(sm)">...</div></aside>

@layer utilities {    .container\:sidebar {        container: sidebar    }    @container sidebar (width>=24rem) {        .hidden\@sidebar\(sm\) {            display: none        }    }}

When a suffix name is not a breakpoint token, mode token, or custom at token, Master CSS treats it as a named container query.

Comparison operators

Comparison operators turn breakpoint and container tokens into ranges.

Use them when a style should apply below, above, or between theme-defined sizes.

width, height

You can prefix a comparison with w for width or h for height. If no feature is specified, width is used.

Use @<feature?><operator><size> to specify the feature query.

<div class="hidden@sm"><div class="hidden@h<sm"><div class="hidden@h>=sm&h<lg">

@layer utilities {    @media (height<52.125rem) {        .hidden\@h\<sm {            display: none        }    }    @media (height>=52.125rem) and (height<80rem) {        .hidden\@h\>\=sm\&h\<lg {            display: none        }    }    @media (width>=52.125rem) {        .hidden\@sm {            display: none        }    }}

Put the feature name before the operator. Feature names after or between operators are not supported yet.

<div class="hidden@sm<=h"><div class="hidden@sm<=h<=lg">

@>=N — At or above

Use @N or @>=N when the target width is greater than or equal to a size token. These are interchangeable for width.

<div class="hidden@sm"> <div class="hidden@>=sm"> <div class="hidden@h>=sm"> 

@layer utilities {    @media (width>=52.125rem) {        .hidden\@\>\=sm {            display: none        }    }    @media (width>=52.125rem) {        .hidden\@sm {            display: none        }    }}

@>N — Greater than

Use @>N when the target must be strictly greater than the size token.

<div class="hidden@>sm">

@layer utilities {    @media (width>52.125rem) {        .hidden\@\>sm {            display: none        }    }}

@<=N — At or below

Use @<=N when the target width can be equal to or below the size token.

<div class="hidden@<=sm">

@layer utilities {    @media (width<=52.125rem) {        .hidden\@\<\=sm {            display: none        }    }}

@<N — Less than

Use @<N for targets smaller than a size token. The shorthand @!N behaves the same for this breakpoint form.

<div class="hidden@<sm"><div class="hidden@!sm">

@layer utilities {    @media not (width>=52.125rem) {        .hidden\@\!sm {            display: none        }    }    @media (width<52.125rem) {        .hidden\@\<sm {            display: none        }    }}

@A&<B — Within a range

Use & to combine comparisons into one range.

For example, to apply styles between sm (inclusive) and md (exclusive), use:

<div class="hidden@sm&<md">

@layer utilities {    @media (width>=52.125rem) and (width<64rem) {        .hidden\@sm\&\<md {            display: none        }    }}

This is useful for layout adjustments that only make sense inside one range.

Logical operators

Logical operators combine conditions inside one suffix.

! — Not

Negates the condition immediately following it.

<div class="hidden@!md">

@layer utilities {    @media not (width>=64rem) {        .hidden\@\!md {            display: none        }    }}

For a breakpoint token, @!md means "not at or above md", which is effectively below md.

, — Or

Use , when any listed condition can match.

<div class="block@<sm,>=lg">

@layer utilities {    @media (width<52.125rem) or (width>=80rem) {        .block\@\<sm\,\>\=lg {            display: block        }    }}

This means: show the element below sm or at lg and above.

& — And

Use & when every condition must match.

<div class="hidden@sm&<lg">

@layer utilities {    @media (width>=52.125rem) and (width<80rem) {        .hidden\@sm\&\<lg {            display: none        }    }}

This applies only when the target is between sm (inclusive) and lg (exclusive).

only — Exact match

Use only for native media-query only semantics.

<div class="hidden@only(print)">

@layer utilities {    @media only print {        .hidden\@only\(print\) {            display: none        }    }}

This generates @media only print.

Grouping conditions

Use parentheses to group conditions before applying a logical operator to the group.

<div class="hidden@!(screen&(any-hover:hover))">

@layer utilities {    @media not (screen and (any-hover:hover)) {        .hidden\@\!\(screen\&\(any-hover\:hover\)\) {            display: none        }    }}

This applies when the target is not a screen with any hover capability.

Replace whitespace with parentheses

Class names cannot contain whitespace, so at-rule arguments that would normally contain spaces are written with parentheses.

For example, @layer(modifiers) becomes @layer modifiers.

<div class="hidden@layer(modifiers)">

@layer utilities {    @layer modifiers {        .hidden\@layer\(modifiers\) {            display: none        }    }}