5 CSS-Tricks, die Ihr Frontend im Jahr 2025 verändern werden

CSS überrascht weiterhin: Jetzt können Sie Popups, Animationen und adaptive Formulare ohne JavaScript-Zeile erstellen. Nachfolgend finden Sie eine Auswahl der coolsten CSS-Features des Jahres 2025, die es wert sind, übernommen zu werden.

💬 1. Popover-API: Pop-up-Elemente ohne JS

Jetzt können Sie modale Fenster, Tooltips und Dropdown-Listen erstellen nur mit HTML und CSS!

<!-- Кнопка-триггер -->
<button popovertarget="myPopover">Подписаться</button>

<!-- Всплывающее окно -->
<div id="myPopover" popover>
  Спасибо за подписку! ❤️
</div>

Wenn Sie auf die Schaltfläche klicken, wird ein Popup angezeigt. Sie können es schließen, indem Sie Escape drücken oder außerhalb des Fensters klicken.

So fügen Sie eine fließende Animation hinzu:

#myPopover {
  transform: translateY(-2rem);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#myPopover:open {
  transform: translateY(0);
  opacity: 1;
}

✨ 2. @starting-style — sanftes Erscheinen von Elementen

Normalerweise wendet CSS sofort den endgültigen Stil an, wenn ein Element angezeigt wird. Die Animation wird scharf. Mit dem neuen @starting-style können Sie festlegen Ausgangszustand, die dann nahtlos in die endgültige übergeht.

#myPopover {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#myPopover:open {
  transform: translateY(0);
  opacity: 1;
}

@starting-style {
  #myPopover:open {
    transform: translateY(-2rem);
    opacity: 0;
  }
}

📌 Das Element startet etwas höher und wird transparent, bewegt sich dann sanft nach unten und erscheint.

📏 3. Größenanimation mit Schlüsselwörtern

CSS kann jetzt den Übergang zwischen height: 0 und height: auto, sowie min-content, max-content, fit-content.

Dazu müssen Sie die Verwendung von Schlüsselwörtern zulassen:

:root {
  interpolate-size: allow-keywords;
}

Beispiel:

<details>
  <summary>Показать</summary>
  <div class="content">Скрытое содержимое.</div>
</details>

.content {
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease;
}

details[open] .content {
  height: auto;
}

Früher gab es solche Animationen überhaupt nicht. Jetzt - eine sanfte Öffnung.

📝 4. Adaptive Eingabe und Textbereich mit Feldgröße

Endlich hat CSS gelernt passt die Größe von input, textarea und select automatisch an den Inhalt an. Fügen Sie einfach hinzu:

input, textarea, select {
  field-sizing: content;
  max-width: 100%; /* ограничение по ширине */
}

Beispiel:

<textarea placeholder="Write as much as you want..."></textarea>
<input type="text" placeholder="Name">
<select>
  <option>Коротко</option>
  <option>Очень длинный вариант</option>
</select>

Diese Form sieht ordentlich aus und passt sich dem Benutzer ohne JS an. 💡

🌗 5. Funktion light-dark() für dunkle und helle Themen

Sie müssen @media (prefers-color-scheme) nicht mehr eingrenzen — jetzt kann alles gemacht werden in einer Zeile mit der Funktion light-dark():

:root {
  color-scheme: light dark;
  --text-color: light-dark(#000000, #ffffff);
  --bg-color: light-dark(#ffffff, #000000);
}

💡 Die Farben passen sich automatisch an das Systemthema des Benutzers an.

CSS 2025 zeigt, dass wir jedes Jahr mehr und schöner machen können, ohne eine einzige Zeile JavaScript. Probieren Sie neue Funktionen aus und Ihr Code wird nicht nur einfacher, sondern auch moderner ✨