Der kleine @font-face Jedi

Wusstet ihr eigentlich das der Netscape 4 im Jahre 1994 schon eine Unterstützung für Webfonts hatte .. auch der IE4 hatte (zugegebenermaßen) seine eigene Implementation .. auch im CSS2 Standard waren Webfonts vorgesehen .. in CSS3 werden sie nun prinzipiell unterstützt ..

Doof nur das die Unterstützung in den verschiedenen Browsern leicht SCHEISSE ist. Ein Grund wieso Webfonts ungern eingesetzt werden.

Wie Wo Was?

Grundsätzlich gibt es 4 Font Formate … da wäre EOT (Embedded Open Type) welches der Internet Explorer unterstützt. Dann wäre da WOFF (Web Open Font Format ) welches Chrome, Firefox und Opera unterstützen. TTF (True Type Font) wonach Safari und Android lechzen .. und zu guter letzt noch SVG (Scalable Vector Grafik) .. mehr oder weniger ein Fallback für moderne Browser .. und die Wahl von iOS vor Version 4.2.

Der Nachteil wenn man nun alle 4 Fonts anbieten will? 4 einzelne Requests werden abgesetzt und die Dateigrößen sind auch nicht zu verachten.

Je nachdem wie viele Zeichen der Font unterstützt liegt man bei Dateigrößen von 30 – 400 KB. Wenn man also nur 2 Schriftarten einbindet und diese je 4 mal bereithält kann man schnell bei 1 MB download nur für Fonts liegen ..

Ungeachtet der ganzen Limits hat Jake Archibald auf der Fronteers 2011 aber einen Weg vorgestellt wie man Fonts quasi bulletproof bis hinunter zum IE6 einbinden kann.

Best Practice @font-face

Ich habe das @font-face Beispiel aus seiner Präsentation mal nachgebaut: Hier das HTML, und hier das CSS File.

Hier der zentrale Code Schnipsel …


@font-face {
   font-family: 'blue-serif';
     src: url('kreon.eot'); /* IE9 compatibility mode */
     src: url('kreon.eot#') format('embedded-opentype'), /* IE6-8 # -> IE9 Format */
          url('kreon.woff') format('woff'), /* Firefox, Chrome, Opera */
          url('kreon.ttf') format('truetype'), /* Safari, Android, iOS */
          url('kreon.svg#blue-serif') format('svg');  /* iOS < 4.2 */
}

Warum 2 Sourcen, wieso ein Hash hinter dem zweiten EOT .. und warum genau die Reihenfolge könnt ihr Jakes Präsentation entnehmen.

Fronteers 2011

Long Time – No See .. ich komme hier gerade wenig zum bloggen .. aber das ändert sich sicher auch mal wieder. Anfang des Monats hat mich mein Arbeitgeber .. die 1&1 Internet AG nach Amsterdam auf die Fronteers geschickt .. und ich finde dazu kann ich auch was erzählen.

Die Fronteers ist die Konferenz in Europa die am meisten Stil hat 🙂 sie richtet sich ausdrücklich an Webdeveloper .. und so saß ich zwei Tage im Tuschinski Theater in Amsterdam und habe mich beeindrucken lassen. Referenten waren unter anderem John Resig (LeadDev jQuery) Bruce Lawson (Opera Web Evangelist), Tab Atkins (Google Web Standards Hacker), Christian Heilmann (Mozilla Developer Evangelist), Lea Verou (CSS3 Guru) ..

Folgende Vorträge gab es an den zwei Tagen:

  • Aral Balkan – The Future is Native
  • Derek Featherstone – Accessibility for the Modern Web
  • Lea Verou – CSS3 Secrets: 10 things you might not know about CSS3
  • Bruce Lawson – HTML5 Semantics: you too can be a bedwetting antfucker
  • Stephen Hay – Go with the flow
  • Tab Atkins – The Future of CSS – Current Experiments and Near-Future Reality
  • Leslie Jensen-Inman – Passion. Purpose. Promise. Pursuit.
  • Alex Russell – Web Components and Model Driven Views
  • Divya Manian – The New Developer Workflow
  • Robert Nyman – HTML5 Forms – KISS time
  • Seb Lee-Delisle – CreativeJS – beauty in the browser
  • John Resig – jQuery and the Open Source Process
  • Jake Archibald – In your @font-face
  • Christian Heilmann – The prestige of being a web developer

Ich werde nun nicht jeden Vortrag im einzelnen eingehen (keine Angst) .. aber ich picke mir mal ein paar heraus die ich am besten fand:

Die Eröffnung:

Aral Balkan hat gleich als erster Speaker die Messlatte ziemlich hoch gelegt. In seinem Vortrag The Future is Native ging es grundlegend erst mal um Web vs. Native .. ihr kennt die Diskussionen sicher .. viele Webentwickler würden am liebsten alle nativen Applikationen los werden und alles mit Webapplikationen abbilden.

Allerdings haben beide Konzepte ihre Vor- und Nachteile:

  • Nativ ist näher am Betriebssystem, kann lokal installiert werden, funktioniert auch ohne Netzzugang etc.
  • Web braucht keine manuellen Updates, funktioniert OS übergreifend, ist immer unter einer URL zu finden ..

