User agent

CSS can query a lot about the device — pointer type, colour scheme, reduced motion — but not which browser, engine, or OS is running. ua (global) fills that gap with five write-once constants, preferring structured UA Client Hints (navigator.userAgentData, Chromium) and falling back to a minimal userAgent-string sniff on Firefox and Safari. The chip matching each value lights up below.

OS — --const-ua-platform

macOS Windows Linux Android iOS ChromeOS

Browser — --const-ua-browser

Chrome Edge Firefox Safari Opera Samsung

Engine — --const-ua-engine

Blink Gecko WebKit

--const-ua-version --const-ua-mobile

Written once by the ua plugin (and, FOUC-safe, by the head entry). The lit chip is your current value, matched with @container style(--const-ua-*: …) — CSS branches on the client with no JS. Low-entropy only, so it adds no fingerprinting surface beyond your request headers.

The wiring

<script type="module">import 'prop-for-that/auto'</script>
<html data-props-for="ua">…</html>

/* branch a whole rule block on the engine — no JS, no media query */
@container style(--const-ua-engine: webkit) {
  .sticky-fix { position: -webkit-sticky; }
}

/* nudge a control only on touch-first platforms */
@container style(--const-ua-platform: ios) {
  .cta { padding-block: 0.9rem; }
}

/* or gate on the numeric version */
.badge { opacity: calc((var(--const-ua-version) - 100) / 20); }

The five constants:

property	value
`--const-ua-platform`	`macos` / `windows` / `linux` / `android` / `ios` / `chromeos` / `unknown`
`--const-ua-browser`	`chrome` / `edge` / `firefox` / `safari` / `opera` / `samsung` / `unknown`
`--const-ua-engine`	`blink` / `gecko` / `webkit` / `unknown`
`--const-ua-version`	the browser’s major version (number, `0` if unknown)
`--const-ua-mobile`	`1` on a phone-class device, else `0`

Before first paint

The same five constants are written synchronously by the head entry, so you can branch on the client before the first render — no flash while a plugin binds:

<head>
  <script type="module">import 'prop-for-that/head'</script>
</head>