Interaction &
Context

1. Container Queries

Media Queries are for the viewport. Container Queries are for the component.

Drag the handle on the right to resize the container below:

.parent {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .child { flex-direction: row; }
}

2. Scroll-Driven Animations

Animate based on scroll position without a single line of JavaScript.

/* The Future is Here */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.image {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

3. CSS Logic & Math

CSS is now a programming language. Use logic to determine values.

Logic

Minimum 300px, preferred 50%, maximum 800px.

Trigonometry

/* Circular positioning */
.item {
  /* Calculate X and Y based on angle */
  --angle: 45deg;
  translate: calc(cos(var(--angle)) * 100px) 
             calc(sin(var(--angle)) * 100px);
}

4. OKLCH Colors

A new color space that actually makes sense for human perception.

Uniform brightness gradient (Impossible with HSL)