Verwendung erweiterter CSS3-Selektoren im IE

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. Das Ändern 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 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.

• 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.