HTML und CSS im Jahr 2025: 5 neue Funktionen, die Sie vielleicht übersehen haben

Glaubst du, dass HTML und CSS schon lange durch und durch erforscht sind? Aber nein! Im Jahr 2025 überraschen diese „alten Hasen“ erneut: In den Browsern sind einige coole Funktionen aufgetaucht, die das Layout einfacher, sauberer und leistungsfähiger machen 💥

In diesem Artikel findest du 5 Neuheiten, die du vielleicht übersehen hast. Vor allem, wenn du gerade erst anfängst. Los geht's!

1. 🧱 :has() in CSS — endlich!

Jetzt kann CSS „zurückblicken“ — Stile auf das übergeordnete Element anwenden, wenn es ein bestimmtes Element enthält. Früher war dies nur über JS möglich.

.card:has(img) {
  border: 1px solid green;
}

👉 Wende den Rahmen .card an, wenn sich darin ein Bild befindet. Hurra, der übergeordnete Selektor ist jetzt Realität!

2. 🎛️ Containerabfragen (container queries)

Stile können jetzt nicht an die Bildschirmgröße angepasst werden, sondern an die Größe Container! Dies ist eine Revolution für den komponentenbasierten Ansatz.

@container (min-width: 400px) {
  .card-title {
    font-size: 2rem;
  }
}

⚙️ Wird zusammen mit der Eigenschaft container-type verwendet und wird bereits in Chrome, Firefox und Safari unterstützt.

3. 🎨 CSS :where() und :is() — Selektoren ohne Schmerzen

Dies sind leistungsstarke Dienstprogramme zum Schreiben kurzer und flexibler Selektoren mit geringer Spezifität:

:where(header, main, footer) {
  margin: 0 auto;
}

🧠 Praktisch, wenn du dich nicht mit Übersteuerungen und Wichtigkeit herumschlagen willst.

4. 💾 Attribut loading="lazy" standardmäßig

Jetzt sind alle <img> und <iframe> in den meisten Browsern werden standardmäßig verzögert geladen — nur wenn sie auf dem Bildschirm erscheinen.

<img src="photo.jpg" alt="Photo">

Früher musste man schreiben loading="lazy", jetzt kann man es einfach vergessen - und alles wird funktionieren!

5. 🧪 Scoped Styles in HTML

Ein Experiment, das bereits in Chrome und Safari verfügbar ist: Sie können Stile direkt in die Komponente schreiben - und sie werden angewendet nur zu ihm.

<style scoped>
  h2 {
    color: tomato;
  }
</style>

⚠️ Noch instabil, aber die Zukunft liegt eindeutig dahinter. Vor allem für diejenigen, die auf Web Components schreiben.

🤓 Bonus: Noch ein paar weitere Funktionen

• text-wrap: balance; - Überschriften werden schön in mehrere Zeilen umgebrochen

• view-transition API — nahtlose Übergänge zwischen Seiten

• anchor positioning - Neupositionierung von Tooltips und Popups

Im Anhang Kodik du kannst nicht nur lesen, sondern probieren - direkt im Editor! Wir aktualisieren HTML- und CSS-Kurse, fügen neue Funktionen hinzu und vermitteln dir aktuelles Wissen. Und außerdem haben wir gemütliche Gemeinschaft im Telegram 👾

💬 Hast du schon :has() oder Containeranfragen ausprobiert?

Schreibe in den Kommentaren, welche CSS-Tricks dich im Jahr 2025 beeindruckt haben!