CSS

niso’s CSS is the web’s, resolved by Servo’s style engine (stylo) and laid out by blitz and Taffy. What a stylesheet can use is in the support table. This page lists what niso adds.

The –niso-* tokens

Custom properties for the platform’s colors, type scale, corner radii and safe areas, each taking the platform’s own value and falling back to a web value. A page gets them with the niso-platform-style meta:

From crates/niso-core/ua/niso.css, read when this site was built.

Token	Apple platforms	Android	Web fallback
--niso-color-text	--apple-system-label	--md-sys-color-on-surface	light-dark(#000000, #ffffff)
--niso-color-text-secondary	--apple-system-secondary-label	--md-sys-color-on-surface-variant	light-dark(#3c3c4399, #ebebf599)
--niso-color-accent	--apple-system-tint	--md-sys-color-primary	light-dark(#0066cc, #4da3ff)
--niso-color-on-accent		--md-sys-color-on-primary	#ffffff
--niso-color-link	--apple-system-link	--md-sys-color-primary	light-dark(#0066cc, #4da3ff)
--niso-color-background	--apple-system-background	--md-sys-color-surface	light-dark(#ffffff, #000000)
--niso-color-grouped-background	--apple-system-grouped-background	--md-sys-color-surface-container-low	light-dark(#f2f2f7, #000000)
--niso-color-surface	--apple-system-secondary-grouped-background	--md-sys-color-surface-container-high	light-dark(#ffffff, #1c1c1e)
--niso-color-fill	--apple-system-tertiary-fill	--md-sys-color-secondary-container	light-dark(#7676801f, #7676803d)
--niso-color-separator	--apple-system-separator	--md-sys-color-outline-variant	light-dark(#3c3c434a, #54545899)
--niso-font-large-title	--apple-system-large-title	--md-sys-typescale-display-small	400 34px/41px system-ui
--niso-font-title1	--apple-system-title1	--md-sys-typescale-headline-small	400 28px/34px system-ui
--niso-font-title2	--apple-system-title2	--md-sys-typescale-title-large	400 22px/28px system-ui
--niso-font-title3	--apple-system-title3	--md-sys-typescale-title-large	400 20px/25px system-ui
--niso-font-headline	--apple-system-headline	--md-sys-typescale-title-medium	600 17px/22px system-ui
--niso-font-body	--apple-system-body	--md-sys-typescale-body-large	400 17px/22px system-ui
--niso-font-subheadline	--apple-system-subheadline	--md-sys-typescale-body-medium	400 15px/20px system-ui
--niso-font-footnote	--apple-system-footnote	--md-sys-typescale-body-small	400 13px/18px system-ui
--niso-font-caption	--apple-system-caption1	--md-sys-typescale-body-small	400 12px/16px system-ui
--niso-font-label	--apple-system-subheadline	--md-sys-typescale-label-large	400 15px/20px system-ui
--niso-tracking-large-title		--md-sys-typescale-display-small-tracking	normal
--niso-tracking-title1		--md-sys-typescale-headline-small-tracking	normal
--niso-tracking-title2		--md-sys-typescale-title-large-tracking	normal
--niso-tracking-title3		--md-sys-typescale-title-large-tracking	normal
--niso-tracking-headline		--md-sys-typescale-title-medium-tracking	normal
--niso-tracking-body		--md-sys-typescale-body-large-tracking	normal
--niso-tracking-subheadline		--md-sys-typescale-body-medium-tracking	normal
--niso-tracking-footnote		--md-sys-typescale-body-small-tracking	normal
--niso-tracking-caption		--md-sys-typescale-body-small-tracking	normal
--niso-tracking-label		--md-sys-typescale-label-large-tracking	normal
--niso-corner-small		--md-sys-shape-corner-small	8px
--niso-corner-medium		--md-sys-shape-corner-medium	12px
--niso-corner-large		--md-sys-shape-corner-large	16px
--niso-corner-extra-large		--md-sys-shape-corner-extra-large	28px
--niso-safe-top			max(env(safe-area-inset-top), var(--niso-safe-area-inset-top, 0px))
--niso-safe-right			max(env(safe-area-inset-right), var(--niso-safe-area-inset-right, 0px))
--niso-safe-bottom			max(env(safe-area-inset-bottom), var(--niso-safe-area-inset-bottom, 0px))
--niso-safe-left			max(env(safe-area-inset-left), var(--niso-safe-area-inset-left, 0px))

Platform variables

Under the tokens, hosts publish the platform’s own values: --apple-system-* on Apple platforms (UIKit’s semantic colors and text styles, named after WebKit’s), --md-sys-* on Android (Material 3’s color and type tokens), and --niso-safe-area-inset-* for the safe area. Use the --niso-* tokens unless you want one platform’s value specifically. Platform style has the details.

appearance

A control that niso draws natively (switch, slider, progress bar, button, text field, radio group) is native while appearance is auto, the default. appearance: none makes it a plain CSS box you style yourself (Native controls).

Not there

• No platform media queries (@media (platform: ios) and the like) and no prefixed properties: neither is implemented.
• env(safe-area-inset-*) is always 0; use --niso-safe-*.
• prefers-contrast, prefers-reduced-motion and prefers-reduced-transparency never match (System settings).