CSS Media Queries

CSS media queries fingerprinting tests browser support for and responses to media queries and system preference queries. Modern CSS provides extensive media features for responsive design and accessibility, but support and behavior vary across browsers and platforms. The technique tests dozens of media queries including: prefers-color-scheme (light/dark mode), prefers-reduced-motion (accessibility), prefers-contrast, forced-colors (high contrast mode), prefers-reduced-transparency, prefers-reduced-data (data saver mode), color-gamut (display color capabilities), dynamic-range (HDR support), screen color depth, aspect ratio ranges, and device orientation. Each query reveals system settings and capabilities: a user with prefers-color-scheme:dark likely has OS-level dark mode enabled, prefers-reduced-motion:reduce suggests accessibility settings or motion sensitivity. Display capabilities like color-gamut:p3 indicate wide-gamut displays (often Apple devices), dynamic-range:high indicates HDR screens. Browser support for newer media queries correlates strongly with browser version: older browsers don't recognize prefers-contrast or forced-colors. The technique also tests deprecated or browser-specific media features: -webkit-min-device-pixel-ratio, -moz-device-pixel-ratio, -ms-high-contrast. Interaction media features (hover, pointer, any-hover, any-pointer) distinguish touch devices from mouse-driven systems: pointer:coarse indicates touchscreens while pointer:fine indicates mice. Testing all combinations creates a rich fingerprint capturing display technology, user preferences, accessibility settings, and browser capabilities. This data is particularly stable because it reflects both hardware capabilities and deliberate user preference choices, both of which change infrequently. The fingerprint also correlates strongly with user demographics and device types.

• •Dark mode detection
• •Motion preferences
• •Display capabilities
• •Accessibility