CSS Media Queries

CSS Media Queries — is a technique that allows you to apply CSS-rules based on devices properties such as screen size, orientation, etc.

Media Queries are well known as a Fingerprinting vector that can be used to reveal sensitive trackable information. It similiar to window.screen object, but with ability to work even without JavaScript.

This is a pure-CSS Media Queries Test Suite, here you can check in real time what kind of media query values does your web browser:

CSS Media Queries

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

Vendor-specific Media Queries

-moz-os-version
-moz-windows-theme
-moz-windows-glass
-moz-touch-enabled
-moz-images-in-menus
-moz-mac-graphite-theme
-moz-maemo-classic
-moz-scrollbar-end-backward
-moz-scrollbar-end-forward
-moz-scrollbar-start-backward
-moz-scrollbar-start-forward
-moz-scrollbar-thumb-proportional
 
-moz-device-pixel-ratio
min--moz-device-pixel-ratio
-webkit-min-device-pixel-ratio
-webkit-device-pixel-ratio
-webkit-transform-3d
-webkit-transform-2d
-webkit-transition
-webkit-animation
-moz-windows-classic
-moz-windows-compositor
-moz-windows-default-theme
-ms-high-contrast

Explanation

Few examples of how CSS Media Queries Fingerprinting works:

  1. @media(device-width: 1919px) {
  2. #device-width {
  3. background: url("http://example.com/log.php?user=sid&device-width=1919");
  4. }
  5. }
  6. @media(device-width: 1920px) {
  7. #device-width {
  8. background: url("http://example.com/log.php?user=sid&device-width=1920");
  9. }
  10. }
  11. @media(device-width: 1921px) {
  12. #device-width {
  13. background: url("http://example.com/log.php?user=sid&device-width=1921");
  14. }
  15. }
  16. @media(-moz-os-version: windows-win10) {
  17. #moz-os-version {
  18. background: url("http://example.com/log.php?user=sid&moz-os-version=windows-win10");
  19. }
  20. }

If the rule is triggered, the request will be sent to the server using url() functional notation.

Further Reading

  1. CSS media queries provide a large amount of identifiable information — Bugzilla@Mozilla
  2. Using media queries — Mozilla Developer Network
  3. CSS <url> — Mozilla Developer Network
  4. Testing media queries with JavaScript — Mozilla Developer Network
  5. CSS3 Media Queries Spec — W3C
  6. CSS Media Queries Level 4 — W3C
  7. CSS Media Queries Level 5 — W3C

Leave a Comment