theguardian.com · NewsHow modern is The Guardian'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.
7 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 property1,028
- Internet Explorer hacksUse delete them5
- Font sizes set in media queriesUse clamp()44
- Negative-margin guttersUse gap18
- Floats and clearfixUse grid, flexbox, flow-root8
- 100vhUse dvh units3
- Padding aspect-ratio hackUse aspect-ratio3
Also worth a look
These don't change the score, because modern code uses them too.
- High-specificity selectorsUse @layer, :where()43
- ID selectorsUse classes, @layer26
- !importantUse @layer9
- html or body prefixes for weightUse @layer6
- Physical left and rightUse logical properties356
- Old names for current CSSUse gap, overflow-wrap, break-before2
What The Guardian's CSS is built with
Only what the page and its CSS show, with the evidencePartFoundEvidenceHow sure
- CSS scopingEmotionThe page has its data-emotion style tag.Very sure
- FontsGH Guardian Headline, Guardian Egyptian Web, GuardianTextEgyptian, Guardian Text Egyptian Web and 3 moreLoaded with @font-face from the site's own files.Very sure
- Site frameworkNot detectedNo framework's file paths in the page or its CSS.—
- PreprocessorCan't tellSass, Less and PostCSS leave no trace in the CSS a browser gets.—
Design tokens
CSS custom properties The Guardian defines, and how much of its CSS uses themTokens defined572custom properties
Colors from tokens69%134 of 194
Spacing from tokens0%0 of 519
Font sizes from tokens0%0 of 152
Themes20same tokens, other values
What the 572 tokens hold
- Colors556
- Sizes and spacing1
- Other values15
Main colors (first theme)
- --accordion-background#f6f6f6
- --ad-border#dcdcdc
- --article-background#ffffff
- --article-text#121212
- --avatar-background#ededed
- --byline-background#ffe500
- --caption-link#c70000
- --caption-text#707070
- --discussion-link#0077b6
- --standfirst-text#000000
Colors written out
60 color declarations skip the tokens, with 14 different values. The most common: #ffffff (10), #121212 (8) and #0077b6 (8).
Tokens a build step turns into plain values (Sass variables, most CSS-in-JS) never reach the browser, so they don't show here.