Hier sind noch weitere CSS3-Befehle und -Eigenschaften, die in den letzten Jahren hinzugekommen sind oder populär geworden sind:

1. accent-color

Diese Eigenschaft ermöglicht es, die Akzentfarbe von Steuerelementen wie Checkboxen, Radiobuttons und Schiebereglern zu definieren.

input[type="checkbox"], input[type="radio"] {
  accent-color: #ff6347; /* Setzt die Akzentfarbe auf Tomatenrot */
}

2. place-content

place-content ist eine Kurzform für align-content und justify-content und wird hauptsächlich in Grid- und Flexbox-Layouts verwendet.

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

3. overflow-anchor

Diese Eigenschaft verhindert ungewollte Scrollsprünge beim Hinzufügen oder Entfernen von Inhalten über dem aktuellen Viewport.

.container {
  overflow-anchor: none; /* Verhindert Scrollsprünge */
}

4. font-variant

font-variant bietet erweiterte Steuerungsmöglichkeiten für die Darstellung von Schriftarten, insbesondere für typografische Feinheiten wie Kapitälchen.

.text {
  font-variant: small-caps; /* Zeigt den Text in Kapitälchen */
}

5. scroll-behavior

Diese Eigenschaft steuert, wie das Scrollen in einer Seite animiert wird, z. B. beim Navigieren zu einem Anker-Link.

html {
  scroll-behavior: smooth; /* Weiches, gleitendes Scrollen */
}

6. break-after, break-before, break-inside

Diese Eigenschaften steuern den Seitenumbruch (beispielsweise beim Drucken oder in Multicolumn-Layouts).

.article {
  break-after: avoid; /* Vermeidet Umbrüche nach diesem Element */
  break-before: always; /* Fügt immer einen Umbruch vor diesem Element ein */
  break-inside: avoid; /* Vermeidet Umbrüche innerhalb dieses Elements */
}

7. writing-mode

Mit dieser Eigenschaft kann der Textfluss eines Elements verändert werden, z. B. für vertikalen Text.

.vertical-text {
  writing-mode: vertical-rl; /* Text fließt vertikal von rechts nach links */
}

8. text-align-last

text-align-last steuert die Ausrichtung der letzten Zeile eines Blocks.

p {
  text-align: justify; /* Justiert den Text */
  text-align-last: right; /* Richten die letzte Zeile rechtsbündig aus */
}

9. text-combine-upright

Diese Eigenschaft kombiniert mehrere Zeichen in einem vertikalen Textfluss.

.vertical-text {
  writing-mode: vertical-rl;
  text-combine-upright: all; /* Kombiniert alle Zeichen in eine einzige Zeichenbox */
}

10. all

Die all-Eigenschaft setzt alle CSS-Eigenschaften auf ihre initialen, vererbten oder unveränderten Werte zurück.

.reset {
  all: unset; /* Setzt alle CSS-Eigenschaften auf ihre Standardwerte zurück */
}

11. will-change

will-change informiert den Browser über geplante Änderungen an bestimmten Eigenschaften, um die Leistung zu optimieren.

.element {
  will-change: transform, opacity; /* Optimiert das Rendering für Transformationen und Transparenzänderungen */
}

12. shape-outside

Diese Eigenschaft ermöglicht es, Inhalt um eine definierte Form (anstatt um ein rechteckiges Element) fließen zu lassen.

.float-image {
  float: left;
  shape-outside: circle(50%); /* Text fließt um einen Kreis herum */
  width: 200px;
  height: 200px;
  clip-path: circle(50%);
}

13. clip-path

clip-path wird verwendet, um nur einen bestimmten Teil eines Elements sichtbar zu machen. Es unterstützt Formen wie Kreise, Polygone und mehr.

.image {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* Schneidet das Bild in eine Diamantform */
}

14. filter: drop-shadow()

Diese spezielle Filterfunktion wendet einen Schlagschatten auf ein Element an, ähnlich wie box-shadow, aber mit mehr Flexibilität, z. B. bei SVGs.

.image {
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5)); /* Fügt einen Schlagschatten hinzu */
}

15. caret-color

Diese Eigenschaft steuert die Farbe des Textcursors (Caret).

input {
  caret-color: red; /* Setzt die Caret-Farbe auf Rot */
}

16. scroll-snap-type

scroll-snap-type definiert das Verhalten beim Scrollen und gibt an, wie Inhalte in einem Container „einrasten“ sollen.

.container {
  scroll-snap-type: x mandatory; /* Zwingt den Inhalt, horizontal bei Snap-Punkten zu stoppen */
}

.item {
  scroll-snap-align: center; /* Richtet das Scrollen an der Mitte des Containers aus */
}

17. user-select

Diese Eigenschaft steuert, ob Benutzer Text oder Elemente auf einer Webseite auswählen können.

.no-select {
  user-select: none; /* Verhindert die Auswahl von Text */
}

18. object-fit

object-fit bestimmt, wie der Inhalt eines Ersatzcontainers gefüllt werden soll.

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

19. object-position

Diese Eigenschaft wird zusammen mit object-fit verwendet, um die Position des Inhalts im Container festzulegen.

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left; /* Positioniert das Bild oben links */
}

20. font-feature-settings

Diese Eigenschaft erlaubt die Aktivierung spezifischer OpenType-Features für Schriftarten.

.text {
  font-feature-settings: "liga" 1, "smcp" 1; /* Aktiviert Ligaturen und kleine Kapitälchen */
}

Diese CSS3-Eigenschaften und -Funktionen bieten Webentwicklern viele Möglichkeiten, um ansprechende und funktionale Webseiten zu gestalten. Sie ermöglichen es, komplexe Layouts, bessere Benutzererlebnisse und ansprechende visuelle Effekte mit einfacherem und effizienterem CSS-Code zu erstellen.