CSS bietet eine Reihe von Möglichkeiten an, wenn es um die Editierung und Selektierung von Text geht. Grundsätzlich lässt sich jedes HTML-Element editierbar machen. Umgekehrt ist es auch möglich die Editierung von Text gänzlich zu unterbinden, indem man die Selektierung von Text per CSS ausschaltet. Ebenso lässt sich das Aussehen von selektiertem Text beeinflussen. Man kann sogar die Farbe des blinkenden Cursors bei der Texteingabe verändern. Weiterlesen...
Eines der beliebtesten und häufigsten Fragen bei CSS ist die vertikale und horizontale Zentrierung eines Elements innerhalb eines variablen Containers. In der Vergangenheit war es tatsächlich eine Herausforderung, weswegen es früher auch zahlreiche Artikel zu diesem Thema gab. Nicht wenige Menschen haben sich an CSS-Eigenschaften, wie z.B. vertical-align die Zähne ausgebissen, die zwar zu Zeiten von Tabellenlayouts noch zielführend waren, aber später mit anderen Layout-Konzepten nicht funktioniert haben. Mit den neuen mächtigen Features von CSS sind diese Tage zum Glück vorbei und es gibt heute viele moderne Ansätze, um schnell und einfach zum Ziel zu gelangen. Ich möchte hier auf sämtliche Varianten eingehen, mit denen eine vertikale und horizontale Zentrierung bei variabler Größe möglich ist. Weiterlesen...
Mit dem dialog-Element und der Fullscreen API bietet HTML5 eine native Möglichkeit an, eine Dialog-Box im Fullscreen-Modus umsetzen. Die Fullscreen
API bietet mit show() und showModal() zwei Methoden an, um zu steuern, ob die Dialog-Box nicht-modal oder modal geöffnet
wird. Der Hintergrund einer Dialog-Box kann mit dem ::backdrop Pseudo-Element und der Deklaration backdrop-filter gestylt
werden. Ich möchte in diesem Tutorial auf die Kernfunktionalität des dialog-Elements und der Fullscreen API eingehen und eine Auswahl von
Styling-Möglichkeiten für den Hintergrund einer Dialog-Box zeigen.
Weiterlesen...
Unter einem Video-Player sollten Detailinformationen zu dem aktuellen Video gerendert werden. Um die Detailinformationen möglichst zugänglich zu gestalten, war die Anforderung vom SEO-Team diese semantisch korrekt mit dem details- und summary-Tag umzusetzen. Wir hatten bereits eine bestehende Lösung. Diese war aber aufwendig mit JavaScript umgesetzt und die Verschachtelung der semantischen Elemente war invalide. Hinzu kam vom UX-Team die Anforderung, dass beim Aufklappen der Details, die Summary unter die Detailinformationen rutschen sollte und beim Zuklappen wieder zurück nach oben. Dabei sollte ein Pfeil neben der Summary bei geschlossenem Zustand nach unten zeigen und bei geöffnetem Zustand nach oben. Weiterhin sollte sich der Text bei geöffnetem Zustand von "Video-Details einblenden" in "Video-Details ausblenden" ändern. Ich war sicher, dass man das Ganze auch ohne JavaScript valide umsetzen kann. Am Ende war die Lösung zwar einfach, aber der Weg dahin ganz und gar nicht, sondern erforderte einschlägiges CSS Know-how. Ich zeige hier meinen Lösungsansatz in drei Teilen. Weiterlesen...
Sehr lange Zeit hatte man als Web-Entwickler mit den Einschränkungen von text-decoration zu kämpfen. Es war weder möglich den Abstand zwischen Text und Unterstrich sinnvoll zu steuern, noch unterschiedliche Farben für Text und Linie zuzuweisen. Auch die Dicke der Linie war nicht individuell veränderbar. Um solche speziellen UX-Anforderungen zu erfüllen, musste man die text-decoration ausblenden und sich mit padding und box-shadow behelfen. Weiterlesen...
Die Erstellung von Tabellen in HTML hat nach wie vor eine große Bedeutung bei der Visualisierung von bestimmten Datenstrukturen im Internet. Neben einer guten Semantik ist für SEO vor allem das Hinzufügen einer table caption, also einer Tabellenüberschrift, von großem Vorteil. Denn oft erschließt sich der Inhalt einer Tabelle für Mensch und Maschine nur über den hinzugefügten Titel. Weiterhin kann man in der table caption auch wichtige Informationen wie die Quelle oder das Datum der Tabelle unterbringen. HTML5 stellt zwei Arten bereit, wie man eine table caption definieren kann. Ebenso ist es in beiden Varianten möglich die table caption oberhalb oder unterhalb der Tabelle zu rendern, wenn auch jeweils mit einem ganz anderen Ansatz. Weiterlesen...
Wir mussten im Rahmen eines Themings für zwei Mandanten, ausnahmsweise die jeweiligen SVG-Logos nicht wie üblich inline im HTML-Quellcode verbauen, sondern inline als background-image in einer CSS-Datei. Der Hintergrund war, dass das Theming in diesem Fall ausschließlich über CSS custom properties, sprich native CSS-Variablen funktioniert hat und in dieser Umgebung auch kein Import von Assets möglich war. Damit man zwischen den beiden Logos umschalten konnte, mussten die SVG-Logos also zwingend inline als background-image in einer CSS-Variable definiert werden. Ich habe gemerkt, dass das nicht trivial ist und nicht einfach mal schnell gemacht werden kann. Es waren mehrere Schritte durchzuführen und ein paar Fallstricke zu beachten, damit am Ende das gewünschte Ergebnis herauskam. Weiterlesen...
Die Definition von mehreren CSS-Klassen an einem html-Tag ist gängige Praxis, insbesondere die Nutzung einer zweiten Klasse als Modifier, die die erste Klasse überschreibt. Weiterhin ist es auch ganz normal und sogar oft notwendig, mehrere Attribute am gleichen html-Tag zu definieren. Der Zugriff auf Klassen erfolgt mit Klassen-Selektoren, analog dazu der Zugriff auf Attribute mit Attribut-Selektoren. Das Problem dabei ist lediglich die Spezifizität. Weiterlesen...
Ein horizontales Menü mit Trennern begegnet uns häufig im Footer einer Webseite. Oft sind es mehrzeilige Menüpunkte, die durch einen Punkt oder Strich getrennt sind. Das Problem dabei ist, dass man zwar in den einzelnen Zeilen zwischen den Menüpunkten den Trenner gerne haben möchte, aber nicht am Anfang oder Ende der jeweiligen Zeile. Ich selbst dachte lange Zeit, dass es mit CSS alleine nicht geht. Es schien eine große Herausforderung zu sein, wo in der Vergangenheit auch JavaScript-Lösungen herhalten mussten. Weiterlesen...
Viele Web-Entwickler setzen durchgehend auf root em (rem) als Einheit, um eine responsive Website zu erstellen. Es wird davon ausgegangen, dass erst mit rem die HTML-Seiten dazu befähigt werden, sich an die Viewports anzupassen und seine Inhalte proportional zu skalieren. Das ist völliger Quatsch. Die Einheit rem ist weder Voraussetzung für die Anpassung an die Browserfenster, noch für die Skalierung der Inhalte im Browser. Sie kann zwar helfen bestimmte Anforderungen an die Responsiveness einer Webseite umzusetzen, im Grunde ist es aber ein reines Accessibility Feature. Weiterlesen...
CSS ist mittlerweile so mächtig, dass es mit einer Fülle an Features wie Filtern, Masken, Blend-Modi, Verläufen, Transitionen, Animationen, Trasformationen, etc. eine unendliche Menge an Möglichkeiten bietet fantastische visuelle Effekte umzusetzen. Ich möchte hier eine einfache Möglichkeit zeigen, wie man auch ohne mix-blend-mode mit ganz wenigen Schritten einen Text mit Verlaufseffekt erzeugen kann. Weiterlesen...
Obwohl es die übliche Regel ist, in CSS Deklarationen top, right, bottom und left auszuschreiben, gibt es tatsächlich für diese Properties eine Kurzschreibweise, die den Entwicklern hilft, den Code erheblich schlanker und leserlicher zu schreiben. Weiterlesen...