What it measures
Two orthogonal CSS signals are combined into one hash. First, the default offsetWidth and offsetHeight of 25 HTML elements rendered in their UA-stylesheet state — form controls, native widgets, and quirky elements like marquee that browsers size very differently. Second, boolean support flags for 45 CSS property/value declarations queried via CSS.supports(), covering modern layout, color, and animation features.
Together these expose the browser's UA stylesheet defaults and CSS feature implementation set. Both dimensions and feature flags are determined entirely by the browser engine, not by the device hardware.
How it is collected
A hidden div container — positioned off-screen at top: -9999px — is appended to document.body. Each of the 25 element specs is created, mounted, measured via offsetWidth and offsetHeight, then removed. Reading offsetWidth forces a synchronous layout per element; errors on individual elements fall back to the string 0,0. The 45 CSS feature strings are then tested with CSS.supports(); if the API is absent, all flags default to false. All 70 values are joined with the pipe delimiter and hashed via xxHash64. The container is removed in a finally block regardless of errors.
Confidence rules
| Confidence | Trigger |
|---|---|
| normal | document.body exists and collection ran to completion |
| absent | document is undefined, document.body is falsy, or top-level catch fires |
Why engine-bound
UA stylesheets differ between browsers: Chrome, Firefox, and Safari apply different default width, height, padding, and margin to form elements, hr, marquee, fieldset, and other native widgets. CSS feature support — for example container-type, oklch color, anchor-name, and animation-timeline — also varies by engine and engine version. On the same OS and hardware, both the dimension readings and the feature flags are determined entirely by the browser engine, making the combined hash a reliable engine discriminator.
Things worth knowing
- Worker and SSR environments: document is undefined in workers; returns absent immediately.
- The marquee element is included specifically because browsers differ in how they size it — some treat it as a block, others apply special UA styles.
- Sync layout: reading offsetWidth/offsetHeight forces a layout flush for each element; typical total timing is 5-20 ms for all 25 elements.
- No timeouts are applied; the function is synchronous after its async wrapper.
