Hohoho.

Ich habe mir gestern und heute endlich mal wieder Zeit für die Renovierung der Bloghütte hier nehmen können und als Resultat gibt es nun, frisch von der Webdeveloperquengelwarenauslage: Die Webrocker-Headergrafik ist nun mit SVG realisiert und die Hauptnavigation habe ich von float auf Flexbox umgebaut. Ha!

Warum, fragt sich der werte Blogbesucher, sieht doch fast genauso aus wie vorher.
Jahaa, sagt der bescheidene Blogbesitzer, aber unter der Haube ist das nun weniger Code (die Lösung vorher war ehrlich gesagt sehr an den Haaren herbeigezogen, auch wenn es so als Experiment schon cool war, die Grafik komplett mit HTML-Elementen und CSS zu bauen - aber mich hat die ganze Zeit gestört, dass ich struktur- und semantikrelevante Elemente "nur" zur Erstellung eines "Schmuck"Elements verbogen habe.

Ja aber, sagt der werte Blogbesucher, wenn doch nur Deko, warum dann nicht einfach ein Bild?
Ja nun, sagt der bemühte Blogbesitzer, ein einfaches Bild war mir zu wenig Funktionalität, sieht auf hochauflösenden Displays nicht so knackig aus und/oder brauch halt einiges an Datenmengen. Da gefällt mir das so schon viel besser. :-)

Für den Headeraufbau und die damit verbundenen Experimente, ob und wie man da mit Positionierung und CSS-Styling eingreifen kann, habe ich mächtig mit Codepen rumgerührt und musste auch mal kurz auf Twitter um einen Tip dackelblicken (danke Sven!), aber dafür, dass ich so lange einen Bogen um das SVG-Thema gemacht habe, klappte das erstaunlich gut.

Der Code unter der Haube ist noch etwas unaufgeräumt, bin ich aber dran.

Update 15.12.15

Ich habe noch ein wenig im SVG Code rumgeräumt und mit Hilfe von "defs" und "use" Elementen den Code knapp halbiert, das ist ja schon mal fein. Nicht so richtig fein ist aber, dass - zumindestens hier gerade im Firefox - der linke Tonabnehmer (der schräg steht) nicht mehr so schön glatt gerendert wird, wie die beiden anderen. Das war vorher, als diese drei Dinger "echte" SVG Pfade waren, schöner. Jetzt gibt es im SVG nur einen "echten" Pfad und die anderen beiden sind per "use" erzeugte Referenzen, und die Referenz für den linken Tonabnehmer ist mit 'transform="rotate()"' schräg gestellt. Und da scheint das Gleiche zu passieren, wie bei einem CSS Transform - auch da gibt es bei eigentlich glatten Elementen "Mäusezähnchen". Mal kucken, vielleicht nehme ich die Referenz für den linken Tonabnehmer wieder raus und ersetze es durch den "echten" Pfad - Nee, ich habe gerade einenA/B test gemacht, egal ob "echt" oder "Referenz", bei beiden gibt es leichte "Mäusezähnchen", es bleibt also beim aktuellen, schlankeren SVG Code.