CSS Fingerprinting: How Stylesheets and Media Queries Track You

Introduction

Browser fingerprinting is not limited to JavaScript APIs. CSS media queries and feature detection provide a JavaScript-free fingerprinting mechanism. By applying conditional styles that load different resources based on browser capabilities, a website can identify your device configuration without executing a single line of JavaScript.

How CSS Fingerprinting Works

CSS media queries evaluate device and browser properties. By linking each query result to a unique resource URL, the server can determine which properties matched:

/* Color scheme detection */
@media (prefers-color-scheme: dark) {
  .probe { background: url('/probe?signal=dark-mode'); }
}

/* Pointer type (touchscreen vs mouse) */
@media (pointer: coarse) {
  .probe { background: url('/probe?signal=touch-device'); }
}

/* Display color depth */
@media (color-gamut: p3) {
  .probe { background: url('/probe?signal=wide-gamut'); }
}

/* Resolution detection */
@media (min-resolution: 2dppx) {
  .probe { background: url('/probe?signal=retina'); }
}

When the browser renders the page, it evaluates each media query and loads the matching resource URLs. The server receives requests that reveal the browser's configuration.

CSS Fingerprinting Signals

Media Feature	What It Reveals	Entropy
prefers-color-scheme	Light/dark mode preference	~1 bit
pointer	Mouse (fine) vs touch (coarse) vs none	~1.5 bits
hover	Can hover (mouse) vs cannot (touch)	~1 bit
color-gamut	Display color space (srgb, p3, rec2020)	~1.5 bits
resolution	Pixel density (1x, 2x, 3x)	~2 bits
forced-colors	High contrast mode	~1 bit
prefers-reduced-motion	Animation preference	~1 bit
prefers-contrast	Contrast preference	~1 bit
inverted-colors	Color inversion (accessibility)	~1 bit

Combined, these provide approximately 10-12 bits of entropy, enough to narrow identification significantly.

Why CSS Fingerprinting Is Challenging

No JavaScript Required

Content Security Policies that block inline scripts do not affect CSS fingerprinting. NoScript extensions that disable JavaScript are also ineffective.

Difficult to Block

CSS media queries are fundamental to responsive web design. Blocking them would break virtually every modern website.

Passive Collection

Unlike JavaScript fingerprinting, CSS fingerprinting does not require any active code execution. The browser automatically evaluates media queries during page rendering.

Cross-Signal Consistency

CSS signals must be consistent with JavaScript APIs:

• prefers-color-scheme: dark in CSS should match window.matchMedia('(prefers-color-scheme: dark)') in JavaScript
• pointer: coarse should align with navigator.maxTouchPoints > 0
• resolution: 2dppx should match window.devicePixelRatio === 2

BotCloud profiles ensure these signals are coordinated across both CSS and JavaScript, preventing detectable inconsistencies.

How BotCloud Handles CSS Fingerprinting

BotCloud profiles configure all media query responses to match the claimed device:

• Color scheme aligns with the profile's display settings
• Pointer and hover match the device type (desktop, mobile, tablet)
• Resolution matches the profile's device pixel ratio
• Color gamut corresponds to the claimed display capabilities

These values are set at the engine level, so both CSS media queries and the corresponding JavaScript APIs return consistent results.

Best Practices

1. Ensure CSS media query results match JavaScript equivalents - inconsistencies are detectable
2. Consider prefers-color-scheme - most detection systems now check this
3. Match pointer type to device profile - a mobile profile should report coarse pointer
4. Test with CSS-only fingerprinting tools to verify consistency