Moderne CSS-Techniken 2024: Container Queries, Cascade Layers und mehr

CSS entwickelt sich rasant weiter. Neue Features wie Container Queries, Cascade Layers und verbesserte Grid-Funktionen revolutionieren, wie wir Websites gestalten. Hier sind die wichtigsten modernen CSS-Techniken, die Sie 2024 beherrschen sollten.

Container Queries: Responsive Design 2.0

Container Queries ermöglichen es Komponenten, auf ihre eigene Größe zu reagieren – nicht nur auf die Viewport-Größe.

Grundlagen

/* Container definieren */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Container Query verwenden */
@container card (min-width: 300px) {
  .card {
    display: flex;
    flex-direction: row;
  }
  
  .card__image {
    flex: 0 0 200px;
  }
}

@container card (max-width: 299px) {
  .card {
    display: block;
  }
  
  .card__image {
    width: 100%;
    height: 200px;
  }
}