Future CSS Today ⚡

Modern CSS techniques we could[1] use today.
Thibaud Colas ,


  1. No tooling 🔥
  2. More with less
  3. Great browser support

No tooling?

Tooling where it makes sense.

  1. Still using linting: Prettier, Stylelint.
  2. Also still using compatibility & performance tools: Autoprefixer, cssnano.
  3. Writing modern syntax thanks to postcss-preset-env.

More with less?

Vanilla CSS without compromising on expressiveness

  1. Co-location of related code
  2. Not a thousand lines of code
  3. No overrides

Great browser support?

Support older browsers so users don’t have to upgrade their devices.

  • Opera Mini (1%)
  • IE11 (0.5%)
  • Safari 12-14 (0.5%)
  • Android Browser 4.4.4 (0.3%)
  • Chrome 69-89 (1.2%)
  • Firefox 3.6

More with less, continued

Things in CSS that take lots of lines for no reason

  • Responsive design - avoid media queries
  • Interaction styles (hover, focus, touch, etc.)
  • Right-to-left support
  • Light and dark themes
  • Contrast themes / Windows High Contrast Mode
  • Print stylesheets

CSS patterns: layout

  • Flexbox and Grid 🐸
  • Logical properties and values
  .slide-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-inline-start: 5rem;


  • System font stack
  • Dynamic viewport units
  • clamp()

  body {
    font-family: "Segoe UI","system-ui","Roboto","Helvetica Neue","Arial",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: clamp(1rem, calc(2dvmax + 1rem), 5dvmin);


All of them!

  • CSS variables
  • oklch()
  • color-mix()
  • System colors
  --light-dark: color-mix(in oklch, CanvasText 10%, Canvas 50%);
  --dark-light: color-mix(in oklch, Canvas 10%, CanvasText 50%);
  color: color-mix(in oklch, var(--light-dark) 20%, CanvasText);


View source

Does it work?

Yes and no

  • This shows promise but there are still a lot of hurdles.
  • Likely practical for small projects within the next 2 years.
  • Early adopters can use this now with little compromises.

Takeways for pro™ projects

Great things you should definitely use on projects

  1. Media queries 💯
  2. CSS variables 💅
  3. Sass and PostCSS tooling