Modernes CSS - Möglichkeiten und Vorteile
Der Vortrag “Modernes CSS” (Janosch Oltmanns) auf der Contao Konferenz in Kiel hat mich angespornt, mal über meine Sicht auf modernes CSS zu schreiben. Ich versuche immer am Ball zu bleiben und meine CSS-Kenntnisse auf das nächste Level zu bringen. Das Abo des YouTube-Kanals von Kevin Powell ist aus diesem Grund für mich Pflicht. https://www.youtube.com/@KevinPowell
Wenn ich noch an die Anfangszeiten des Webdesigns zurückdenke – Tabellen und transparente Bilder für Positionierung. Was war das dann für ein Raunen in der Webgemeinde, als 1996 die erste Version von CSS vorgestellt wurde. Die Erlösung oder neue Probleme?
Na ja, wer kennt es nicht – die Browser waren sich nicht einig und somit wurden nie alle Möglichkeiten, die CSS bietet, genutzt. Seit ca. 2002 wird an CSS Level 3 gearbeitet und das ist auch die Version, die bis heute im Einsatz ist. In den vergangenen Jahren kamen sehr viele neue Module (Möglichkeiten) dazu und die Browserkompatibilität wurde auch wesentlich besser.
Somit ist es an der Zeit mal über die entwickelte Webseite zu schauen, was man denn da inzwischen besser machen (vereinfachen) könnte. Jetzt kommt die Frage auf, warum sollte ich das machen, es funktioniert doch alles noch.
Moderne CSS, ich gehe nachher noch genauer darauf ein, ermöglicht auch einen vereinfachten HTML-Aufbau. Warum ist das nun wichtig? Jedes HTML-Tag, das ich mir spare, verbessert die Performance und die Lesbarkeit des Codes. Früher wurden vielfach zusätzliche <div> verwendet, um beispielsweise etwas zentriert zu positionieren oder auch mit Hintergrundbildern zu arbeiten. Mit modernem CSS entfällt dies und somit können schon mal über 200 Knoten in einem HTML-Dokument wegfallen.
Was sind jetzt meine CSS Favoriten im täglichen Einsatz?
Auf dieser Seite kannst Du Dich informieren, wie andere CSS verwenden. https://2023.stateofcss.com/de-DE/
SCSS und CSS - das Beste aus beiden Welten
Ich arbeite in SCSS und mische die Vorteile von SASS und modernen CSS. So will ich SASS Funktionen wie Mixins, Extend, @include, @fuction aber auch @import in meinem Arbeitsablauf nicht missen.
Mittlerweile haben CSS Funktionen an einigen Stellen die von SASS abgelöst.
- SASS-Variabel: Für Farben verwende ich inzwischen css custom properties (variables) + private properties statt SASS Variable. Vorteil, diese können in der Laufzeit geändert werden. Ich arbeite aber an anderen Stellen weiterhin mit $variable.
- Berechnungen: clamp, calc, min, max. Gerade bei responsiven Schriftgrößen ist clamp in Verbindung mit SASS-function eine große Hilfe.
- CSS Grid und Flexbox sind schon lange im Einsatz.
- scroll-behavior, scroll-padding-top –> gerade bei fixed Header
- currentcolor, aspect-ratio, focus-visible
Neue Funktionen, die ich in den nächsten Projekten einfließen lassen werde, sind:
- Container-Queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
- Subgrid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid
Hier wird die Funktion Subgrid verständlich erklärt: https://kulturbanause.de/blog/css-subgrid-verschachtelte-grids/
Das Internet entwickelt sich rasend schnell weiter, schneller als unsere Infrastruktur und unsere Denkweise (Mind Set). Um nicht abgehängt zu werden, ist es wichtig, sich frühzeitig mit neuen Möglichkeiten zu beschäftigen.
Was machst Du, um auf dem Laufenden zu bleiben?
