einführen
Es besteht kein Zweifel, dass jeder Webdesigner oder Entwickler, der versucht, CSS zu verwenden, feststellen wird, dass unterschiedliche Browser unterschiedliche Stildeklarationen erfordern. Diese Ärgernisse sind auf den unterschiedlichen Grad der CSS-Implementierungsintegrität in den verschiedenen Browsern und ihren Versionen zurückzuführen. Bedingtes CSS ist eine Lösung für dieses Problem, indem es die Idee der bedingten Kommentarsyntax von Internet Explorer aufgreift und in die CSS-Deklaration einfügt.
Grundlegende Verwendung
Bedingtes CSS wird hauptsächlich verwendet, um anzugeben, ob eine bestimmte CSS-Anweisung in einem bestimmten Browser verwendet werden soll. Natürlich möchten Sie dies nicht sehr oft tun, aber es kann sehr nützlich sein, wenn Sie einen Browser gezielt ansprechen müssen. Sie können der U4EA-Unterstützungsliste entnehmen, dass die meisten Browser diese Methode unterstützen.
Jeder CSS-Deklaration oder jedem CSS-Block können bedingte Deklarationen vorangestellt werden. Es gibt drei grundlegende Arten von Präfixen:
[if {!} Browser]
[if {!} Browserversion]
[if {!} Bedingung Browserversion]
! – die Negation der Aussage (z. B. NOT) – optional
Browser – der Browser, für den die Deklaration erfolgt
„IE“ – Internet Explorer
„Gecko“ – Gecko-basierter Browser (Firefox, Camino usw.)
„Webkit“ – Webkit-basierte Browser (Safari, Shiira usw.)
„SafMob“ – Mobile Safari (iPhone / iPod Touch)
„Opera“ – Operas Browser
„IEMac“ – Mac-Version des Internet Explorers
'Konq' – Konqueror
„IEmob“ – IE für Mobilgeräte
„PSP“ – Playstation Portable
'NetF' – Net Front (Entschuldigung für die Unkenntnis von Zucker und Tomaten, ich weiß nicht, was das ist)
version – die Browserversion, auf die abgezielt werden soll
Bedingung – arithmetischer Operator
lt - weniger als
lte – kleiner oder gleich
eq - gleich
gte – größer oder gleich
gt – größer als
Einige Beispiele für bedingte Anweisungen:
// Beispiel für eine bedingte CSS-Syntax
[if IE] – wenn der Browser IE ist
[if ! Opera] – wenn der Browser nicht Opera ist
[if IE 5] – wenn der Browser IE 5 ist
[if lte IE 6] – Wenn der Browser IE 6 oder niedriger ist (IE 5, IE 4 usw.)
[if ! gt IE 6] – entspricht der obigen Aussage, wenn die Browserversion nicht höher als IE 6 ist
Weil viele Instanzen denken, dass div eine Box-Klasse mit Breite und Auffüllung ist. Daher sollte es auch in IE 5 einwandfrei funktionieren (ich sehe, dass viele Leute die Unterstützung für IE 5 eingestellt haben, aber dies ist ein klassisches Beispiel). Das Box-Modell von IE 5 ist kein Standard. So lösen Sie es mit bedingtem CSS:
// Beispiel für ein bedingtes CSS-Boxmodell
div.box {
Breite: 400px;
[wenn IE 5] Breite: 600px;
Polsterung: 0 100px;
}
Wie Sie sehen, können Sie mit bedingtem CSS nur eine CSS-Datei verwalten und nicht mehrere Dateien, die die Verwendung der bedingten Kommentare des IE erfordern. Dies hilft, die Wartung zu rationalisieren und den Code klarer zu machen.
Um noch einen Schritt weiter zu gehen: Ein wichtiges Merkmal von bedingtem CSS besteht darin, dass es beim Finden einer @import-CSS-Deklaration automatisch die Datei öffnet und einfügt, die importiert werden muss. Dies reduziert die Ladezeit der Seite, da der Browser nur eine einzige HTTP-Anfrage für die CSS-Datei stellen muss.
Obwohl bedingtes CSS hauptsächlich für verschiedene Versionen von IE-Browsern verwendet wird, ist bedingtes CSS auch sehr nützlich, wenn Sie auf Fehler in anderen Browsern stoßen, die schwer zu beheben sind (hauptsächlich mithilfe von Javascript zur Behebung). Beispiele hierfür sind Hintergrundbildfehler in Firefox 2 und Safari 2, bei denen die Unterstützung für „display: inline-block“ fehlte. Diese Fehler wurden in den neuesten Versionen dieser Browser behoben, aber wenn diese Browser einen bestimmten Marktanteil einnehmen, ist die Abwärtskompatibilität sehr wichtig.