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:
<Kopf>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>
</head>
Unterstützte Selektoren
n-tes Kind
n-letztes Kind
n-tel-Typ
n-ter-letzter Typ
erstes Kind
letztes Kind
Einzelkind
Erster Typ
letzter Typ
nur vom Typ
leer
Einige Einschränkungen von ie-css3
Stylesheets müssen über das <link>-Tag eingeführt werden. Stylesheets auf Seitenebene oder Inline-Stylesheets haben keine Auswirkung. Aber
Sie können @import in externen Stildateien verwenden, um andere Stildateien zu importieren.
Die Stylesheet-Datei muss unter demselben Domänennamen wie die Seite platziert werden;
Stildateien, die den Pfad „file://“ verwenden, funktionieren aufgrund von Browser-Sicherheitsproblemen nicht.
:not() Selektor wird noch nicht unterstützt;
Diese Methode ist nicht dynamisch. Eine Änderung des DOM nach der Anwendung des Stils ist ungültig.
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 dem 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 führt zu einem Problem: Wir müssen CSS3-Selektoren in der Stylesheet-Datei verwenden, der IE verwirft sie jedoch.
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.
Besuchen Sie die Projekthomepage
Laden Sie ie-css3.js herunter
Laden Sie DOMAssistant herunter
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.