條件查詢

Apply styles based on theme modes, print, breakpoints, and other queries.

Overview

CSS at-rules like @media, @supports, @container, @layer, and etc., give you powerful abilities to apply styles based on various conditions. Master CSS extends this capability with a set of intuitive tokens and operators, allowing you to write complex conditional logic directly in your class names.

hidden@mdhidden@printhidden@presethidden@container(xs)hidden@sidebar(xs)hidden@md,<lghidden@!screenopacity:0@startbd:blur(5)@supports(backdrop-filter(0px))

@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;    }}

From comparison operators and logical operators to advanced condition grouping, you’ll learn how to harness the full potential of CSS at-rules—without the boilerplate.

You can have the same property have different conditions on the same element.

<h2 class="font:18 font:24@sm font:32@md …">

Or stack conditions in a single class.

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

Common at-rule tokens

These shorthands provide a simplified syntax for commonly used CSS at-rules. They allow you to apply styles based on media types, feature support, container queries, and layer management in a more concise and readable way.

sm, md, lg, and more

Use @sm, @md, @lg, and other screen size tokens to apply styles based on the viewport width. For example, to hide an element at >=sm:

<div class="hidden@sm">

@layer base, theme, preset, components, general;@layer general {    @media (width>=52.125rem) {        .hidden\@sm {            display: none        }    }}

To learn more about the responsive design.

base, preset

Use @base and @preset to apply styles based on the layer context.

By default, there are two shorthands: @base and @preset.

<div class="hidden@base"><div class="hidden@preset">

@layer base, theme, preset, components, general;@layer base {    .hidden\@base {        display: none    }}@layer preset {    .hidden\@preset {        display: none    }}

You can create a token to simpify the class name.

To learn more about the cascade layers.

print, screen, all, speech

Use @print, @screen, @all, or @speech to apply styles based on the media type. For example, to hide an element when printing:

<div class="hidden@print">

prefers-motion-reduced

Use @motion or @reduce-motion to style an element based on user-specific motion preferences.

<svg class="@rotate|1s|linear|infinite@motion">...</svg>

orientation

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

<div class="hidden@landscape">

@starting-style

The @starting-style (alias @start) defines the starting values for properties to enable smooth transitions when an element first appears.

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

<div id="target" popover="auto" class="~transform|.3s scale(0)@start">    ...    <button popovertarget="target" popovertargetaction="hide">Close</button></div><button popovertarget="target">Open Popover</button>

@layer base, theme, preset, components, general;@layer general {    .\~transform\|\.3s {        transition: transform 0.3s    }    @starting-style {        .scale\(0\)\@starting-style {            transform: scale(0)        }    }}

Arbitrary conditions and queries

Master CSS allows you to write at-rule condition queries directly within class names, closely resembling native syntax when needed.

@media(<feature>)

Use @media() to apply styles based on arbitrary CSS media queries.

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

You can create a token to simpify the class name.

@supports(<feature>)

Use @supports() to apply styles based on browser support for specific CSS features.

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

You can create a token to simpify the class name.

@layer(<name>)

Use @layer() to apply styles based on the layer context.

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

@layer base, theme, preset, components, general;@layer general {    @layer modifiers {        .hidden\@layer\(modifiers\) {            display: none        }    }}

For any custom layer, it is wrapped in a general layer.

@container(<size>)

Use @container to apply styles based on the container size.

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

@layer base, theme, preset, components, general;@layer general {    .container {        container-type: inline-size    }    @container (width>=52.125rem) {        .hidden\@container\(sm\) {            display: none        }    }}

You can create a token to simpify the class name.

To learn more about the container queries.

@<container>(<size>)

Use @<container>(<size>) to apply styles based on the specific target container size.

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

@layer base, theme, preset, components, general;@layer general {    .container\:sidebar {        container: sidebar    }    @container sidebar (width>=52.125rem) {        .hidden\@container\(sidebar\)sm {            display: none        }    }}

