Cascading Style Sheets, oder kurz und einfach CSS, ist eine sogenannte Stylesheet-Sprache. Sie sorgt im Webdesign dafür, dass Websites besonders ansprechend aussehen. Mit CSS wird eine Website also erst zum Leben erweckt, Text wird formatiert, ein Button bekommt Effekte und Formulare hübsche Eingabefelder und Animationen.
Mit CSS ist vieles möglich und die meisten unterschätzen dabei, wie umfangreich die Möglichkeiten am Ende wirklich sind. Es gibt eine Menge CSS-Befehle, die weitgehend unbekannt sind.
Um solche CSS-Tricks soll es heute gehen. Codeschnipsel, die viele gar nicht kennen, die beim Design der eigenen Website aber eine Menge bewirken können.
7 CSS-Tricks für eure Website
- Weiches Scrollen zu Anker-Links
Sogenannte Anker-Links, also Links auf einer Seite, die auf eine bestimmte ID bzw. Stelle im selben Dokument verlinkt werden, waren schon immer ein fester Bestandteil von Websites. Zum Beispiel in einem Inhaltsverzeichnis, bei dem jeder Link auf die ID der jeweiligen Überschrift verlinkt wird. Oder bei besonders langen Websites, wo ein Button im unteren Eck dafür sorgt, dass Nutzer immer wieder direkt nach oben springen können.
Das Problem bei solchen Links ist, dass der Sprung in der Regel sehr hart ausfällt, weshalb er in der Vergangenheit oft mit Javascript animiert wurde. Mit »scroll-behavior« lässt sich das nun auch via CSS realisieren. Gemeint ist damit ein weiches Scrollen, an die jeweilige Stelle im Dokument.
Mit dem Befehl »scroll-behavior:smooth« werden all diese Sprünge, die direkt zum Anker führen, also butterweich animiert. Nur mit CSS und komplett ohne zusätzliches Javascript. Unterstützt wird der Befehl allerdings nur in Chrome und Firefox, in Safari verbleibt der Sprung also ohne Animation.
- Amazon Links automatisch markieren
»:after« und »:before« sind in CSS sogenannte Pseudoklassen, die genau das machen wonach sie klingen. Im Grunde existieren sie nicht als solches, sondern ergänzen etwas anderes, indem sie Inhalte vor oder eben nach einem Element einfügen. Das kann ein Icon hinter einem Link sein, ebenso wie ein stilistisches Element.
Was viele nicht wissen ist, wie umfangreich Pseudoklassen genutzt werden können. Wer sie geschickt einsetzt, kann ganze Abschnitte, ohne weitere Klassen oder ID’s gestalten. Außerdem gibt es eine ganze Palette an Möglichkeiten, wie etwa »:first-of-type« und »:not(:first-of-type)«.
Wer CSS wirklich beherrschen möchte und auf unnötige ID’s in seinem Code lieber verzichtet, sollte sich die gesamte Palette an Pseudoklassen mal genauer ansehen. Mit ihnen lässt sich vieles realisieren, was ohne nur über Umwege möglich wäre.
Zum Beispiel könnte man so alle Links zu Amazon.de automatisch mit einem Sternchen versehen, um sie als Affiliatelink zu markieren. Dafür gibt es gleich noch einen weiteren spannenden CSS-Befehl, um nur die URL’s anzusprechen, die Amazon.de enthalten.
a[href*="amazon.de"]:after { content:"*"; } 
-webkit-touch-callout
Mobile First ist wichtig geworden, doch viele vergessen, dass der Touch auf dem Smartphone eben kein Klick mit der Maus ist. Soll heißen: Der Touch auf einen Button sorgt hin und wieder dafür, dass der Text auf diesem markiert wird. Dumme Sache.
Mit »-webkit-touch-callout:none« lässt sich das Verhalten verhindern, sodass unter iOS und Safari kein Callout mehr aufgerufen wird, also keine Box mit Auswahlmöglichkeiten erscheint. Das passiert immer mal wieder aus Versehen, wenn ein Button zu lange gedrückt wird.
Da dies in der Regel, zumindest auf Buttons und ähnlichen Elementen, aber nicht erwünscht ist, kann es mit »-webkit-touch-callout« verhindert werden. Sollte es auch, denn es nervt.
- Darstellung von Text beschleunigen oder verbessern
Einer meiner Lieblingsbefehle in CSS, der allgemein viel zu selten zum Einsatz kommt, ist »text-rendering«. Kurz gesagt erlaubt »text-rendering« euch festzulegen, ob bei der Anzeige von Schrift die Performance oder die Genauigkeit bevorzugt werden soll. Folgende Angaben sind möglich.
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;Die Optionen sind dabei selbsterklärend. Bei »auto« wählt der Browser die beste Methode. »optimizeSpeed« bevorzugt ganz klar die Performance. »optimizeLegibility« bevorzugt die Legibility, also die Lesbarkeit und »geometricPrecision« achtet genau auf die optimale Umsetzung von Kerning und Co.
Sichtbar wird das »text-rendering« vor allem bei großen Fonts. Allgemein ist das Ergebnis aber bei jeder Font unterschiedlich, beeinflusst aber vor allem das Kerning, also den Abstand der einzelnen Buchstaben, damit diese möglichst gleichmäßig und natürlich aussehen.
- Mehrere Spalten im Text realisieren
Kaum genutzt, doch super einfach und praktisch einsetzbar, sind die CSS Columns, also Spalten. Da braucht es kein Flexbox oder Grid, um ein Design mit mehreren Spalten zu realisieren, da CSS dies für einfache Elemente bereits beherrscht. Der Befehl ist ebenfalls simpel und wird von allen Browsern unterstützt.
Am besten ist, ihr erstellt euch eine eigene Klasse und weist dieser dann Spalten zu. Oder gleich eine ganze ganze Liste an Klassen, um sie im Code einfach nutzen zu können. Zum Beispiel so wie ich es hier handhabe.
p.col-2 {column-count:2}
p.col-3 {column-count:3}
p.col-4 {column-count:4}Damit lässt sich in HTML dann simpel und schnell der Befehl »<p class="col-2">« einsetzen, um den Text entsprechend zu gliedern. Das ist einfach und lockert lange Texte spürbar auf. Wer möchte, kann seine Texte damit deutlich aufregender gestalten.
- Ränder und Padding zur Breite zählen
Anfänger haben bei der Gestaltung ihrer Website häufig das Problem, dass sie einem Element einen Rand zuweisen, dieser Rand dann aber über die Gesamtbreite hinausgeht. Das liegt daran, dass der Rand in CSS nicht automatisch mit der Breite zusammenhängt. Ebenso wie das Padding. Mit »box-sizing« wird genau das erzwungen.
box-sizing: content-box;
box-sizing: border-box;Bei »content-box«, was übrigens Standard ist, werden Padding und Border nicht zur Breite und Höhe hinzugerechnet. Ein Rand ragt also über die 100% Breite hinaus. Um das zu vermeiden, gibt es »border-box«. Damit ist bei der vollen Breite eines Elements, auch das Padding und der Rand bereits mit eingerechnet, es ragt also nichts über die Gesamtbreite hinaus.
Ein kleiner Befehl, der Anfänger aber oft verzweifeln lässt. Sie gestalten häufig ein Element und verstehen dann nicht, warum der Rand immer wieder überlappt. Oft habe ich schon gesehen, wie dann die Breite selbst verringert wird, damit es irgendwie passt. Das führt beim Skalieren, vor allem Mobil, dann aber zu unschönen Fehlern in der Darstellung.
- Elemente ein anderes Aussehen vorgaukeln
Mit »appearance« lassen sich Elemente mit einem Aussehen belegen, welches gar nicht für sie gedacht ist. So kann ein einfacher Link zu einem Button verwandelt werden, weil dem Browser gesagt wird, dass dies kein Link, sondern ein Button ist. Ebenso könnte man einem Input-Feld sagen, dass es gar keins ist, um die Gestaltung nur bei besonderen oder speziellen Feldern einzusetzen.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;Mit »none« wird das Element nicht so dargestellt, wie es im System üblich wäre. Ansonsten sind die Werte frei setzbar. Von »button« bis »checkbox« oder »searchfield« ist also alles möglich.
-webkit-touch-callout
Einfach mal selber probieren
CSS ist inzwischen ziemlich mächtig geworden. Wo es früher noch klare Grenzen gab, sind mit CSS inzwischen auch butterweiche Animation möglich, genau wie ein weiches Scrollen zu Anker-Links, was einst nur mit Javascript realisiert werden konnte. Das ist ziemlich aufregend, weil CSS einfacher ist und deutlich weniger Ressourcen frisst.
Ob ein Befehl in allen Browsern unterstützt wird, könnt ihr bei Caniuse.com prüfen. Die Website hatte ich euch schon öfter Empfohlen. Sie ist eine super Anlaufstelle, um einzelne Befehle auf ihre Kompatibilität hin zu prüfen.
Ansonsten empfehle ich, die Befehle von oben einfach mal selbst auszuprobieren. Baut sie doch mal in eine Testseite ein und spielt ein wenig mit den Möglichkeiten herum. Ob ihr es nutzen wollt oder nicht, es hilft dabei die Dinge besser zu verstehen.
Habe ich noch etwas vergessen?
Schreibt mir euren CSS-Lieblingsbefehl in die Kommentare.