web.dev · ReferenceHow modern is web.dev's CSS?
Checked 2 November 2026, the CSS on its home page as any visitor gets it. Sites change, so check it now for today's numbers.
Each weekly check lands in your dashboard.
Already modern
Custom properties 2,864Logical properties 495gap 171Grid 32oklch(), color-mix(), light-dark() 13:is(), :where() 13aspect-ratio 12object-fit 9clamp(), min(), max() 7:has() 6position: sticky 5Container queries 4Anchor positioning 3:focus-visible 2text-wrap: balance, pretty 2dvh, svh, lvh 1@starting-style 1
8 old techniques still there
Each with the modern way to replace it. Old CSS that works is fine; these are suggestions.
- Vendor prefixes browsers no longer needUse the unprefixed property5,097
- [dir=rtl] overridesUse logical properties163
- Internet Explorer hacksUse delete them14
- 100vhUse dvh units26
- Negative-margin guttersUse gap14
- Floats and clearfixUse grid, flexbox, flow-root12
- Padding aspect-ratio hackUse aspect-ratio4
- Font sizes set in media queriesUse clamp()4
Also worth a look
These don't change the score, because modern code uses them too.
- High-specificity selectorsUse @layer, :where()1,010
- Repeated selector listsUse :is()189
- !importantUse @layer123
- ID selectorsUse classes, @layer119
- z-index of 1000 or moreUse the top layer (dialog, popover)50
- Doubled classes for weightUse @layer21
- html or body prefixes for weightUse @layer16
- Physical left and rightUse logical properties515
- Old names for current CSSUse gap, overflow-wrap, break-before63
- Dark theme blocks that repeat valuesUse light-dark()2
What web.dev's CSS is built with
Only what the page and its CSS show, with the evidencePartFoundEvidenceHow sure
- FontsGoogle Sans, Roboto, Roboto MonoLoaded with @font-face, some from Google Fonts.Very sure
- Site frameworkGoogle DevSiteThe page is built from its devsite-* elements.Very sure
- PreprocessorCan't tellSass, Less and PostCSS leave no trace in the CSS a browser gets.—
Design tokens
CSS custom properties web.dev defines, and how much of its CSS uses themTokens defined1,832custom properties
Colors from tokens50%724 of 1,437
Spacing from tokens13%230 of 1,823
Font sizes from tokens28%137 of 495
Themes2same tokens, other values
What the 1,832 tokens hold
- Colors835
- Sizes and spacing367
- Fonts6
- Shadows16
- Point at other tokens488
- Other values120
Main colors (first theme)
- --webdev-primary#1a73e8
- --devsite-primary-color#3740ff
- --devsite-secondary-color#e51661
- --devsite-link-background#d2e3fc
- --devsite-code-background#f1f3f4
- --devsite-code-color#37474f
- --devsite-var-color#d01884
- --devsite-progress-background#dadce0
- --devsite-recommendations-accent#303f9f
- --devsite-notification-background#1967d2
Spacing scale--devsite-ref-typeface--size-* · 24 steps
- 10
- 11
- 12
- 13
- 14
- 16
- 18
- 20
- 22
- 24
- 26
- 30
- 32
- 34
- 38
- 40
- 44
- 48
- 50
- 56
- 58
- 60
- 62
- 64
Colors written out
713 color declarations skip the tokens, with 122 different values. The most common: #5f6368 (87), #fff (70) and #3c4043 (53).
Tokens a build step turns into plain values (Sass variables, most CSS-in-JS) never reach the browser, so they don't show here.