CSS, HTML und Javascript mit {stil}

6 Punkte-Infografik: Fotos und Grafik für Webseiten 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. Heute wollen wir vollformatige Fotos und große Grafiken und kämpfen weiterhin gegen die Dateigröße für JPG und PNG: Fotos und Grafiken sind die Bremse für die Ladezeit der Webseite.

Motion Path: Animation entlang eines Pfades

fly-me-to-the-moon
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. CSS kennt keine Animation entlang eines Pfades: Das gibt es erst mit Motion Path.

Domain-Umzug und Wartezeit bei den DNS-Servern

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. Wer prüfen will, wie die Seite auf dem neuen Server dasteht, muss im Ungewissen warten.

Spielereien mit Formularen: CSS für option-Tag

appearance
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.

Aus der Sammlung der Sprüche

»Heute muss ein Webdesigner die moderne Ausgabe eines MacGyver aus de 80er-Jahre TV-Serie sein, der aus einem Gummiband und drei kleinen Dosen ein funktionierendes Flugzeug konstruieren konnte.«

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

SVG SMIL Animationen

android
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

Fonts in 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

SVG in Wordpress
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.

CSS: Text mit Verlauf füllen

SVG Text mit Bild bzw. Verlauf / Gradient füllen
CSS kann einem Text Farbe zuweisen, aber keinen Verlauf. Es gibt zwar einen alten Trick mit background-clip und text-fill-color, der aber nur in einer Browserfamilie wirkt.

Open Source – Code-Editor Brackets

adobe brackets Code Editor
Brackets ist ein Code-Editor, programmiert in HTML und Javascript. Dennoch ist Brackets eine Desktop-Anwendung. Adobe hat das Projekt ins Leben gerufen und verwaltet es auf Github.