Google und diverse weitere Firmen verfolgen dieses Konzept auch konsequent .. der Streit entbehrt allerdings jeder Grundlage und darauf wollte Aral Balkan
hinaus. Es geht weniger darum welche Technologie man einsetzt sondern darum dem User eine einfache, funktionierende und selbsterklärende Applikation für sein Problem
zu liefern. Er illustrierte das sehr Anschaulich an den Fahrkartenautomaten in Norwegen die keine Bedienungsfehler zulassen vs. Fahrkartenautomaten in Schweden die mit Features so überfrachtet sind, daß jeder einzelne nochmal eine Hilfe Taste hat um sich mit einer Hotline verbinden zu lassen.

Sein abschließendes Plädoyer: Don’t compete on features, compete on user experience.

Die Tech Talks:

  • Bruce Lawson ging auf die Semantik der HTML5 Tags ein, was ist neu, was fällt im Vergleich zu HTML4 oder XHTML weg, welche Elemente sind mit Vorsicht zu genießen, wie strukturiert man die neuen Elemente, Einsatz von H Tags innerhalb usw. Sein Fazit: The Golden Rule: There is no Golden Rule und Haarspalter kann sowieso keiner leiden 🙂
  • Das Thema von Stephen Hay war das Layout und der Flow. Im Vergleich zu Print hat es das Web immer noch sehr schwer exotische Layouts darzustellen. Ein klassisches Multi-Colum (wie bei einer Zeitung) kann man nur mit sehr viel Aufwand umsetzen. Er zeigte hier diverse Lösungsansätze mit Flexbox, CSS-Exclusions und Grid Layouts.
  • Tab Atkins zeigte uns was zukünftig mit CSS geplant (needs Webkit) ist und woran er in der CSS Spec arbeitet. Dabei freu ich mich besonders auf Elemente wie VW und VH die einen die Höhe und Breite des Viewports ermitteln lassen. Mit calc() soll man zukünftig in CSS rechnen können, mit cycle() über verschachtelte Elemente iterieren. In CSS4 plant man neue Selectoren und Pseudoelemente z.B. :any-link und :local-link. Außerdem natürlich die lange erwarteten CSS Variablen -> @variable $farbe #fff / Benutzung: color: $farbe;
  • Robert Nyman hat sich HTML5 Forumlare vorgenommen. Neue Attribute, neue Elemente, alles eine schöne neue Welt .. aber mit unterschiedlichen Interpretationen der verschiedenen Browser, das Styling per CSS funktioniert auch nicht übergreifend. Fazit: HTML5 Formulare in all ihrer Pracht, in allen modernen Browsern zu nutzen kann zu akuten Schmerzen führen.
  • Jake Archibald zeigte dann die Anwendung von Custom Fonts und wo die Tücken liegen wenn man diese auch in alten Browsern einbinden will. Der Vortrag war alles in allem ein Best Practice Workshop für die Anwendung von Font-Face.

Der Beste:

Seb Lee-Delisle zeigte mit CreativeJS ziemlich eindrucksvoll was mit ein bischen JavaScript im Browser möglich ist. Dabei ging es in erster Linie um optische Effekte und JS Programmierung für Spiele. Den Source Code seines Particle Beispiels findet man auf Github.

Der zweite Teil war dann ein Experiment:

Alle Smartphones und Tablets im Saal konnten sich lokal auf einen Server verbinden. Dann wurden Farbfolgen abgespielt und Seb versuchte dadurch die Positionen der
Geräte herauszubekommen .. aber seht es euch selbst an:

Der Abschluss:

Chris Heilmann rief uns am Ende allen nochmal ins Gedächtnis was es heißt ein Webdeveloper zu sein. Wir neigen dazu immer alles neu machen zu wollen und den eigenen Code für das Maß aller Dinge zu halten .. aus seiner Sicht ein ungenügender Ansatz .. seine Forderung an uns:

  • Reuse and improve – benutzt bekannte Techniken und entwickelt sie weiter
  • Learn from others – schaut euch an wie andere ihre Probleme lösen
  • Be inventive – denkt außerhalb von Grenzen wie ihr etwas erledigen könnt
  • Be gorgeous – gebt euer Bestes zu geben und macht es so schön wie möglich
  • Code = Poetry – nur dann können andere daraus lernen
  • Be open / Don’t be out for blood – hört auf zu trollen und zu bashen denn das würgt Innovationen ab
  • Join the band and collaborate – sucht euch Leute mit ähnlichen Ideen zum Zusammenarbeiten
  • Be your own teacher – bringt euch Neues selbst bei weil es der beste Weg ist um zu lernen
  • Fill the blanks – schaut wo es nochwas zu tun gibt uns setzt euch dran
  • Use what you heard – lasst euch nicht nur von Konferenzen inspirieren sondern setzt das Gehörte ein
  • Repeat the message – Überzeugt eure Vorgesetzten vom Einsatz neuer Technologien
  • Collect good stories – Erzählt eure Geschichten