Hallo zusammen,

da ich letzte Woche bereits etwas über Browser-spezifische CSS Regeln und Fallbacks geschrieben habe, möchte ich das Thema diese Woche gerne etwas weiter vertiefen und einige weitere Regeln und Skripte vorstellen, die uns bei der arbeit behilflich sein können.

Dabei möchte ich Heute besonders auf zwei Punkte zu sprechen kommen:

• CSS Hacks, Tipps und Tricks für die alten Versionen des Internet Explorer
• Skripte die uns Browser-übergreifendes CSS generieren

Internet Explorer hacks

Da die alten Internet Explorer Versionen so ziemlich jedem Web Entwickler „hin- und wieder“ Kopfzerbrechen bereiten, möchte ich hier ein paar so genannte IE Hacks vorstellen – Das sind CSS Selektoren, die nur bei bestimmten Versionen des bekannten Browsers greifen:

/* Selektor für alle (modernen) Browser */
.normaler-selektor {
    /* ... */
}

/* IE6 hack */
* html .ie6-selektor {
    /* ... */
}

/* IE7 hack */
*+html .ie7-selektor {
    /* ... */
}

/* IE8 hack */
@media \0screen {
    .ie8-selektor {
        /* ... */
    }
}

Während diese Hacks sehr schnell einzubauen sind und ihren Job erledigen, sollte man für größere Projekte lieber auf ausgelagerte CSS Dateien setzen, welche jeweils nur Browser-spezifische Styles einbinden. Das geht zwar relativ schmerzfrei mit Hilfe der so genannten „conditional statements“, nimmt aber ein wenig mehr Zeit in Anspruch als die simplen Hacks.

So sieht das ganze in der Praxis aus:

<link rel="stylesheet" type="text/css" media="screen" href="pfad/zu/style.css" />

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="pfad/zu/ie6.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="pfad/zu/ie7.css" />
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="screen" href="pfad/zu/ie8.css" />
<![endif]-->

Darüber hinaus lassen sich die Abfragen etwas verfeinern:

• „if lt IE 8“ Für Versionen kleiner 8
• „if lte IE 9“ Für Versionen kleiner oder gleich 9
• „if gt IE 6“ Für Versionen größer 6
• „if (gt IE 5)&(lt IE 7)“ Für Versionen größer 5 und kleiner 7
• …

Einige weitere Optionen findet ihr unter About conditional comments (microsoft.com)

Browser-spezifische CSS Regeln

Ich denke die meisten unter euch kennen CSS Eigenschaften wie z.B. -webkit-border-radius und -moz-border-radius… Und zugegeben, es ist manchmal lästig diese extra Zeilen zu schreiben…

Doch woher kommen diese Eigenschaften eigentlich?
Während der Entwicklung von CSS3 wollten schon einige Entwickler ihren Browser mit den neuen Features ausstatten, ohne Gefahr zu laufen den „offiziellen“ Standard eines Tages mit dem eigenen zu überschreiben – Daher die prefixe/namespaces für Mozilla (Firefox) -moz-*, Webkit (Safari, Chrome, …) -webkit-*, Microsoft (ab Internet Explorer 9) -ms-* und Opera -o-*.

Wie lässt sich das automatisieren?

Tja, im Grunde gibt es hierzu wohl kein Skript das 100% zuverlässig arbeitet, da einige der Browser-spezifischen Eigenschaften von Version zu Version wegfallen bzw. die nativen CSS3 Eigenschaften unterstützt werden. Eine komplette und aktuelle Liste an Eigenschaften (und ab welcher Browser-Version sie nativ unterstützt werden) findet ihr in der Dokumentation der w3schools

Eine andere Lösung stellen die Mixins der Javascript Bibliotheken LessCSS und Sass dar… Auf diesem Weg müssen wir diese Eigenschaften idealerweise nur ein einziges mal tippen!

.runde-ecken (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#x-beliebiges-element {
    .runde-ecken;
    /* ... */
}

Eine total „automatisierte“ Lösung wird es für dieses Problem womöglich nicht so schnell geben… Immerhin existieren derzeit Eigenschaften die nur von einzelnen Browsern unterstützt werden (z.B. im Bereich der CSS Animationen).

Natürlich könnte ich mich aber auch irren – Falls ihr eine Möglichkeit kennt diese CSS Eigenschaften automatisiert zu erstellen, würde ich mich über ein entsprechendes Kommentar sehr freuen!

In diesem Sinne wünsche ich euch allen, trotz der derzeitigen Kälte, eine angenehme Woche und „Happy Coding“!