Any shorthand not listed in config.at will be implicitly treated as a @container, falling back to the default behavior of being eligible for container queries.

Comparison Operators

These comparison operators allow you to apply styles based on relative values:

These operators unlock complex conditional logic in your class names, replacing verbose media query chains with intuitive, composable syntax.

width, height

You can specify feature names w (width) and h (height). If no feature is specified, width is used as the default.

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

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

@layer base, theme, preset, components, general;@layer general {    @media (height<52.125rem) {        .hidden\@h\<sm {            display: none        }    }    @media (height>=52.125rem) and (height<=52.125rem) {        .hidden\@h\>\=sm\&h\<\=sm {            display: none        }    }    @media (width>=52.125rem) {        .hidden\@sm {            display: none        }    }}

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

To apply styles when the target width is greater than or equal to a specific breakpoint N, you can use either @N or @>=N. These are interchangeable.

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

@layer base, theme, preset, components, general;@layer general {    @media (width>=52.125rem) {        .hidden\@\>\=sm {            display: none        }    }    @media (width>=52.125rem) {        .hidden\@sm {            display: none        }    }}

@>N — Greater than

Use the > operator when you want to apply styles only after the specified breakpoint is exceeded.

<div class="hidden@>sm">

@layer base, theme, preset, components, general;@layer general {    @media (width>52.125rem) {        .hidden\@\>sm {            display: none        }    }}

@<=N — At or below

Use the <= operator to apply styles when the target width is less than or equal to a specific breakpoint.

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

@layer base, theme, preset, components, general;@layer general {    @media (width<=52.125rem) {        .hidden\@\<\=sm {            display: none        }    }}

@<N — Less than

To target targets smaller than a given breakpoint, use the @<N operator. The alternative @!N behaves the same.

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

@layer base, theme, preset, components, general;@layer general {    @media not (width>=52.125rem) {        .hidden\@\!sm {            display: none        }    }    @media (width<52.125rem) {        .hidden\@\<sm {            display: none        }    }}

@A&<B — Within a range

For more precise control, you can combine comparison operators using logical operators like &.

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

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

@layer base, theme, preset, components, general;@layer general {    @media (width>=52.125rem) and (width<64rem) {        .hidden\@sm\&\<md {            display: none        }    }}

This is particularly useful when addressing layout issues or visual glitches that appear within a specific range of target widths.

Logical Operators

These logical operators let you build conditional logic using AND, OR, and NOT semantics:

! — Not

Negates the condition immediately following it.

<div class="hidden@!md">

@layer base, theme, preset, components, general;@layer general {    @media not (width>=64rem) {        .hidden\@\!md {            display: none        }    }}

This applies when the target is not exactly at the md breakpoint.

, — Or

Applies when any of the listed conditions match. Useful when multiple breakpoints or feature states should share the same style.

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

@layer base, theme, preset, components, general;@layer general {    @media (width<52.125rem) or (width>=80rem) {        .block\@\<sm\,\>\=lg {            display: block        }    }}

This means: show the element either on small screens or large screens and up.

& — And

Combines multiple conditions. All conditions must match for the style to apply.

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

@layer base, theme, preset, components, general;@layer general {    @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

Restricts the style to only apply at the specified condition, without fallback or extension.

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

@layer base, theme, preset, components, general;@layer general {    @media only print {        .hidden\@only\(print\) {            display: none        }    }}

This is equivalent to saying: “Apply this style only when the screen matches the print mode, and nowhere else.”

Grouping Conditions

You can group conditions using parentheses to create more complex expressions.

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

@layer base, theme, preset, components, general;@layer general {    @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

To represent spaces within a class name, use parentheses. This is because, in the class attribute, spaces are used to separate class names.

For example, @layer(modifiers) transforms to @layer modifiers.

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

@layer base, theme, preset, components, general;@layer general {    @layer modifiers {        .hidden\@layer\(modifiers\) {            display: none        }    }}