CSS, HTML und Javascript mit {stil}

SVG SMIL Animation

SVG SMIL Animationen

Eigentlich wären SVG Animationen mit »SMIL« ein perfekter Nachfolger für die animierten GIFs und die schon fast vergessenen Flash-Animationen, denn sie brauchen kein Beiwerk, kein Javascript, kein CSS. Alles in einer Datei. Eine Browserlinie spielt allerdings nicht mit. Wer dreimal raten muss, liegt richtig: IE9, IE10, IE11 lassen die Finger von SMIL. Microsoft hegt nicht […]

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 auf dem Monitor nicht gebraucht werden, die Ladezeit unnötig verlängern und den Browser überflüssigen Code vorsetzen.

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. querySelector schafft dieses kleine Kunststück aber doch – mit etwas Hilfe von getComputedStyle.

Font in die CSS-Datei einbetten

Fonts in CSS-Datei einbetten
Schriften / Webfonts lassen sich – genau wie Bilder – durch Base64 codieren. Dabei entsteht ein dicker Schwall aus Buchstaben und Ziffern, der in die CSS-Datei kopiert wird. Bei eingegrenzten kleinen Fonts – wenn nur wenige Zeichen gebraucht werden – spart das Einbetten des Fonts den zusätzlichen HTTP-Request zur Schriftdatei.

SVG in WordPress laden

SVG in Wordpress
Um SVG in WordPress einzusetzen, muss der Media Upload von WordPress überredet werden, SVG als zulässigen Mime-Type anzuerkennen. Das passiert mit zwei oder drei Zeilen in der Datei functions.php des WordPress-Themes 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.
Zwei WordPress, eine Datenbank

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 in einem image-Tag

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-Tags mit einem SVG-image-Tag geladen.
Hexenkessel: CSS organisieren, strukturieren, CSS-Ladezeit verbessern

CSS organisieren und aufräumen

CSS-Dateien entwickeln sich schnell zu einem Hexenkessen, sie wachsen, werden unüberschaubar und versanden in Redundanz. Wie kann man CSS strukturieren, organisieren und aufräumen, damit die CSS-Datei ein Jahr und drei Projekte später besser lesbar ist? Welche Mittel halten die CSS-Ladezeit im Zaun?
bitmap-in-svg-in-safari

Safari zeigt eingebettete Bitmaps in SVG nicht an

SVG ist zwar Vektorgrafik, aber es gibt gute Gründe, in einer Vektorgrafik auf eine Bitmap zurückzugreifen. Wird das SVG-Bild inline in das HTML-Dokument gesetzt, zeigt Safari die Grafik korrekt an. Auch in einem object-Tag zeigt Safari die Bitmap im SVG.
Bad Bots, Hacker, Spammer

Bad Bots oder wie man Bots fern hält

Gibt es ein Gegenteil von Suchmaschinen-Optimierung? Bots und Spider machen auf vielen Webseiten mehr als die Hälfte des Traffics aus und belasten einen Server in Stoßzeiten zusätzlich.
MATH ML Formeln in HTML-Seiten

Chrome zieht MathML ab

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.

Better Simple Slideshow

Responsive Slideshow mit optionalem Swipe-Support, Full-Screen Toggle in Vanilla Javascript

Smooth Scroll

Weiches Scrollen zu Ankerlinks ohne jQuery

Komplexe Animationen

Javascript-Animationen sollen im Vergleich mit CSS-Animationen langsam sein – stimmt so nicht. Fast immer ist es der »jQuery-Faktor«. Velocityjs ist eine Javascript-Library, die sich nahtlos in jQuery einklinkt und kompexen Animationen Dampf macht.
Velocity JS

CSS grid

CSS Grid Layout Module Level 1, W3C Working Draft, 17 March 2015

Das wird wohl noch eine Weile dauern …