- Die Hauptursachen für die jüngsten Performance-Probleme von Websites sind übermäßiger JavaScript-Einsatz und Tracking-Skripte; in vielen Fällen lässt sich das mit HTML/CSS allein ausreichend ersetzen
- Kürzlich hinzugefügte Funktionen wie CSS-Nesting, relative Farben, neue Viewport-Einheiten (lvh, svh, dvh) ermöglichen es, Aufgaben, für die man früher auf JS oder Präprozessoren angewiesen war, einfach zu lösen
- CSS ist nicht nur ein simples Styling-Werkzeug, sondern eine leistungsfähige Sprache, mit der sich Animationen, Eingabevalidierung, Dark-Mode-Themes und Akkordeon-Menüs umsetzen lassen
- Auch in puncto Performance ist CSS überlegen: Durch GPU-Beschleunigung und Ausführung in einem separaten Thread ist es bei Animationen und Übergängen flüssiger und effizienter als JS
- Der Autor betont CSS nicht nur als praktisches Werkzeug, sondern auch als Mittel für Ausdruck und Kunst, und empfiehlt Webentwicklern, das Potenzial von modernem CSS stärker zu nutzen
Einleitung: Die Komplexität des Webs und neue Versuche
- Viele Websites leiden unter Performance-Problemen und unnötiger Komplexität durch den übermäßigen Einsatz von JavaScript-Frameworks
- React-Apps brauchen mehrere Sekunden zum Laden, und NextJS erzeugt Hydration-Fehler
- Der Ordner
node_modules belegt mehrere Gigabyte Speicher
- Auch ohne JavaScript lassen sich mit HTML und CSS leistungsfähige Funktionen umsetzen
- Abgesehen von komplexen Warenkörben in E-Commerce-Seiten oder Dashboards ist JavaScript möglicherweise nicht zwingend erforderlich
- Dieser Artikel stellt die neuesten Funktionen von CSS vor und regt Entwickler dazu an, verschiedene Möglichkeiten zu erkunden, ohne sich nur auf JavaScript zu verlassen
Missverständnisse und Wahrnehmung von CSS
Ist CSS wirklich schwierig und umständlich?
- Die negative Wahrnehmung von CSS rührt von mangelndem Grundlagenwissen her
- Viele Entwickler überspringen die CSS-Basics und konzentrieren sich auf JavaScript oder TypeScript
- CSS ist kein bloßes Styling-Werkzeug, sondern eine domänenspezifische Sprache mit leistungsfähigen Funktionen
- Mit Werkzeugen wie Flexbox lassen sich auch komplexe Layouts leicht umsetzen
- Beispiel: Mit
display: flex und justify-content: center lässt sich ein div einfach zentrieren
- Die Entwicklertools des Browsers bieten Widgets, mit denen sich Flexbox-Eigenschaften visuell anpassen lassen
- Wenn man sich nur in eine Richtung vertieft (z. B. JS) und CSS vernachlässigt, wird es zwangsläufig zur Belastung
Der Schmerz beim Schreiben von CSS – und was sich geändert hat
- Früher war CSS tatsächlich nicht besonders komfortabel, weshalb Werkzeuge wie Sass und Tailwind entstanden
- Beispiel: Man musste lange Selektor-Ketten wie
.post > .buttons .like:hover verwalten
- Inzwischen wurden Qualitätsverbesserungen wie Nesting ergänzt, sodass sich auch mit reinem CSS angenehm entwickeln lässt
- CSS-Nesting sammelt zusammengehörige Styles an einer Stelle und verbessert die Lesbarkeit
- Beispiel:
.post { & > .buttons { .like { &:hover { ... } } } }
- Die Eltern-Kind-Beziehung wird klarer, sodass kürzere und einfachere Klassennamen möglich sind
- Relative Farben erleichtern die Farbmanipulation
- Mit
hsl(from #123456 h s calc(l + 10)) lässt sich die Helligkeit anpassen
- Mit
color-mix() können zwei Farben gemischt werden, um dynamische Farben zu erzeugen
- Die Range-Syntax für Media Queries erlaubt intuitive Bedingungen wie
(width <= 768px)
- Die lh-Einheit unterstützt Styling basierend auf der Zeilenhöhe
- Die Eigenschaft scrollbar-gutter löst Layoutverschiebungen durch Scrollbars
- Baseline stellt die Kompatibilität von Funktionen in den wichtigsten Browsern sicher
- newly available bedeutet: funktioniert in aktuellen Browsern
- widely available bedeutet: unterstützt bis zurück zu Browsern von vor 2,5 Jahren
- Beispiel: CSS-Nesting wird seit Dezember 2023 in allen Browsern unterstützt
Warum nur mit CSS/HTML entwickeln?
- Manche Nutzer deaktivieren JavaScript standardmäßig aus Gründen wie Sicherheit oder Datenschutz
- Wenn eine Website nur mit reinem CSS/HTML bereitgestellt wird, können auch diese Nutzer sie eher verwenden
- Sowohl für Entwickler als auch für Nutzer bietet die Nutzung von nur CSS/HTML große Vorteile bei Geschwindigkeit, Barrierefreiheit sowie CPU- und Batterieverbrauch
- CSS-Animationen laufen auf dem Compositor-Thread und reduzieren die CPU-Last
- JavaScript läuft über die Event Loop, wodurch kleine Verzögerungen entstehen können
- Verbesserte Barrierefreiheit und Benutzerfreundlichkeit
- Hover-Effekte für Buttons, Toast-Animationen und Eingabevalidierung lassen sich einfach mit CSS umsetzen
Praktische Beispiele und zentrale Funktionen von CSS
Mit @starting-style natürliche Einstiegsanimationen umsetzen
- Früher brauchte man für das Animieren des Erscheinens eines Elements komplexe Strukturen mit Keyframes, JS-Triggern usw.
- Mit @starting-style lässt sich der Startzustand einfach festlegen. Anfangsanimationen eines Elements, etwa ein Fade-in, sind damit leicht umsetzbar
- Einstellung mit
transition: opacity 1s; @starting-style { opacity: 0; }
- Funktioniert auch ohne separates
@keyframes oder JavaScript
- Wenn man einfach den Startzustand zusammen mit einer Transition angibt, wird die Animation natürlich angewendet
- Beispiel: Sanfte Übergänge bei Transparenz und Position einer Toast-Nachricht
Dark-/Light-Mode-Themes einfach einrichten
- color-scheme: light dark wechselt das Theme automatisch entsprechend den Nutzerpräferenzen
- Die Funktion light-dark(#000, #FFF) legt Farben passend für hellen bzw. dunklen Modus fest
- Radiobuttons und der Selektor :has unterstützen die Auswahl eines Themes durch den Nutzer
- Theme-Wechsel ist allein mit CSS ohne JavaScript möglich
- Optional kann JavaScript zum Speichern/Laden des Themes ergänzt werden
Mit Radio-/Checkboxen und :has, :checked benutzerdefinierte UI erzeugen
- Auch komplexe Interaktionen wie Tabs, Akkordeons und Toggles lassen sich ohne JavaScript umsetzen
- Radiobuttons können mit :checked und :has individuell gestylt werden
- Beispiel: Mit
label:has(input:checked) wird der Stil des ausgewählten Buttons festgelegt
- Das Eingabeelement kann mit
opacity: 0 verborgen werden, während die Zugänglichkeit für Screenreader erhalten bleibt
- Das details-Element eignet sich gut für Akkordeon-Menüs wie in FAQ-Bereichen
- Mit dem Attribut
name lässt sich steuern, dass nur ein Element geöffnet ist
- Je nach Zustand
[open] können Animationen ergänzt werden
Eingabevalidierung und Zustandsdarstellung
- Durch die Kombination von HTML-Attributen wie pattern und required mit CSS-Pseudoklassen (:valid, :invalid, :user-valid usw.) sind Echtzeitvalidierung und visuelles Feedback möglich
- Änderungen von Outline-/Border-Stilen für Eingabefelder verbessern die User Experience
- Mit dem pattern-Attribut von HTML lässt sich die Gültigkeit eines Eingabefelds prüfen
- Beispiel:
\w{3,16} erlaubt 3 bis 16 Zeichen aus Buchstaben, Zahlen oder Unterstrich
- Mit :valid und :invalid in CSS kann je nach Gültigkeit gestylt werden
- :user-valid und :user-invalid wenden Styles erst an, nachdem der Nutzer eine Eingabe gemacht hat
- Mit dem Selektor :has lassen sich andere Elemente abhängig vom Eingabezustand stylen
- In manchen Fällen, etwa bei komplexen Eingabebedingungen, ist JS nötig, doch meist reichen CSS/HTML aus
Viewport-Einheiten richtig einsetzen
- Die Einheiten vw/vh haben auf Mobilgeräten Genauigkeitsprobleme, wenn die Adress- bzw. Navigationsleiste ein- oder ausgeblendet wird
- Empfohlen wird die Verwendung neuer Viewport-Einheiten wie lvh/svh/dvh (largest/smallest/dynamic viewport height)
- lvh: für die gesamte Bildschirmfläche, z. B. einen vollflächigen Hintergrund
- svh: für Buttons oder Links, die immer sichtbar sein müssen
- dvh: für flexible Größenvergabe bei Veränderungen etwa durch Scrollen
- Keyboard-Overlays lassen sich mit der Eigenschaft interactive-widget oder der VirtualKeyboard API behandeln
<meta name="viewport" content="width=device-width, interactive-widget=resizes-content">- In Chromium-basierten Browsern mit
navigator.virtualKeyboard.overlaysContent = true
CSS-Wunschliste: Was noch fehlt oder wünschenswert wäre
- Wiederverwendbare Blöcke: andere Klassen innerhalb einer Klasse anwenden (z. B.
@apply border)
- Kombinierte Media-Query-Selektoren:
@media mit Klassenselektoren verbinden
- nth-child-Variablen:
span { --nth: nth-child(); } für dynamisches Styling
- nth-letter-Selektor: bestimmte Buchstaben stylen (z. B.
p::nth-letter(2))
- Einheiten entfernen: mit
calc(100vw / 1px) einen wert ohne Einheit erzeugen
- image()-Funktion: Unterstützung für Ersatzfarben und Bildausschnitte
- style-Tag im body: offizielle Standardunterstützung zur Verringerung von FOUC-Problemen
Fazit: CSS und die Kunst des Webs
- CSS ist nicht nur ein Werkzeug, sondern ein Mittel für kreativen Ausdruck
- AI-Tools oder Build-Ketten wie Linter und Minifier können Kreativität einschränken
- CSS erfüllt zugleich Performance, Barrierefreiheit und künstlerischen Ausdruck
- Dieser Artikel wurde mit etwa 49 kB JavaScript-freiem HTML/CSS erstellt
- Alle interaktiven Widgets und visuellen Elemente wurden von Hand umgesetzt
- Beispiel: CSS-Klickspiel beweist das Potenzial von CSS als Programmiersprache
Noch keine Kommentare.