apple.com · TechHow modern is Apple'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.
8 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 properties139
- Vendor prefixes browsers no longer needUse the unprefixed property84
- Old font formats (.eot, SVG fonts)Use WOFF29
- Sass color functionsUse color-mix(), relative colors5
- Font sizes set in media queriesUse clamp()51
- 100vhUse dvh units3
- Floats and clearfixUse grid, flexbox, flow-root2
- translate(-50%, -50%) centeringUse place-items: center2
Also worth a look
These don't change the score, because modern code uses them too.
- High-specificity selectorsUse @layer, :where()2,433
- ID selectorsUse classes, @layer2,236
- html or body prefixes for weightUse @layer46
- Repeated selector listsUse :is()40
- !importantUse @layer23
- z-index of 1000 or moreUse the top layer (dialog, popover)5
- Doubled classes for weightUse @layer4
- Dark theme blocks that repeat valuesUse light-dark()137
- Physical left and rightUse logical properties97
- Old names for current CSSUse gap, overflow-wrap, break-before28
- to stop single-word linesUse text-wrap: balance3
What Apple's CSS is built with
Only what the page and its CSS show, with the evidencePartFoundEvidenceHow sure
- FontsApple Legacy ChevronLoaded 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 Apple defines, and how much of its CSS uses themTokens defined361custom properties
Colors from tokens59%104 of 177
Spacing from tokens19%150 of 783
Font sizes from tokens1%2 of 149
Themes3same tokens, other values
What the 361 tokens hold
- Colors151
- Sizes and spacing95
- Motion13
- Point at other tokens30
- Other values72
Main colors (first theme)
- --buystrip-backgroundrgb(245, 245,…
- --globalmessage-segment-backgroundrgb(250, 250,…
- --globalnav-badge-backgroundrgb(0, 0, 0)
- --sk-button-colorrgb(255, 255,…
- --sk-button-backgroundrgb(0, 113, 2…
- --sk-focus-color#0071e3
- --sk-blocklink-colorrgb(0, 102, 2…
- --sk-paddlenav-backgroundrgb(51, 51, 5…
- --sk-pin-colorrgb(110, 110,…
- --r-globalnav-background-opened#fafafc
Colors written out
73 color declarations skip the tokens, with 32 different values. The most common: #000 (8), #6e6e73 (7) and #fff (6).
Tokens a build step turns into plain values (Sass variables, most CSS-in-JS) never reach the browser, so they don't show here.