IE7.js - Den Internet Explorer standardkonformer machen |
|
Donnerstag, 28. August 2008
|
||
|
Vielen Dank an Patrick, der in einem Kommentar zu einem früheren Beitrag mich auf diese Library gebracht hat. Sie sorgt dafür, dass der IE6 weniger Fehler produziert und mehr unterstützt.
Einen eigenen Namen hat dieses Script nicht. Es hört auf IE7.js bzw. IE8.js. Das beschreibt aber auch relativ gut, was dieses Script überhaupt macht. Eingebunden in eine Website sorgt beispielsweise die IE7.js Datei dafür, dass alphatransparente PNG-Bilder funktionieren und altbekannte Probleme im Internet Explorer 6 nicht mehr auftreten. Darüberhinaus werden auch neue Möglichkeiten geschaffen, die z.B. erst mit einem CSS 3 fähigem Browser funktionieren würden. Das Script ist knapp 30,5 KB groß und damit nicht unbedingt sehr klein - aber es wird nur beim Internet Explorer 6 verwendet, von daher werden Benutzer neuerer Versionen mit weniger Ladezeiten belohnt. Bei dem PNG-Fix muss noch beachtet werden, dass background-repeat und -position nicht funktioniert und die Bilder *-trans.png heißen müssen, damit das Script die Bilder entsprechend ändert. Bilder die nicht mit -trans.png enden werden nicht alphatransparent gemacht im IE6. Hier mal einige neue Möglichkeiten aufgezählt: Vererbung in CSS abschalten Man kann zum Beispiel die Vererbung von CSS "abschalten" wenn man folgende Syntax verwendet: #website > div { So hat nur das DIV innerhalb von #website einen roten Hintergrund, auf darin befindende DIVs wirkt sich das nicht mehr aus. Klappte bisher nicht im IE6. Mutiklassen definieren Wir können ja einem Element mehrere Klassen zuweisen. Das sieht dann zum Beispiel so aus: <div class="fett blau">Text</div> Der Text wird dann also fett und blau angezeigt, wenn die entsprechenden CSS-Klassen definiert wurden. Jetzt können wir aber noch eine Klasse-Klasse machen... komisch formuliert aber eigentlich ganz einfach: .fett.blau { Hier wird dann praktisch gesagt, dass wenn ein Element die Klassen fett und blau hat auch noch einen roten Hintergrund bekommt. Wenn nur eine von beiden Klassen vergeben wurde kommt der rote Hintergrund nicht zum Einsatz. Auch das ging bisher nicht im IE6. Eigenschaften im CSS berücksichtigen Eine sehr schöne Neuerung von CSS3 ist der Bezug zur Eigenschaft eines Elements. Wir konnten bisher nur Klassen verteilen und denen sagen wie sie auszusehen haben. Jetzt können wir noch sagen, dass ein Element so und so aussehen soll, wenn eine Eigenschaft von diesem Element einen bestimmten Wert hat. Sieht dann so aus im CSS: a[href^="http"] { Wenn der href eines Links auf der Website mit "http" beginnt soll er rot dargestellt werden. Links die mit "http" beginnen sind in der Regel externe Links. So kann dann durch CSS zwischen internen und externen Links unterschieden werden. Es kann aber jede beliebige Eigenschaft benutzt werden. Vom Alt-Tag bis zum Title-Tag ist alles Möglich abzufragen. Dank der IE7.js jetzt auch im Internet Explorer 6. Hover-Effekt für mehr als nur Links Der Internet Explorer 6 unterstützt leider nur den Selektor ":hover" für Links. Andere Elemente wie Tabellenzeilen, -spalten oder -zellen, Auflistungen, etc. werden hier leider nicht unterstützt. Mit dem JavaScript jedoch schon: input { Ein Textfeld wird einen normalen weißen Hintergrund haben und einen roten, wenn man mit der Maus darüber fährt. Das ging vorher ebenfalls nicht im IE6. Es gibt noch viele weitere Punkte die durch das Script verbessert werden, wie min-height:100px und max-height:200px, position:fixed, right:0px außerdem sind altbekannte Bugs behoben wie "Double Margin", "Peekaboo", und "Unscrollable Content". In der IE8.js werden noch weitere Möglichkeiten geschaffen, über die auch der IE7 momentan nicht verfügt. Hauptsächlich weitere Selektoren wie ":disabled", ":empty", ":checked", etc. Die IE8.js beinhaltet alle Erweiterungen der IE7.js, somit braucht man nur eine von beiden einbinden. Einbindung Die Einbindung des Scripts ist denkbar einfach: <!--[if lt IE 7]> Diesen Code einfach im Head von der HTML-Seite einfügen. Alternativ kann man auch noch die IE8.js einfügen die dann weitere Funktionen beinhaltet: <!--[if lt IE 8]> Statt die JavaScript Datei direkt vom Google-Code-Server zu verlinken bietet es sich an die Datei herunter zu laden und lokal zu verlinken. Auf der Projektseite des JavaScripts gibt es auch tolle Beispiele die einem ganz einfach zeigen, welche Neuerungen es gibt und wie man diese anwendet. Achtung: Andere Browser Diese Erweiterungen werden teilweise von anderen Browsern wie Opera, etc. nicht unterstützt. Die meisten Funktionen sind dort bereits implementiert, jedoch sollte man vorsichtig in der überschwänglichen Verwendung dieses JavaScripts sein und alles weiterhin gut testen, vor allem in anderen Browsern als der IE. Darüberhinaus befindet sich dieses Script noch in der Beta-Phase, die Liste mit Tickets bei Google-Code ist auch noch recht lang. Ich möchte mich auch nochmal bei Patrick bedanken, der mich diesem Script durch seinen Kommentar etwas näher gebracht hat. Link IE7.js und IE8.js Projektwebsite  Kommentare (1)
|
||
| Letzte Aktualisierung ( Samstag, 30. August 2008 ) | ||
| < Zurück | Weiter > |
|---|
