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.
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.
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.
Nach dem Update des WordPress-Plugins Custom Content Type Manager spuckte WordPress eine Flut von Spam-Emails aus – das Update des Plugins kam mit einem bösartigen Virus.
Velocity.js
Animationen mit und ohne jQuery – auf jeden Fall in der bekannten jQuery-Syntax.
Javascript für CSS-Animationen
Animation starten, wenn sie in den Viewport kommt
-
Javascript Easing
Easing gibt es in CSS, in jQuery und in SVG, aber in Javascript muss das Easing von Hand gestrickt werden.
-
CSS display:flex
Designierter Nachfolger für float – nomen est omen.
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.«
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.
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?
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.
Webfonts lassen sich auf die Zeichen reduzieren, die tatsächlich benötigt werden, und dann wie Bilder als Base64 codieren. Dabei entsteht ein Schwall aus Zeichen, der direkt in die CSS-Datei eingebettet wird. Bei Fonts mit wenigen Zeichen spart das Einbetten den HTTP-Request zur Schriftdatei.
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 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.
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.
Wofür könnte man zwei WordPress-Installationen brauchen, die beide auf dieselbe Datenbank zugreifen? z.B. für eine App, die nicht auf dasselbe Template zugreift, sondern ein eigenes Template bekommt.
Schöner Trick von Alexey Ten, der Bilder gleichzeitig als PNG für ältere Browser und als SVG für alle anderen in HTML einbindet: Eine SVG-Grafik wird innerhalb eines SVG-Elements mit dem SVG image-Tag geladen.
CSS-Dateien entwickeln sich schnell zu einem Hexenkessen, sie wachsen, werden unüberschaubar und versanden in Redundanz. Bei Änderungen im Layout wären wir gern ein Sherlock Holmes und folgen Spuren und Hinweisen, aber wir tappen stundenlang im Dunkeln.
Gibt es ein Gegenteil von Suchmaschinen-Optimierung? Bad Bots und Spider machen auf vielen Webseiten mehr als die Hälfte des Traffics aus und belasten einen Server in Stoßzeiten zusätzlich.