CSS, HTML und Javascript mit {stil}

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

Pseudo-Elemente wie ::before und ::after ersparen zusätzliche HTML-Elemente, aber früher galt, dass Javascript nicht auf Pseudo-Elemente wie ::before und ::after zugreifen kann, weil sie nicht im DOM liegen. Javascript querySelector und getComputedStyle bilden zusammen eine Lösung.

Font per base64 in CSS 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. Inzwischen gibt es Plugins, die Sicherheit vor Cross Scripting-Einschlüssen bieten. In Drupal 8 reicht das IMCE-Modul, um SVG in Seiten und Beiträge zu laden, und zwar allem Anschein nach ebenfalls bereinigt.

CSS: Text mit Verlauf füllen

SVG Text mit Bild bzw. Verlauf / Gradient füllen

CSS color weist einem Text Farbe zu, aber keinen Verlauf, denn gradient ist ein Wert für die Eigenschaft background.

Open Source – Code-Editor Brackets

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.

Eine WordPress-Datenbank für Zwei

Zwei WordPress, eine Datenbank

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.

SVG image-Tag – Grafik als PNG für alte Browser

SVG in einem image-Tag

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 organisieren und aufräumen

CSS-Dateien entwickeln sich schnell zu einem brodelnden Hexenkessel. Sie wachsen, werden unüberschaubar und versanden in Redundanz. Wie behalten wir die Übersicht und wie finden wir das CSS above the fold?

Bad Bots oder wie man Bots fern hält

Bad Bots, Hacker, Spammer

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.

Chrome zieht MathML ab

MATH ML Formeln in HTML-Seiten

Vor gut einem Jahr habe ich mich noch gefreut, dass HTML5 MathMl so einfach integriert war und ich mir endlich die Bitmaps für Formeln sparen konnte. Aber IE will keine Formeln und Chrome zieht MathML ab.