Cascading Style Sheets und sein Superset SCSS – von einfachen Selektoren bis zu verschachtelten Strukturen, Variablen und kompilierten Stylesheets.
Wenn HTML-Cards bei jedem Seitenaufruf in einer anderen Reihenfolge erscheinen sollen, lässt sich das mit ein wenig JavaScript und CSS lösen – ganz ohne Eingriff ins Backend. Die Cards sind zunächst unsichtbar und ihr Platz auf der Seite ist von Anfang an reserviert, damit sich der Inhalt darunter nicht verschiebt. Sind sie gemischt, erscheinen sie.
Ein deaktivierter Button reagiert weder auf Maus noch Tastatur und einen Tooltip zeigt er dadurch auch nicht. Gerade dann wäre aber eine Erklärung hilfreich, denn ein Symbol, ein Icon, der Text oder eine Funktion sind oft nicht selbsterklärend für den jetzigen Status. Ein umschliessendes Element und ein paar ARIA-Attribute schaffen Abhilfe – auch für Screenreader.
Bei langen Tabellen verliert man schnell die Übersicht, wenn der Tabellenkopf aus dem Sichtfeld scrollt. Wenn man den Tabellenkopf mit CSS festhält, während die Zeilen darunter durchlaufen, behält man die Übersicht. Und das ist weniger aufwendig, als man denkt.
Bootstrap-Klassen per @extend zu übernehmen ist sehr praktisch. Bläht sich die CSS-Datei aber unkomprimiert auf 27 MB auf, ist das nicht OK. Man könnte folgern, dass sich @extend und Bootstrap nicht vertragen. Das hält einer Messung nicht stand: Teuer wird es nur bei wenigen, klar benennbaren Mustern.
Bilder für Webseiten liegen oft nicht im richtigen Format vor, obwohl sie in einen Bereich mit fest vorgegebenem Seitenverhältnis passen sollen. Fehlt die Möglichkeit, sie zuzuschneiden, kann man sich mit «aspect-ratio» und «object-fit» im CSS behelfen: Der Ausschnitt sitzt, die Bilddatei bleibt unangetastet. Zugeschnitten wird also schon, aber nur optisch statt in der Datei selbst.
Eine Unterstreichung in HTML mit CSS ist mehr als ein Strich unter dem Text. Mit «text-decoration: underline» ist die Unterstreichung erreicht, doch es steckt mehr dahinter. Mit Beispielen aus dem Alltag möchte ich aufzeigen, wie sich das feiner steuern lässt und «border-bottom» unnötig werden kann.