CSS, HTML und Javascript mit {stil}

SVG-SMIL-Animationen in Chrome

SVG Animationen mit SMIL: Delphin kreist vor der untergehenden Sonne

Chrome 45 hatte Anfang 2015 angekündigt, SMIL-Animationen den CSS-Animationen und Javascript zuliebe auf „Deprecated (abgelehnt)“ zu setzen und eine Warnung in die Console gesetzt. Aber SMIL dreht weiterhin seine Runden in Chrome. Die Ablehnung ist nie in Kraft getreten und wurde inzwischen auf Eis gelegt. Diese Taktik heißt »Aussitzen« und «Stilllegen«.

SVG-Upload in WordPress 4.7.2

WordPress 4.7.1 SVG Upload

Immer wieder auf dem Programm: der SVG-Upload in WordPress. Nachdem SVG in WordPress 4.7.1 »aus Sicherheitsgründen« nicht mehr hochgeladen wurde, hat WP 4.7.2 das Tor für SVG erneut geschlossen.

Infografik: Fotos und Grafik optimieren

JPEG für Webseiten optimieren

Fotos und Grafiken werden immer für das Internet optimiert. Früher wurden Bilder so klein wie Briefmarken in die Webseite gesetzt, um die Ladezeiten kurz zu halten.

Motion Path: Animation entlang eines Pfades

CSS Transition und Animationen bewegen ein Element auf geradem Weg von A nach B, aber nicht entlang einer S-Kurve, einer Acht, halten nichts von einem Orbit oder einer Schleife.

Aus der Sammlung der Sprüche

Heute muss ein Webdesigner der MacGyver aus der TV-Serie der 80er sein, und aus einem Gummiband und drei Dosen ein flugtaugliches Flugzeug konstruieren können.

Tables: The Next Evolution in CSS Layout, Kevin Yank, 2008

Domain-Umzug: Warten auf die DNS-Server

Webseite umziehen und DNS-Server

Beim Umzug eines Webseite auf einen anderen Server entsteht eine mehr oder minder lange Wartezeit bis alle DNS-Server die neue IP-Adresse registriert haben.

Spielereien mit Formularen: Icons für option-Tag

Viele Formular-Elemente widersetzen sich hartnäckig allen Annäherungen seitens CSS – sehen wir mal von border-radius und font-size für Eingabefelder ab. Etwas appearance: none und ein paar Tricks holen Bilder in das option-Tag.

SVG SMIL Animationen

Eigentlich wären SVG SMIL-Animationen ein perfekter Nachfolger für die animierten GIFs und fast vergessenen Flash-Animationen. Sie brauchen kein Beiwerk, kein Javascript, kein CSS. Alles in einer Datei.

Ladezeit: SVG optimieren für die Webseite

SVG optimieren: Dateigröße verkleinern, überflüssige Attribute entfernen: SVG optimiert

SVG-Grafiken aus Inkscape und Adobe Illustrator sind vollgepackt mit Attributen, die für die Anzeige in Webseiten nicht gebraucht werden und die Ladezeit verlängern. Wie läßt sich SVG optimieren?

Pseudo-Elemente mit querySelector

Click me, Touch me

Bislang galt, dass Javascript nicht auf Pseudo-Elemente wie ::before und ::after zugreifen kann, weil sie nicht im DOM liegen. Javascript querySelector hat eine Lösung.

Font in die CSS-Datei einbetten

Webfonts lassen sich auf die Zeichen reduzieren, die tatsächlich benötigt werden, und dann wie Bilder als Base64 codieren.

SVG in WordPress laden

Für den Einsatz von SVG in WordPress muss der Media Upload überredet werden, SVG als zulässigen Mime-Type anzuerkennen. Das passiert mit zwei oder drei Zeilen in der Datei functions.php und ist schon lange bekannt.