Wenn man eine neue Web­site erstel­len möch­te, wie ich es in den letz­ten Tagen mal wie­der getan habe, steht man immer wie­der vor der Ent­schei­dung, ob man auch älte­re Brow­ser­ver­sio­nen voll­stän­dig unter­stüt­zen möch­te. Dass der Inter­net Explo­rer 6 nicht mehr zu die­ser Rie­ge gehört, dar­über dürf­ten sich nahe­zu alle Web­de­si­gner einig sein, aber was ist mit den Ver­sio­nen 7 und 8 des Brow­sers aus Red­mond? Und wie steht es um die älte­ren Ver­sio­nen von Fire­fox, Ope­ra, Chro­me und Safari?

Mei­nem Kennt­nis­stand nach ist bei vie­len opti­schen Schman­kerln, wie bspw. dem text-shadow, nur der Inter­net Explo­rer wirk­lich kri­tisch. Alle ande­ren Brow­ser, allen vor­an die Web­kit-Brow­ser Safa­ri und Chro­me, haben damit schon seit Ewig­kei­ten kei­ne Schwie­rig­kei­ten mehr. Ich weiß, der CSS3-Stan­dard ist noch gar kei­ner, da er offi­zi­ell noch nicht ver­ab­schie­det wur­de. Blöd ins­be­son­de­re des­we­gen, weil man für vie­le der CSS3-Attri­bu­te brow­ser­spe­zi­fi­sche Prä­fi­xe ver­ge­ben muss, was die erfolg­rei­che Vali­die­rung eines CSS3-Style­she­ets ver­hin­dert. Wenn ich mich recht ent­sin­ne, war bspw. der text-shadow mitt­ler­wei­le auch ohne Prä­fix unter den Web­kit-Brow­sern und Ope­ra nutz­bar, Fire­fox 3.6 besteht wei­ter­hin auf das Prä­fix. Mit der Beta des Fire­fox 4 habe ich es noch nicht getes­tet. Aber gut, wenn mal der eine oder ande­re Effekt nicht ange­zeigt wird, bricht einem das nicht gleich die Bei­ne, auch schlech­te und alte Brow­ser stel­len die Sei­te wenigs­tens dar.

Anders sieht es mit der Ver­wen­dung von HTML5 aus. Mei­ne Sei­te weist als DOCTYPE HTML5 auf. Ver­wen­den tue ich aber kei­nen der neu­en HTML5-spe­zi­fi­schen Tren­ner wie <arti­cle>, <sec­tion>, <hea­der> oder <foo­ter>, da, wenn der Brow­ser gar kein HTML5 ver­steht, die Sei­te schlicht und ergrei­fend gar nicht oder voll­stän­dig falsch ange­zeigt wird. Ich weiß, es gibt Java­Script-basie­ren­de Hacks, die das Pro­blem behe­ben, aber was ist, wenn der Benut­zer auch noch zusätz­lich Java­Script deak­ti­viert hat :-D? Wirk­lich scha­de, dass ich kein HTML5 ver­wen­den “durf­te”, ich hät­te es zu gern getan. Von den Java­Script-basie­ren­den Hacks hal­te ich aber nicht viel. Die rest­li­chen Scripts, die in mei­ner neu­en Sei­te ein­ge­bun­den sind, sind von eher unkri­ti­scher Natur. Das jQue­ry-Plugin Scroll­To erzeugt einen wei­che­ren Scroll­vor­gang als das nor­ma­le, Anchor-basie­ren­de Scrol­len und Fan­cy­box zeigt die Bil­der schick im Groß­for­mat an. Aber wenn die­se bei­den Scrip­te aus­ge­schal­tet sind, ist es auch egal.

Posi­tiv über­rascht war ich, dass das Ein­bet­ten von Fonts mitt­ler­wei­le (fast) tadel­los funk­tio­niert. Ein­zig und allein die Mobil­ge­rä­te zei­gen die ein­ge­bet­te­ten Fonts nicht an, so wenigs­tens gese­hen auf mei­nem iPho­ne und einem iPad. Der Inter­net Explo­rer kann das, oh Wun­der, schon seit Ewig­kei­ten, näm­lich seit der Ver­si­on 4, wenn auch mit einem spe­zi­el­len Font-For­mat, EOT (Embed­ded Open Type). Alle ande­ren Brow­ser mamp­fen brav mei­ne TTF- und OTF-Datei­en. Bis­her steht aber noch ein Test mit Alt-Brow­sern aus, getes­tet habe ich wirk­lich bis­her nur mit aktu­el­len Brow­sern auf mei­nem Mac. Wobei mir gera­de auf­fällt, dass ich die EOT-Ver­sio­nen mei­ner bei­den Fonts noch gar nicht erstellt und ein­ge­bun­den habe. Soll­te ich wohl mal flott nachholen.

Da wir gera­de beim The­ma sind, hier ein klei­nes Bei­spiel für einen gül­ti­gen Ein­trag einer @font-face-Deklaration in einer CSS-Datei:

https://gist.github.com/468010

Die in die­sem Bei­spiel ver­wen­de­te Schrift, die ich dann doch nicht auf mei­ner Sei­te ver­wen­det habe, habe ich im Übri­gen bei The League of Mova­ble Type gefun­den. Eine wei­te­re sehr schö­ne Quel­le für offe­ne Fonts ist Font Squir­rel, die auch die Schrif­ten von The League of Mova­ble Type anzei­gen. Um die Schrif­ten von TTF in EOT zu bekom­men, habe ich den ttf2eot-Kon­ver­ter ver­wen­det. Die Kon­ver­tie­rung mei­ner OTF-Schrift ins EOT-For­mat hat der Online Font Con­ver­ter für mich über­nom­men. Ent­spre­chend der zuvor gezeig­ten Nota­ti­on kann die Schrift nun ganz regu­lär über eine font-fami­ly-Anwei­sung ver­wen­det werden.

Wie hal­tet ihr es mit der Ver­wen­dung von CSS3, HTML5 und sons­ti­gem neu­mo­di­schem Schnick­schnack? Ver­wen­den oder abwarten?