johannes.jarolim.com » CSS

@font-face und Mobilbrowser

Johannes — Sun, 22 Jan 2012 15:45:03 +0000

Ein kleiner Tip: Manche Mobilbrowser (Beispiel: Der Standard- Systembrowser auf dem Samsung Galaxy Tab 10.1) haben Probleme mit relativ (zur Position des Stylesheet) verlinkten Font-Dateien.

Die Browser sind anscheinend nicht in der Lage, die Font-Dateien zu finden und weichen bei der Darstellung auf den definierten Fallback bzw. Systemfonts aus, was in manchen Layouts nicht so nett ausschauen dürfte ;-)

Beispiel: Die Verzeichnisstruktur einer kleinen Seite schaut folgendermaßen aus:

/
/index.html
/css/style.css
/css/fonts/coolfont.eot
/css/fonts/coolfont.woff
/css/fonts/coolfont.ttf
/css/fonts/coolfont.svg

Wir binden die Schriftart in der style.css mit CSS-Konformen Pfaden ein (relativ zum CSS-File), Überschriften der Kategorie 1 sollen in Coolfont dargestellt werden – Als Fallback-Schriftfamilien haben wir arial und sans-serif definiert.

@font-face {
  font-family: 'CoolFont';
  src: url('fonts/coolfont.eot?#iefix') format('eot'),
       url('fonts/coolfont.woff') format('woff'),
       url('fonts/coolfont.ttf')  format('truetype'),
       url('fonts/coolfont.svg#CoolFont') format('svg');
}

h1 { font-family: CoolFont, arial, sans-serif; }

Ergebnis: Desktopbrowser stellen die Schriftart korrekt an – der Browser auf meinem Galaxy Tab stellt die Überschriften in arial an.

Gibt man stattdessen absolute Pfade vom DocumentRoot der Seite aus gesehen an, funktioniert es:

@font-face {
  font-family: 'CoolFont';
  src: url('/css/fonts/coolfont.eot?#iefix') format('eot'),
       url('/css/fonts/coolfont.woff') format('woff'),
       url('/css/fonts/coolfont.ttf')  format('truetype'),
       url('/css/fonts/coolfont.svg#CoolFont') format('svg');
}

Hope this helps: enjoy!

Fine grained CSS Conditional Comments für Internet Explorer

Johannes — Thu, 22 Oct 2009 09:45:57 +0000

In Ergänzung zu meinem letzten Artikels bzgl. IE Conditional Comments und deren listiger Nutzung finde ich folgende Verfeinerung sehr sinnvoll:

Manchmal benötige ich zusätzlich zur Identifizierung des Internet Explorers noch die Version, um den Stylesheet noch feiner kontrollieren zu können. Das lößt man am besten folgendermaßen:


  
  
  
    ... Der Inhalt ...

Im CSS selber kann man sich dann entscheiden, ob man den Internet Explorer generell behandelt, nur eine bestimmte Version oder beides:


/* Standard Definition für "brave" Webkit-Browser */
.definition {
  margin:10px;
}

/* Wir schreiben die Definition für alle IE-Versionen um */
#IE .definition {
  margin:15px;
}

/* Schlußendlich gehen wir ins Detail */
#IE.IE6 .definition {
  margin:20px;
}

IE Conditional Comments: Weitere listige Nutzung

Johannes — Fri, 12 Dec 2008 09:45:29 +0000

Auf bueltge.de hat Frank schön zusammengefasst, wie man conditional comments nutzen kann, um zusätzliche Stylesheets einzubinden, die nur der IE interpretiert. Zusätzlich zeigt er noch Wege mittels PHP und JavaScript auf, um solch eine Browserweiche umzusetzen.

Mich interessierte nun aber nur der Part mit den Conditional Comments, da es meiner Meinung nach eine weitere sehr listige Verwendungsweise dafür gibt.

Die Standardverwendung

Dazu nochmal die fast überall notierte Verwendungsweise:

Man gestalte eine Internetseite, setze sie in HTML und CSS um, sodaß sie in Standardbrowsern funktioniert.
Jetzt schaue man sich die Seite im Microsoft Browser an – Sie wird normalerweise nicht korrekt dargestellt.
Man entwickelt CSS Ergänzungen in einem eigenen CSS File, die Fehler in der CSS Interpretation des IE ausbügeln/umgehen.
Man bindet dieses zusätzliche CSS via Conditional Comment beispielsweise so in das HTML-Dokument ein:

Soweit so gut.

Ich persönliche benutze Conditional Comments sehr gerne: Die einzige Alternative dazu sind Inline Hacks (wie zB. der Underscore Hack), die das CSS meiner Meinung nach unlesbar machen. Zusätzlich habe ich bei solchen “undokumentierten” Hacks immer ein mulmiges Gefühl in der Bauchgegend: Funktionieren diese auch im nächsten IE Browser?

Nachteil der Standardverwendung

Abgesehen davon, dass Conditional Comments dem Designer ein mächtiges Werkzeug in die Hand geben, um Layouts sauber auch im IE zum laufen zu bekommen, hat die Standardverwendung (konditionale Stylesheeteinbindung) auch einen Nachteil:

Die Trennung von CSS Angaben für das selbe Element in mehrere Files.

Möchte man ein Element ändern, muß man die Änderung zuerst im Defaultstyle durchführen. Danach muß man noch prüfen, ob die Änderung auch im IE erscheint und dann dementsprechend im IE-Conditional-Comment-Style schauen, ob das Element dort überschrieben wurde oder nun überschrieben werden muß. Zwei Files, zweimal suchen.

Das kann meiner Erfahrung nach besonders bei komplexen Stylesheets einiges an Zeit konsumieren.

Der Weg des listigen Designers

Nun kann man Conditional Comments ja eigentlich grundsätzlich dazu nutzen, um HTML Code einzubinden, der dann nur im IE angezeigt wird – Man ist ja nicht auf Stylesheet-Einbindungen beschränkt.

Der meiner Meinung nach sehr listige Weg ist nun, dass man ein zusätzliches IE-Wrap-Element um den gesamten Content legt:

...

Dies erlaubt nun die saubere und gut lesbare Überschreibung von CSS nur für IE – Im gleichen CSS am selben Ort:

...
#content { background-color:red; }
#IE #content { background-color:#ff0000; }
...

Man sieht den Trick und freut sich: Sauberes und super lesbares CSS für zwei Browser in einem zentralen File ;-)

Mein Fazit: Conditional Comments geben dem Designer ein mächtiges Werkzeug in die Hand, um Layouts mittels eines “Standardwegs” auch im IE zum Laufen zu bekommen. Die an den meisten Orten dokumentierte Standardnutzung bringt meiner Meinung nach unnütze Komplexität in CSS-Definitionen, da Elemente teilweise getrennt in mehreren Files definiert werden müssen. Ein zusätzlicher HTML Request verlangsamt die Seitendarstellung.

Die Benutzung von Conditional Wrapper Elementen erlaubt eine gut lesbare und standardkonforme Definition von IE-Styles am richtigen Ort.