microsoft.com · TechHow modern is Microsoft'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.
- [dir=rtl] overridesUse logical properties419
- Vendor prefixes browsers no longer needUse the unprefixed property89
- Internet Explorer hacksUse delete them5
- Font sizes set in media queriesUse clamp()16
- Floats and clearfixUse grid, flexbox, flow-root13
- 100vhUse dvh units13
- font-size: 0 whitespace hackUse flexbox with gap3
Also worth a look
These don't change the score, because modern code uses them too.
- !importantUse @layer526
- High-specificity selectorsUse @layer, :where()166
- ID selectorsUse classes, @layer82
- Repeated selector listsUse :is()19
- z-index of 1000 or moreUse the top layer (dialog, popover)17
- Physical left and rightUse logical properties673
- Old names for current CSSUse gap, overflow-wrap, break-before8
- Dark theme blocks that repeat valuesUse light-dark()7
What Microsoft's CSS is built with
Only what the page and its CSS show, with the evidencePartFoundEvidenceHow sure
- FontsSegoeUI, Segoe UI Variable Small, Segoe UI Variable Text, Segoe UI Variable Display and 1 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 Microsoft defines, and how much of its CSS uses themTokens defined1,387custom properties
Colors from tokens16%99 of 623
Spacing from tokens4%27 of 609
Font sizes from tokens8%13 of 172
Themes3same tokens, other values
What the 1,387 tokens hold
- Colors850
- Sizes and spacing182
- Motion116
- Fonts7
- Shadows18
- Point at other tokens161
- Other values53
Main colors (first theme)
- --colorNeutralForeground1#242424
- --colorNeutralForeground2#424242
- --colorNeutralForeground2BrandHover#0f6cbd
- --colorNeutralForeground2BrandPressed#115ea3
- --colorNeutralForeground3#616161
- --colorNeutralForeground4#707070
- --colorNeutralForegroundDisabled#bdbdbd
- --colorBrandForegroundLinkHover#0f548c
- --colorBrandForegroundLinkPressed#0c3b5e
- --colorBrandForeground2Pressed#0a2e4a
Spacing scale--ds-spacing-* · 9 steps
- 2
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 56
Colors written out
524 color declarations skip the tokens, with 145 different values. The most common: #fff (30), #0078d4 (29) and #ffffff (13).
Tokens a build step turns into plain values (Sass variables, most CSS-in-JS) never reach the browser, so they don't show here.