Top 10 CSS Tipps & Tricks in 2020

Um die Programmiersprache CSS kommt wohl kein Webentwickler herum. CSS wird ständig um neue Features erweitert, die das Leben von Frontendlern einfacher machen und einen noch schlankeren Quelltext ermöglichen.

Die Besonderheiten finden sich im CSS-Code. Innerhalb von .grid{} wurde die Leserichtung horizontal-tb festgelegt – tb steht in diesem Fall für top-bottom. Diese Anweisung entspricht beispielsweise einer deutschen Website, bei der die Leserichtung links → rechts ist und die Textblöcke von oben nach unten angeordnet werden. 

CSS Custom Properties sind nichts anderes als Variablen in CSS. Über das Präfix -- können neue Variablen definiert werden:

--color-red: #9f4e44

Über die CSS-Funktion var wird der Variableninhalt wieder ausgegeben:

.item{
var(--color-red);
}

Was für einen Nutzen diese CSS Custom Properties haben, möchten wir wieder an einem kleinen Beispiel erörtern. Im CSS-Quelltext haben wir über :root{} die drei Variablen size, space und color-yellow definiert. Über die Funktion var() könnt ihr den Inhalt size auslesen und über Funktion calc() mit der jeweiligen Einheit multiplizieren. Die Abstände sind über Variable --space definiert, die 1rem entspricht. In media query @media() definiert ihr, dass der Abstand bei  einer Mindestbreite von 600 Pixeln nicht mehr 0.5, sondern 1.5 betragen soll. Der Variableninhalt space wird hier anstelle von margin mit 1rem multipliziert und der Abstand entsprechend vergrößert.

Großer Vorteil hierbei: selector und property müssen nicht kopiert und im media query wiederholt werden, lediglich die Variable wird angepasst. Die CSS Custom Properties unterstützen euch folglich dabei, euren Quelltext schlank zu halten. 

Im CSS-Code wird der backdrop-filter: blur verwendet. 

Als nächstes möchten wir euch die Pseudoklasse :is vorstellen. In unserer Demo haben wir in HTML die Elemente header, article und footer mit jeweils einem p-Tag erstellt. 

Das p in header und footer möchten wir gerne einfärben, dabei aber Redundanzen in unserem CSS-Quelltext vermeiden. Hier kommt die Pseudoklasse :is ins Spiel. Hiermit adressieren wir lediglich p-Tags, die sich in header oder footer befinden, und zwar wie unten. Auf diese Weise könnt ihr euren CSS-Code deutlich übersichtlicher halten. 

Kommen wir zu einer weiteren Pseudoklasse – :placeholder-shown. Mit dieser könnt ihr Elemente eines Formulars so bearbeiten, dass die Styling-Informationen nur zu sehen sind, solange der Placeholder angezeigt wird. Wird im Formular beispielsweise etwas eingetippt und verschwindet der Placeholder, verschwinden mit ihm auch die Styling-Informationen. So ist in unserem Beispiel der grüne Rahmen des Eingabefelds nicht mehr zu sehen, sobald der User einen Text verfasst.  

Dafür haben wir folgenden HTML-Code verwendet:

Der zugehörige CSS-Quelltext sieht entsprechend so aus:

position: sticky ist quasi eine Mischung aus position: fixed und position: relative. In unserem Beispiel haben wir eine Kontaktliste nach den Anfangsbuchstaben der Vornamen sortiert. Beim Runterscrollen verschwinden die Namen in der grünen Box, aber der jeweils oberste Buchstabe in der roten Box bleibt oben bestehen. 

Im HTML-Code haben wir die Vornamen entsprechend aufgelistet:

Im CSS wurde die Liste mit den Eigenschaften display: flex und flex-flow: column nowrap versehen. Die Anfangsbuchstaben dt haben wir entsprechend mit position: sticky positioniert. top: 0 gibt dabei den Abstand nach oben zum Browserfenster an. 

Im HTML-Quelltext haben wir die Boxen entsprechend über grid aufgebaut und über react realisiert. 

In CSS sind dem grid mehrere Spalten und zwei Zeilen zugewiesen. An den Überschriften könnt ihr die Besonderheit von clamp sehen: Für die font-size wurde drei Werte, ein minimaler, ein normaler und ein maximaler Wert, festgelegt.  

Bei den einzeiligen Einträgen habt ihr die Möglichkeit mit text-overflow: ellipsis drei Punkte am Ende des Eintrags visuell hervorzuheben. Mehrzeilige Einträge werden über display: -webkit-box definiert. Als Orientierung haben wir in unserem Fall -webkit-box-orient: vertical festgelegt, für die Anzahl der Zeilen verwenden wir webkit-line-clamp. Auch hier definieren wir die Schriftgröße dynamisch über clamp().

Kommen wir zuletzt zu der Pseudoklasse :focus-within, die ihr in Formularen verwenden könnt. Hiermit habt ihr die Möglichkeit das Elternelement eines Formulars zu adressieren und zu verändern, sobald ein Formularelement fokussiert wird. In unserem Beispiel haben wir ein einfaches Formular mit Vorname, Nachname und einem Button gebaut.

Wenn der Nutzer ein Element fokussiert, beispielsweise in das Feld „Vorname“ klickt, wechseln Elternelement und Button ihre Farbe. 

Der zugehörige CSS-Text sieht wie folgt aus:

Das waren Sie – unsere Tipps & Tricks für CSS in 2020. Für weitere spannende Hilfestellungen rund ums Thema Webentwicklung könnt in unsere Reihe Full Stack Web Development auf YouTube reinschauen. Wir wünschen viel Spaß dabei!