Seit 2020 wurden in CSS3 viele neue Funktionen und Eigenschaften eingeführt, die das Layout, die Gestaltung und die Animationen von Webinhalten erheblich verbessern. Hier sind einige der bemerkenswertesten neuen CSS3-Befehle und -Eigenschaften, die seitdem hinzugekommen sind:

1. container queries

Container Queries ermöglichen es, Styles auf Basis der Größe eines Containers und nicht der Viewport-Größe anzuwenden. Dies ist besonders nützlich für responsive Design-Komponenten.

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

@container myContainer (min-width: 400px) {
  .child {
    font-size: 1.5rem;
  }
}

2. accent-color

Mit accent-color kann die Akzentfarbe für Formularelemente wie Checkboxen, Radiobuttons und Schieberegler festgelegt werden.

input[type="checkbox"] {
  accent-color: #ff6347; /* Tomatenrot */
}

3. scroll-timeline und view-timeline

Diese Eigenschaften ermöglichen es, CSS-Animationen basierend auf dem Scrollfortschritt zu steuern.

@keyframes scrollAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.element {
  scroll-timeline-name: my-timeline;
  animation: scrollAnimation 1s infinite;
}

4. subgrid (für CSS Grid Layouts)

Die subgrid-Funktion ermöglicht es, einem Kind-Element eines CSS-Grids die gleiche Spalten- oder Reihenstruktur wie seinem Eltern-Grid zu verwenden.

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid; /* Übernimmt die Spaltenstruktur des Eltern-Grid */
}

5. aspect-ratio

aspect-ratio ermöglicht die Festlegung eines Verhältnisses von Breite zu Höhe für Elemente, was insbesondere für responsive Bilder und Videos nützlich ist.

.box {
  width: 100%;
  aspect-ratio: 16 / 9; /* 16:9 Seitenverhältnis */
  background: #ddd;
}

6. inset (Shorthand für top, right, bottom, left)

inset ist eine Kurzform, die gleichzeitig die Eigenschaften top, right, bottom und left definiert.

.element {
  position: absolute;
  inset: 10px 20px 30px 40px; /* top right bottom left */
}

7. min(), max(), clamp()

Diese Funktionen bieten mehr Flexibilität bei der Größenberechnung, um responsive Layouts besser zu kontrollieren.

.element {
  width: min(50vw, 400px); /* Wählt den kleineren Wert */
  font-size: clamp(1rem, 2.5vw, 2rem); /* Zwischen 1rem und 2rem, aber skaliert */
}

8. backdrop-filter

backdrop-filter ermöglicht es, grafische Effekte wie Unschärfe oder Farbverschiebungen auf den Hintergrund eines Elements anzuwenden.

.overlay {
  backdrop-filter: blur(5px); /* Macht den Hintergrund unscharf */
}

9. color-contrast()

Diese Funktion ist neu in CSS und wird verwendet, um die kontrastreichste Farbe basierend auf einer Liste von Kandidaten auszuwählen. Dies ist nützlich, um die Barrierefreiheit zu verbessern.

element {
  color: color-contrast(#fff vs #000, #ff6347); /* Wählt die kontrastreichste Farbe zu #fff */
}

10. has() (Parent-Selector)

has() ermöglicht es, ein Element basierend auf seinen Kind-Elementen zu stylen.

div:has(> img) {
  border: 2px solid blue; /* Fügt eine blaue Umrandung hinzu, wenn das div ein direktes img-Kind hat */
}

11. is() und where()

Diese Pseudo-Klassen vereinfachen komplexe Selektoren und bieten eine bessere Lesbarkeit und Wartbarkeit.

/* Wendet die Styles auf jedes der angegebenen Elemente an */
:is(h1, h2, h3) {
  color: #333;
}

/* Wendet die Styles an, aber ohne Spezifitätserhöhung */
where(article, section) {
  margin-bottom: 20px;
}

12. :focus-visible

Diese Pseudo-Klasse zielt auf fokussierte Elemente ab, aber nur, wenn sie eine sichtbare Fokusanzeige benötigen (z. B. bei Tastaturbedienung).

button:focus-visible {
  outline: 2px solid #ff6347; /* Zeigt nur bei Tastaturfokus eine Umrandung */
}

13. scroll-snap-stop

scroll-snap-stop sorgt dafür, dass beim Scrollen an einem bestimmten Punkt gestoppt wird, was bei der Implementierung von Scroll-Snap-Layouts nützlich ist.

.snap-point {
  scroll-snap-stop: always; /* Scrollt immer zu diesem Punkt */
}

14. place-content, place-items, place-self

Diese Shorthands kombinieren align- und justify- Eigenschaften, um die Platzierung von Inhalten und Elementen in Grids und Flexboxen zu vereinfachen.

.container {
  display: grid;
  place-items: center; /* Zentriert Inhalte sowohl horizontal als auch vertikal */
}

.item {
  place-self: start; /* Startet die Platzierung von Elementen am Anfang */
}

Diese neuen CSS3-Eigenschaften und -Befehle erweitern die Möglichkeiten der Webgestaltung erheblich, insbesondere in Bezug auf Layouts, Animationen und responsives Design. Sie bieten mehr Flexibilität und Kontrolle, um moderne, ansprechende und barrierefreie Webanwendungen zu erstellen.