CSS3 Befehle seit 2020 neu Teil1

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.