Hier sind weitere neue CSS3-Eigenschaften und -Funktionen, die in den letzten Jahren eingeführt wurden:

1. scroll-padding und scroll-margin

Diese Eigenschaften definieren den Abstand des Inhalts von den Rändern des Containers, wenn scroll-snap verwendet wird.

.container {
  scroll-padding: 50px;
}

.item {
  scroll-margin: 10px;
}

2. gap (für Flexbox)

Die gap-Eigenschaft wurde ursprünglich für CSS Grid eingeführt, ist aber jetzt auch für Flexbox verfügbar. Sie legt den Abstand zwischen den Elementen innerhalb eines Flexcontainers fest.

.flex-container {
  display: flex;
  gap: 20px; /* Abstand zwischen den flex-Elementen */
}

3. overscroll-behavior

Diese Eigenschaft steuert, wie das Scrollen in einem Container mit überlaufendem Inhalt (overflow) gehandhabt wird, insbesondere wenn das Ende des Containers erreicht wird.

.container {
  overscroll-behavior: contain; /* Verhindert, dass das Scrollen über den Container hinaus geht */
}

4. mix-blend-mode

mix-blend-mode definiert, wie der Inhalt eines Elements mit dem darunterliegenden Inhalt gemischt wird, um verschiedene visuelle Effekte zu erzielen.

.overlay {
  background-color: rgba(255, 99, 71, 0.5);
  mix-blend-mode: multiply; /* Multipliziert die Farben der beiden Ebenen */
}

5. isolation

Die isolation-Eigenschaft stellt sicher, dass ein Element eine separate Blending-Gruppe bildet. Dies verhindert, dass mix-blend-mode auf Elemente außerhalb dieser Gruppe angewendet wird.

.container {
  isolation: isolate; /* Isoliert das Element von anderen für den Mischmodus */
}

6. text-decoration-skip-ink

Diese Eigenschaft steuert, wie der Unterstrich bei Text dekoriert wird, insbesondere bei Buchstaben mit Deszendenten wie „g“ oder „y“.

a {
  text-decoration-skip-ink: auto; /* Überspringt automatisch die Tinte unter Buchstaben */
}

7. conic-gradient()

conic-gradient() ist eine neue Art von Farbverlauf, die konzentrische Farbverläufe um einen Mittelpunkt erzeugt.

.circle {
  background: conic-gradient(from 90deg, red, yellow, green, blue);
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

8. image-rendering

Diese Eigenschaft steuert, wie ein Bild skaliert wird, z.B. ob es weich oder scharf erscheinen soll.

img.pixel-art {
  image-rendering: pixelated; /* Bewahrt die Schärfe von Pixel-Art beim Skalieren */
}

9. text-overflow: ellipsis;

Zwar nicht neu, aber nun besser unterstützt und oft in Kombination mit neuen Flexbox- und Grid-Layouts verwendet, fügt text-overflow ein Ellipsis (…) hinzu, wenn Text überläuft und abgeschnitten wird.

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Zeigt "..." für abgeschnittenen Text */
}

10. contain

Diese Eigenschaft beschleunigt das Rendering, indem sie einschränkt, wie weit sich der Stil und das Layout eines Elements auf die Umgebung auswirken können.

.element {
  contain: layout style; /* Begrenzt die Auswirkungen von Stiländerungen auf das eigene Element */
}

11. filter

Die filter-Eigenschaft wendet grafische Effekte wie Unschärfe, Helligkeit und Kontrast auf ein Element an.

img {
  filter: grayscale(100%) blur(5px); /* Macht das Bild schwarz-weiß und unscharf */
}

12. backdrop-filter

Wendet Effekte auf den Hintergrund eines Elements an, oft in Kombination mit transparenten Overlays.

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

13. pointer-events

Diese Eigenschaft steuert, ob ein Element auf Maus- und Zeigerereignisse reagiert. Besonders nützlich bei Overlays.

.disabled {
  pointer-events: none; /* Ignoriert Mausereignisse */
}

14. will-change

will-change teilt dem Browser mit, welche Eigenschaften sich in naher Zukunft ändern werden, damit der Browser die Leistung für diese Änderungen optimieren kann.

.element {
  will-change: transform; /* Optimiert das Element für Transformationen */
}

15. object-fit

Diese Eigenschaft steuert, wie der Inhalt eines Elements in sein Containerfeld eingefügt wird, insbesondere bei Bildern oder Videos.

img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* Füllt das Containerfeld, ohne das Seitenverhältnis zu verändern */
}

16. object-position

Diese Eigenschaft steuert die Positionierung von Inhalten innerhalb eines Containerfeldes, wenn object-fit verwendet wird.

img {
  object-position: center top; /* Positioniert das Bild oben in der Mitte des Containers */
}

17. ch und ex Einheiten

Diese neuen Maßeinheiten ermöglichen mehr Präzision in der Größenberechnung von Schriften und anderen Elementen.

.element {
  width: 30ch; /* Basierend auf der Breite von 30 Zeichen '0' */
  height: 10ex; /* Basierend auf der Höhe des 'x' */
}

18. line-clamp

Eine nützliche Eigenschaft für das Abschneiden von Text nach einer bestimmten Anzahl von Zeilen.

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden; /* Schneidet Text nach 3 Zeilen ab */
}

Diese CSS3-Eigenschaften bieten Webentwicklern mächtige Werkzeuge, um moderne, reaktionsfähige und ansprechende Benutzeroberflächen zu erstellen. Die Kombination dieser Eigenschaften eröffnet neue Möglichkeiten für kreative und effiziente Webdesigns.