Conditional targeting rules

@media

Use this special syntax to instruct the browser to use the enclosed rules only on certain devices or under certain conditions.

Syntax

The syntax for @media consists of two things: a type of device and a set of limiting features. The CSS selectors enclosed within the media rule set are put into effect only when the browser displays a document with a device and features that match those conditions.

The media rule set comprises all of the CSS selectors and their property declarations enclosed within the pair of curly braces immediately following the @media expression.

Here are examples demonstrating the idea:

#menu {
display: block;
}

@media print {
#menu {
display: none;
}
}
@media for hiding menu when printing
html {
font-size: 12pt;
}
@media screen and (max-width: 50rem) {
html {
font-size: 11pt;
}
}
@media screen and (max-width: 40rem) {
html {
font-size: 10pt;
}
}
@media for using progressively smaller fonts

Limiting expressions

Limiting features are used in limiting expressions which use syntax like this: (feature: value) where the feature keyword is followed by a colon and a value, and both are enclosed in parentheses.

This syntax may be interpreted as "does the user's device support the feature with this value". When the answer is yes, the media rule set is in force. When the answer is no, the media rule set is ignored.

Keywords and features used in limiting expressions

Device keywords

Use one of these keywords at the beginning of an @media rule. If omitted, all will be implied.

screen Target CRT, LCD, LED, plasma and similar types of screens
print Target printers and print-preview mode
speech Target devices that are speech synthesizers
all Target all device types
Limiting features

Use one or more of these keywords or functions in a limiting expression.

Width and height capabilities

keyword description example
width
min-width What is the minimum acceptable width? (min-width: 360px)
max-width What is the maximum acceptable width? (max-width: 540px)
width Range of widths (360px <= width <= 540px)
height
min-height What is the minimum acceptable height? (min-height: 360px)
max-height What is the maximum acceptable height? (max-height: 540px)
height Range of heights (360px <= height <= 540px)
orientation
portrait Is the viewport height greater than the viewport width? (orientation: portrait)
landscape Is the viewport width greater than the viewport height? (orientation: landscape)
aspect-ratio
min-aspect-ratio What is the minimum acceptable aspect ratio? (min-aspect-ratio: 7/6)
max-aspect-ratio What is the maximum acceptable aspect ratio? (max-aspect-ratio: 12/6)
aspect-ratio Range of aspect ratios (7/6 <= aspect-ratio <= 12/6)

Color capabilities

keyword description example
color
color Does the device support color? (color)
min-color What is the minimum number of bits-per-pixel? (min-color: 8)
max-color What is the maximum number of bits-per-pixel? (max-color: 24)
color-gamut
sRGB Does the device support the standard red-green-blue gamut? (color-gamut: sRGB)
p3 Does the device support the digital movie DCI/P3 gamut? (color-gamut: p3)
rec2020 Does the device support the ultra-high definition TV gamut? (color-gamut: rec2020)
color-index
color-index Does the device use a color index table? (color-index)
min-color-index What is the minimum size of the device's color index table? (min-color-index: 56)
max-color-index What is the maximum size of the device's color index table? (max-color-index: 240)
inverted-colors
none Are the colors displayed normally? (inverted-colors: none)
inverted Are the colors inverted? (inverted-colors: inverted)
monochrome
monochrome Is this a monochrome device? (monochrome)
min-monochrome Does this monochrome device have at least this many bits-per-pixel? (min-monochrome: 2)
max-monochrome Does this monochrome device have no more than this many bits-per-pixel? (max-monochrome: 4)

Pointing device

keyword description example
pointer
any-pointer Does the device have any way for the user to point to elements? (any-pointer)
none The device does not have a mouse or a trackpad or similar hardware. (pointer: none)
coarse The device only has a pointer with limited accuracy, such as a finger. (pointer: coarse)
fine The device has an accurate pointing device, such as a mouse or a trackpad or similar hardware. (pointer: fine)
hover
any-hover Is there any way to hover over an element? (any-hover)
none The device does not have a convenient way to hover over an element. (hover: none)
hover The device has a convenient way to hover over an element. (hover: hover)

User preferences

