CSS, HTML und Javascript mit {stil}

querySelector für Pseudo-Elemente

Pseudo-Elemente mit querySelector

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.

Fonts in CSS einbetten

Webfonts in CSS einbetten
Schriften / Webfont-Fonts lassen sich Base64-encodieren. Heraus kommt dabei ein dicker Schwall aus Buchstaben und Ziffern, der in die CSS-Datei gesetzt wird und wie das Base64-Bild einen HTTP-Request erspart.

SVG in WordPress

SVG in WordPress laden
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.

Code-Editor Brackets

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

Zwei mal 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.

HSL und HSB: kleiner Bruderkrieg

HSL und HSV: Ähnlich, aber nicht dasselbe
Bildbearbeitungsprogramme wie Adobe Photoshop bereiten uns eine Überraschung, wenn wir Farben im HSV bzw. HSB-Farbraums ausgesucht haben: Auf der Webseite entsteht eine Abweichung.

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.

Safari zeigt eingebettete Bitmap-Bilder in SVG nicht an

SVG ist zwar Vektorgrafik, aber es gibt auch gute Gründe, in einer Vektorgrafik auf ein Bitmap-Bild 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 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.

Chrome zieht MathML ab

Vor gut einem Jahr habe ich mich noch gefreut, dass HTML5 MathMl so einfach integriert und ich mir endlich die Bitmaps für Formeln sparen kann.

CSS Schriftgrößen: Immer ein Griff ins Wespennest

CSS font-size kann aus einem großen Fundus möglicher Maße schöpfen: Pixel oder Point, EM oder EX oder REM, Prozent, larger oder smaller. Jetzt kommt der Viewport mit vw und vh ins Spiel.

eBooks: HTML, CSS und Javascript

Digitale Bücher gibt es seit 2002, aber wie einst Webseiten dümpelten digitale Bücher ein paar Jahre im Dämmerschlaf. Erst mit dem Erfolg des iPads begann das Interesse an eBooks.

Javascript: Fehlersuche mit der Konsole

Nie war sie so wertvoll wie heute – die Browser-Console ist das Arbeitspferd bei der Analyse des Scriptablaufs und der Fehlersuche. Firefox hat eine Console, Chrome und Safari sitzen gemeinsam auf der Webkit-Console.

Javascript Animationen

Weiche CSS-Transitionen & Transformationen für jQuery:
Transit

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