Die besten neuen CSS-Features des Jahres 2025, die bereits in allen Browsern unterstützt werden

CSS entwickelt sich weiter und macht die Arbeit von Layout-Designern und Entwicklern noch schneller, schöner und einfacher. Neue CSS-Funktionen sind bereits in allen gängigen Browsern verfügbar und vereinfachen die Arbeit mit Layouts, Animationen und Leistung erheblich.

In diesem Artikel erfahren Sie:

• Welche neuen CSS-Eigenschaften wurden im Jahr 2025 eingeführt;

• Wie sie die Entwicklung von Websites beschleunigen können;

• Wie man sie mit Codebeispielen anwendet.

Schauen wir uns jede neue Funktion genauer an: Was sie ist, warum sie verwendet werden sollte und Codebeispiele.

1. Scrollbar-Gutter und Scrollbar-Color 🖱️

Was ist das:

• Scrollbar-gutter reserviert Platz für die Bildlaufleiste, auch wenn der Bildlauf noch nicht begonnen hat.

• Scrollbar-color ermöglicht es Ihnen, die Farben des Schiebereglers und des Hintergrunds der Bildlaufleiste festzulegen.

Warum verwenden:

• Vermeiden Sie Inhaltsverschiebungen, wenn der Bildlaufbalken angezeigt wird.

• Die Benutzeroberfläche ästhetischer und ansprechender gestalten.

Code-Beispiel:

.scrollable {
  scrollbar-gutter: stable both-edges;
  scrollbar-color: #444 #ccc;
}

2. ::target-text 🎯

Was ist das:

Ein Pseudoelement, das den Text hervorhebt, der durch einen internen Link (Anker) verlinkt wird.

Warum verwenden:

• Verbessert die Navigation in langen Dokumenten.

• Hilft dem Benutzer, nach dem Wechsel schnell den gewünschten Ort zu finden.

Code-Beispiel:

::target-text {
  background: yellow;
  color: black;
}

3. Ruby Layout (ruby-align und ruby-position) 🈚

Was ist das:

Styling von Rubriken (kleine Erläuterungen über oder neben dem Haupttext).

Warum verwenden:

• Für ein qualitativ hochwertiges Layout ostasiatischer Sprachen erforderlich.

• Nützlich für Schulungsunterlagen und Tipps.

Code-Beispiel:

ruby {
  ruby-align: center;
  ruby-position: over;
}

4. Relative Color Syntax und light-dark() 🎨

Was ist das:

• Relative Color Syntax ermöglicht es Ihnen, die Farbeinstellungen relativ zu einer anderen Farbe zu ändern.

• light-dark() wählt automatisch die Farbe je nach Thema (hell oder dunkel).

Warum verwenden:

• Erleichtert die Unterstützung von dunklen und hellen Themen.

• Dynamische Farbverwaltung ohne zusätzlichen JavaScript-Code.

Code-Beispiel:

.element {
  background: light-dark(#ffffff, #000000);
}

5. Exklusive Accordions 📂

Was ist das:

Verwenden Sie das HTML-Element <details> mit dem Attribut name, um andere erweiterte Elemente automatisch zu schließen.

Warum verwenden:

• Erstellen von Akkordeons ohne JavaScript.

• Vereinfachung der FAQ- und Menüstruktur.

Code-Beispiel:

<details name="exclusive">
  <summary>Подробнее</summary>
  Текст внутри панели.
</details>

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

6. content-visibility 🚀

Was ist das:

Eine Eigenschaft, mit der Sie das Rendern von Elementen verzögern können, die sich außerhalb des sichtbaren Bereichs des Bildschirms befinden.

Warum verwenden:

• Beschleunigt das Laden von Seiten erheblich.

• Spart Geräteressourcen, insbesondere auf Mobiltelefonen.

Code-Beispiel:

.lazy-load-section {
  content-visibility: auto;
}

7. font-size-adjust 🔤

Was ist das:

Ermöglicht es, die visuelle Lesbarkeit des Textes zu erhalten, wenn er auf die Ersatzschrift fällt.

Warum verwenden:

• Vereinfacht die Anpassung von Schriftarten.

• Behält die richtigen Proportionen des Textes beim Laden von Fallback-Schriften bei.

Code-Beispiel:

.text {
  font-family: "CustomFont", Arial, sans-serif;
  font-size-adjust: 0.5;
}

8. transition-behavior 🧩

Was ist das:

Eine neue Möglichkeit, Übergänge und Animationen zu steuern, ohne JavaScript verwenden zu müssen.

Warum verwenden:

• Ermöglicht das Erstellen komplexer Animationsszenarien.

• Macht die Benutzeroberflächen reaktionsschneller und lebendiger.

Code-Beispiel:

.card {
  transition-property: opacity, display;
  transition-duration: 0.25s;
  transition-behavior: allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

9. @property und mathematische Funktionen in CSS ➗

Was ist das:

• @property ermöglicht das Deklarieren benutzerdefinierter Variablen mit Datentypen und Anfangswerten.

• Neue Funktionen (round(), mod(), rem()) fügen grundlegende mathematische Operationen direkt in CSS hinzu.

Warum verwenden:

• Verbessert die Verwaltung dynamischer Stile.

• Vereinfacht mathematische Berechnungen ohne Präprozessoren.

Code-Beispiel:

@property --animation-progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

10. offset-position und offset-path 🛤️

Was ist das:

Ermöglicht das Verschieben von Elementen entlang einer komplexen Bahn ohne JavaScript.

Warum verwenden:

• Erstellen von Animationen anhand von Kurven ohne Fremdbibliotheken.

• Macht die Benutzeroberfläche dynamischer und interessanter.

Code-Beispiel:

.move {
  offset-path: path("M10,80 Q95,10 180,80");
  offset-position: 0%;
  transition: offset-position 2s ease;
}

Übersichtstabelle der neuen Funktionen von CSS 2025 ✨

Fazit ✅

Die neuen CSS-Features 2025 ermöglichen es, die Arbeit mit adaptivem Layout zu vereinfachen, die Benutzererfahrung zu verbessern und die Zeit für die Entwicklung von Schnittstellen zu verkürzen. All diese Funktionen werden bereits von den wichtigsten Browsern unterstützt!

Wenn Sie die Programmierung noch schneller erlernen und moderne Web-Entwicklungstechnologien erlernen möchten, probieren Sie unsere App aus Kodik um Programmieren zu lernen! 🚀 Mit uns ist das Lernen einfach und interessant!

Lade jetzt „Kodik“ herunter und entwickle dich in der Programmierung! 📚💻