keyword description example
scripting
none Is scripting disabled? (scripting: none)
enabled Is scripting enabled? (scripting: enabled)
initial-only Is scripting limited to the initial page load? (scripting: initial-only)
prefers-color-scheme
no-preference The user has not set any color scheme preference (prefers-color-scheme: no-preference)
light The user prefers a light colored scheme (prefers-color-scheme: light)
dark The user prefers a dark colored scheme (prefers-color-scheme: dark)
prefers-contrast
no-preference The user has not set any contrast preference (prefers-contrast: no-preference)
high The user prefers a high-contrast scheme (prefers-contrast: high)
low The user prefers a low-contrast scheme (prefers-contrast: low)
prefers-reduced-motion
no-preference The user has not set any motion preference (prefers-reduced-motion: no-preference)
low The user prefers no animation or non-essential movement (prefers-reduced-motion: low)
prefers-reduced-transparency
no-preference The user has not set any transparency preference (prefers-reduced-transparency: no-preference)
reduce The user prefers minimum use of transparent and translucent effects (prefers-reduced-transparency: reduce)

Overflow

keyword description example
overflow-block
none Is vertical text that is too long not shown? (overflow-block: none)
scroll Is vertical text that is too long available via scrolling? (overflow-block: scroll)
paged Is vertical text broken into discrete pages? (overflow-block: paged)
optional-paged Is vertical text optionally broken into pages with 'break-inside' rules? (overflow-block: optional-paged)
overflow-inline
none Is horizontal text that is too long not shown? (overflow-inline: none)
scroll Is horizontal text that is too long available via scrolling? (overflow-inline: scroll)

Fixed hardware capabilities

keyword description example
resolution
min-resolution What is the minimum acceptable resolution of the device? (min-resolution: 72dpi)
max-resolution What is the maximum acceptable resolution of the device? (max-resolution: 144dpi)
resolution Does this device have this exact resolution? (resolution: 96dpi)
resolution Range of resolutions (72dpi <= resolution <= 144dpi)
update
none Is the output write once only, like a printer? (update: none)
slow Is the update process slow like an ebook reader? (update: slow)
fast Is the update process fast enough to accomodate things like animations? (update: fast)

Old hardware

keyword description example
scan
interlace Does this device draw odd and even line alternately, like a television? (scan: interlace)
progressive Does this device draw lines progressively from top to bottom, like a computer screen? (scan: progressive)
grid
grid Is this a text-only terminal or basic phone with one fixed font? (grid: 1)

Ambient settings

keyword description example
display-mode
fullscreen Is all of the available display area used and no user agent chrome shown? (display-mode: fullscreen)
standalone Is this a stand-alone app without forward/backward navigation buttons? (display-mode: standalone)
minimal-ui Is this a mimimal app with forward/backward navigation buttons? (display-mode: minimal-ui)
browser Is this a standard browser app? (display-mode: browser)
light-level
dim Is the device in a dim environment? (light-level: dim)
normal Is the device in an ideally lighted environment? (light-level: normal)
washed Is the device in a very bright environment? (light-level: washed)

Combining expressions

More than one limiting expression may be specified for each @media rule, in which case, the media rule set will be in force only when all of them are true.

Rules can be combined using the word "and", for example:

@media (orientation: landscape) and (max-width: 50rem) {
...
}
Using 'and' notation to require both conditions to be true

Rules can also be combined using the word "or", for example:

@media (orientation: landscape) or (max-width: 50rem) {
...
}
Using 'or' notation to accept either condition

Alternate expressions

The same media rule set may be used under different sets of conditions. To specify this, place a comma between each limiting expression which is to be evaluated on its own merits.

For example:

@media (orientation: landscape) and (max-width: 50rem), (orientation: portrait) and (max-width: 30rem) {
...
}
Using comma notation to evaluate alternate expressions

Negative expressions

A media expression may be negated, causing the media rule set to be honored under the opposite meaning. To accomplish this, use the word not before the expression and enclose the whole in parentheses.

@media screen and (orientation: landscape) and (not (max-width: 50rem)) {
...
}
Negating part of an expression
@media not (screen and (orientation: landscape) and (max-width: 50rem)) {
...
}
Negating a combined expression

Range operators

For features that can have a range of values, like width and height, the less-than-or-equal oparator may be used. For example:

@media (35rem <= width <= 45rem) {
...
}
An expression matching a range of values

style > target > @mediaConditional targeting rules

🔎