Verstehen Sie mich nicht falsch, der IE unterstützt keine erweiterten CSS3-Selektoren, einschließlich des neuesten IE8 (Einzelheiten finden Sie unter „Browserunterstützung für CSS-Selektoren“), aber CSS-Selektoren sind in der Tat sehr nützlich. Sie können unsere Arbeit erheblich vereinfachen und unseren Code verbessern Effizienz macht es uns leicht, hoch wartbare Seiten zu erstellen.
Die Unterstützung von IE für erweiterte CSS-Selektoren, insbesondere CSS3-Selektoren, hat uns jedoch davon abgehalten, die Anwendung von CSS-Selektoren zu fördern. Obwohl wir den Marktanteil von Browsern nicht kontrollieren können, können wir unsere Arbeit durch einige Technologien verbessern. Wir können auch andere Technologien verwenden, um dem IE die verdeckte Unterstützung von CSS3-Selektoren zu ermöglichen.
Keith Clark, ein Webentwicklungsingenieur aus Großbritannien, hat eine JavaScript-Lösung entwickelt, die es dem IE ermöglicht, CSS3-Selektoren zu unterstützen. Dieses Skript unterstützt verschiedene Versionen von IE5 bis IE8.
Verwendung
Sie müssen lediglich das DOMAssistant-Skript von Robert Nyman und ie-css3.js herunterladen und sie wie folgt in das Head-Tag Ihrer Seite importieren:
Unterstützte Selektoren
Einige Einschränkungen von ie-css3
Wie funktioniert es?
ie-css3.js lädt jede Stildatei für die Seite herunter und analysiert ihre CSS3-Pseudoselektoren. Wird ein Selektor gefunden, wird dieser durch die gleichnamige CSS-Klasse ersetzt. Beispiel: div:nth-child(2) wird zu div._iecss-nth-child-2. Anschließend wird mit DOMAssistant von Robert Nyman der DOM-Knoten gefunden, der zum CSS3-Selektor des Elements passt, und ihm dann die entsprechende CSS-Klasse hinzugefügt.
Schließlich wird das Stylesheet des Elements durch die neue Version ersetzt und dann wird der entsprechende Stil mithilfe von CSS3-Selektoren zum entsprechenden Element hinzugefügt.
Vermeiden Sie den CSS-Interpreter des IE
Laut W3C sollte ein Browser CSS-Regeln ignorieren, die er nicht erkennt. Dies stellt ein Problem dar – wir müssen CSS3-Selektoren in der Stylesheet-Datei nutzen, aber der IE verwirft sie.
Um dieses Problem zu vermeiden, wird jede Stildatei über XMLHttpRequest heruntergeladen. Dadurch kann das Skript den integrierten CSS-Interpreter des Browsers umgehen und die rohe CSS-Datei lesen.
Alternative
Offensichtlich ist dies keine perfekte Lösung für Ajax-Websites und grundsätzlich unbrauchbar, da eine Änderung des DOM nach der Anwendung des generierten Stylesheets nicht effektiv ist. Aber tatsächlich können wir ein ie-css3 selbst anpassen. Es ist einfach nicht so schlau wie dieses.