Test CSS Media Queries

Note: that this page doesn't (yet) take into consideration if a query is not supported.

The descriptions used on this page are from the lovely people @MDN

TOC

  1. TOC
  2. Media Types
  3. Media Features
    1. Fixed values
      1. any-hover
      2. any-pointer
      3. color-gamut
      4. forced-colors
      5. hover
      6. inverted-colors
      7. orientation
      8. overflow-block
      9. overflow-inline
      10. pointer
      11. prefers-color-scheme
      12. prefers-reduced-motion
      13. grid
    2. Range values
      1. aspect-ratio
      2. color
      3. color-index
      4. height
      5. monochrome
      6. resolution
      7. width

Media Types

Value Result
all
print
screen

Notes

Media type "speech" is not included, because it's not visual.

If a user prints this page it (should) change the print media type to yes (and the screen media type to no).

Back to TOC

Media Features

Fixed Values

any-hover

The any-hover CSS media feature can be used to test whether any available input mechanism can hover over elements.

Value Result
none
hover

Notes

Good support.

Back to TOC

any-pointer

The any-pointer CSS media feature tests whether the user has any pointing device (such as a mouse), and if so, how accurate it is.

Value Result
none
coarse
fine

Notes

Good support.

Back to TOC

color-gamut

The color-gamut CSS media feature can be used to test the approximate range of colors that are supported by the user agent and the output device.

Value Result
srgb
p3
rec2020

Notes

No support with Firefox.

Back to TOC

forced-colors

The forced-colors CSS media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page.

Value Result
none
active

Notes

Little support.

Back to TOC

hover

The hover CSS media feature can be used to test whether the user's primary input mechanism can hover over elements.

Value Result
none
hover

Notes

Good support.

Back to TOC

inverted-colors

The inverted-colors CSS media feature can be used to test whether the user agent or underlying OS is inverting colors.

Value Result
none
inverted

Notes

Little support.

Back to TOC

orientation

The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).

Value Result
portrait
landscape

Notes

Great support.

Back to TOC

overflow-block

The overflow-block CSS media feature can be used to test how the output device handles content that overflows the initial containing block along the block axis.

Value Result
none
scroll
optional-paged
paged

Notes

Little support.

Back to TOC

overflow-block

The overflow-inline CSS media feature can be used to test how the output device handles content that overflows the initial containing block along the inline axis.

Value Result
none
scroll

Notes

Little support.

Back to TOC

pointer

The pointer CSS media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the primary pointing device is.

Value Result
none
coarse
fine

Notes

Good support.

Back to TOC

prefers-color-scheme

The prefers-color-scheme CSS media feature is used to detect if the user has requested a light or dark color theme. The user might indicate this preference through an operating system setting (e.g. light or dark mode) or a user agent setting.

Value Result
light
dark

Notes

Good support.

Back to TOC

prefers-reduced-motion

The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.

Value Result
no-preference
reduce

Notes

Good support

Back to TOC

grid

The grid CSS media feature can be used to test whether the output device uses a grid-based screen. Most modern computers and smartphones have bitmap-based screens. Examples of grid-based devices include text-only terminals and basic phones with only one fixed font.

  • (grid: 0)
  • (grid: 1)

Notes

Great support.

Back to TOC

Range values

aspect-ratio

The aspect-ratio CSS media feature can be used to test the aspect ratio of the viewport.

  • min-aspect-ratio
  • aspect-ratio
  • max-aspect-ratio

Notes

Good support.

Back to TOC

color

The color CSS media feature can be used to test the number of bits per color component (red, green, blue) of the output device.

  • min-color
  • color
  • max-color

Notes

Good support.

Back to TOC

color-index

The color-index CSS media feature can be used to test the number of entries in the output device's color lookup table.

  • min-color-index
  • color-index
  • max-color-index

Notes

No support on Firefox (and IE).

Back to TOC

height

desc

  • min-height
  • height
  • max-height

Notes

Great support.

Use "em" instead of "px" to accomodate for users who change their font-size.

Back to TOC

monochrome

desc

  • min-monochrome
  • monochrome
  • max-monochrome

Notes

Good support.

Back to TOC

resolution

The resolution CSS media feature can be used to test the pixel density of the output device.

  • min-resolution
  • resolution
  • max-resolution

Notes

Good support except Safari.

Back to TOC

width

The width CSS media feature can be used to test the width of the viewport (or the page box, for paged media).

  • min-width
  • width
  • max-width

Notes

Great support.

Back to TOC