Future CSS Today ⚡

Goals

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

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

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

• 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

• 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

• 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);
  }
          

• 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);
            
          

• 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.

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