The Future
is Here

These features are so new, they're still being finalized by W3C. You're witnessing the birth of tomorrow's web.

1. Scroll Snap (Interactive Carousels)

Create Netflix-style scroll-snapping without JavaScript.

1
2
3
4 
.container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}

.item {
  scroll-snap-align: center;
}

2. text-wrap: balance

Automatically balance text for beautiful headlines.

Without balance:

The Future of Web Design is Absolutely Revolutionary

With balance:

The Future of Web Design is Absolutely Revolutionary

3. color-mix() Function

Mix colors directly in CSS, no preprocessor needed.

+
= 
background: color-mix(in oklch, red 50%, blue);

4. @starting-style (Entry Animations)

Animate elements appearing from display: none.

@starting-style {
  .popup {
    opacity: 0;
    transform: scale(0.5);
  }
}

.popup {
  transition: opacity 0.5s, transform 0.5s;
}

5. @scope (Scoped CSS)

Limit CSS rules to specific sections of your DOM.

@scope (.card) {
  h2 {
    color: var(--color-primary);
  }
  
  p {
    color: var(--color-text-muted);
  }
}

/* These styles ONLY apply inside .card elements */

This prevents style leakage and eliminates the need for complex naming conventions like BEM.

Previous: PhD Back Home