The State of CSS in 2026 - Native Features Replacing JavaScript

.trigger {
  anchor-name: --my-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;

  /* Position relative to anchor */
  bottom: anchor(top);
  left: anchor(center);

  /* Automatic fallback positioning */
  position-try-fallbacks: flip-block, flip-inline;
  position-try-order: most-height;
}

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-on-scroll {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

/* Parallax effect */
.parallax {
  animation: parallax linear;
  animation-timeline: scroll();
}

@keyframes parallax {
  to {
    transform: translateY(-100px);
  }
}

@view-transition {
  navigation: auto;
}

/* Name elements to animate between pages */
.hero-image {
  view-transition-name: hero;
}

/* Customize the transition */
::view-transition-old(hero) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(hero) {
  animation: fade-in 0.3s ease;
}

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

:root {
  /* OKLCH for perceptually uniform colors */
  --brand: oklch(65% 0.25 250);

  /* Relative color syntax */
  --brand-light: oklch(from var(--brand) calc(l + 20%) c h);
  --brand-dark: oklch(from var(--brand) calc(l - 20%) c h);

  /* Color mixing */
  --brand-muted: color-mix(in oklch, var(--brand), gray 30%);
}

/* Style parent based on child state */
.form-group:has(input:invalid) {
  border-color: red;
}

/* Previous sibling styling */
h2:has(+ p) {
  margin-bottom: 0.5rem;
}

/* Card with image vs without */
.card:has(img) {
  grid-template-rows: auto 1fr;
}

.card {
  padding: 1rem;

  & .title {
    font-size: 1.5rem;

    &:hover {
      color: var(--brand);
    }
  }

  @media (width >= 768px) {
    padding: 2rem;
  }
}