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
dynamic-range
monochrome
forced-colors
inverted-colors
light-level
grid
scan
overflow-block
overflow-inline
prefers-color-scheme
prefers-reduced-data
prefers-reduced-motion
prefers-reduced-transparency
prefers-contrast
device-posture
 
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
environment-blending
screen-spanning

Vendor-specific 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)