CSS Media Queries

CSS Media Queries is a module that allows you to test and query the values or features of the user agent or display device.

«Media Queries enable CSS to query various aspects of the page's environment, including things that can be difficult or impossible to find via scripting. This is potentially a privacy hazard, allowing enhanced fingerprinting of a user, but the risk is generally low. At a minimum, the same information should be inferrable via scripting by examining the User-Agent string. However, UA string spoofing does not affect Media Queries, making this a somewhat more robust detection technique.»

This is a demo of Media Queries in pure CSS without using JavaScript, by enumerating ranges and substituting all possible values from a huge css file. Below you can see the real-time values that correspond to the current state of your web browser.

CSS Media Queries

@media-type
display-mode
orientation
color
color-index
color-gamut
monochrome
forced-colors
inverted-colors
environment-blending
light-level
grid
scan
overflow-inline
overflow-block
prefers-color-scheme
prefers-reduced-motion
prefers-reduced-transparency
prefers-contrast
 
min-width (px)
min-height (px)
min-device-width (px)
min-device-height (px)
min-device-width (cm)
min-device-height (cm)
min-device-width (in)
min-device-height (in)
min-resolution (dpi)
min-resolution (dppx)
min-resolution (dpcm)
max-aspect-ratio
device-aspect-ratio
pointer
any-pointer
hover
any-hover
scripting
update

Vendor-specific CSS Media Queries

-moz-device-orientation
-moz-os-version
-moz-windows-theme
-moz-windows-default-theme
-moz-windows-classic
-moz-windows-glass
-moz-windows-compositor
-moz-mac-lion-theme
-moz-mac-graphite-theme
-moz-maemo-classic
-moz-images-in-menus
-moz-images-in-buttons
-moz-menubar-drag
 
-moz-touch-enabled
-moz-scrollbar-end-backward
-moz-scrollbar-end-forward
-moz-scrollbar-start-backward
-moz-scrollbar-start-forward
-moz-scrollbar-thumb-proportional
-moz-is-resource-document
min--moz-device-pixel-ratio
-webkit-min-device-pixel-ratio
-webkit-transform-3d
-webkit-transform-2d
-webkit-transition
-webkit-animation

Further Reading

Leave a Comment (2)