CSS Grid und Subgrid

Mit CSS flex und grid ist ein solider Spaltensatz eingezogen. Aber erst jetzt haben flex und grid endlich eine einfache Lösung für ein tägliches Problem: In zwei, drei oder mehr Spalten bilden Überschriften, Texte und Bilder ein Raster.

CSS offset-path: Animation entlang eines Pfades

CSS offset-path bewegt Elemente entlang eines Pfads: einer S-Kurve, einer Acht oder beliebiger Formen und schießt kleine Raketen in den Orbit.

WordPress Responsive Images, secret und sizes

WordPress lädt das Bild in der vollen Auflösung und erzeugt davon einen Stapel unterschiedlicher Auflösungen. Welches der acht runtergerechneten Fotos erscheint dann auf welchem Monitor?

CSS vh und vw für Breite, Höhe und Schriftgrößen

CSS Größen schöpfen aus einem großen Fundus: Pixel oder Point, EM oder EX oder REM, Prozent, larger oder smaller.
vw und vh ähneln den Prozentangaben, aber sie beziehen sich auf den Viewport und nicht auf das umfassende Element.

Schöner Drucken – Druckvorschau in der Browser-Console

Die Druckversion der Webseite ist das Waisenkind und Mauerblümchen der Stylesheets, dabei gibt es viele Anwendungen, die nach einer liebevolleren Darstellung auf dem Papier dürsten.

Testen mit Android- / iOS-Simulatoren

Simulatoren / Emulatoren geben einen besseren Einblick, wie die Webseite auf einem iOS bzw. Android-Gerät aussieht, aber sie brauchen einen »Anlauf«.

Gleich mittenrein

Die Brutstätten von Spam und Angriffen

Der überwiegende Teil der Spam-Mail kommt aus den Datencentern. Von dort aus senden Spammer mit ganzen Clustern von IP-Adressen ihre Fake-Emails.

Bilddatenformate: AVIF ist das neue JPEG + PNG + WebP

Hans Dampf für Fotos auf Webseiten ist immer noch JPG – seit nahezu 30 Jahren. AVIF ist ein neues Komprimierungsverfahren, das Fotos bei gleicher Qualität besser komprimiert. Ladezeit ist Trumpf.

Loading Lazy

Anfang 2020 ist das HTML-Attribut loading in den Standard übernommen worden. loading lazy weist den Browser an, Bilder erst zu laden, wenn sie in den ViewPort kommen, um den Seitenaufbau zu forcieren und Bandbreite zu sparen.

flex-grow, flex-shrink, flex-basis für Zeilen in Spalten

Spalten gleicher Höhe sind das Trauma der Webdesigner. Der Gutenberg-Editor liefert dank CSS flex und CSS grid Spalten gleicher Höhe, aber die Zeilen der Spalten variieren je nach Inhalt. flex-grow, flex-shrink und flex-basis bringen die Zeilen auf eine Höhe.

Programmierseelsorge: Hilfe bei kleinen Projekten

Programmier-Sprechstunden und Webseiten-Seelsorge habe ich im ersten Lockdown angesetzt und festgestellt: Das bringt auch mir was.

CSS: Schriftgröße mit vw anpassen

Am Anfang war der Pixel … das war einfach (vergessen wir mal, dass es auch pt gab). Heute haben wir einen ganzen Keller voller Maßeinheiten für Schriftgrößen, Abstände, Breite und Höhe von Elementen.