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

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

Videokurs: »Little Boxes – der HTML-Crashkurs«

UPDATE
Seit November 2018 gibt es den offiziellen Nachfolge-Kurs »Webtechniken lernen, Teil 1: HTML», mit neuer Beispielsite, komplett überarbeitet, aktualisiert und erweitert.

Am 11. März 2015 ist Teil 1 der neuen Little Boxes-Reihe veröffentlicht worden, die das vor über vier Jahren erschienene „große Training“ aktualisiert und erweitert.

Weiterlesen