Inhalte am Bildschirm verstecken mit der Klasse »visually-hidden«

Auf Webseiten gibt es manchmal Elemente, die zwar im Quelltext und für Benutzer mit einem Screenreader sinnvoll sind, in einem visuellen Layout aber nicht benötigt werden.

Zu diesem Zweck kann man, wie in diesem Beitrag beschrieben, einen Hilfsklasse erstellen, die man z. B. visually-hidden nennt.

Weiterlesen

Websites nur mit HTML und CSS? Auch diese Website läuft mit WordPress.

In Buch und Videokurs zum Lernen von HTML und CSS erstellen Sie eine kleine Übungswebsite, deren Quelltext Sie gerne als Basis für eigene Webseiten nutzen können. Sie sollten aber vorher kurz überlegen, ob von Hand geschriebene Webseiten für Ihr Vorhaben wirklich ausreichen, oder ob ein CMS wie WordPress vielleicht doch die bessere Wahl ist.

Weiterlesen

Bilder optimieren: DPR 2 ist meist genug

HTML bietet mit dem Attribut srcset die Möglichkeit, je nach Auflösung des Bildschirms verschiedene Grafiken auszuliefern. Inzwischen gibt es jede Menge Geräte mit einer DPR 3 und einige sogar mit 4, Tendenz steigend. Muss man also jetzt von jedem Bild drei oder vier verschiedene Versionen ausliefern? Kurze Antwort: Nein, zwei sind fast immer genug.

Weiterlesen

Kein Buch zu Contao 4 von mir

Mein Contaobuch zur Version 3.x stammt aus dem Jahr 2014 und die Website zum Buch ist offline.

In den letzten Jahren wurde ich oft gefragt, wie es denn mit einem Buch zu Contao 4 aussieht. Kurzform: Ob es ein Buch dazu geben wird, weiß ich nicht, aber definitiv nicht von mir. Sorry.

Weiterlesen

Flexbox: IE versteht flex:1 nicht richtig

Der Internet Explorer 11 versteht die Flexbox-Syntax. Im Prinzip. Eigentlich. Wohl. So’n bisschen.

However. Mit flex:1 hat er Probleme, wenn es zusammen mit flex-direction: column benutzt wird. Das ist mit dem IE11 fast wie früher beim Floaten…

Also ich finde es nicht sonderlich schade, dass der „Internet Exploder“ den Weg des Dodo geht gegangen ist …

Weiterlesen

IE11 und die Zentrierung per Flexbox

Das Zentrieren von Elemente sowohl horizontal als auch vertikal ist mit der Flexbox theoretisch ganz einfach: margin:auto, und fertig. Der Internet Explorer versteht zumindest in der 11er-Version zwar Flexbox, hat aber diverse Bugs und so kommt er mit diesem in Kapitel 19 von Flexible Boxes beschriebenen Trick nicht klar. Er zieht das zu zentrierende Element einfach in die Länge, was etwas unschön aussieht (siehe Beitragsbild).

Weiterlesen