HTML- und CSS-Unterstützung
Hinweis: Diese Dokumentation ist vorläufig und kann geändert werden.
Windows Internet Explorer 8 ist die bisher standardkompatibelste Version, die CSS (Cascading Style Sheets) Level 2.1 vollständig unterstützt und eine erweiterte Unterstützung von CSS 3, eine verbesserte Unterstützung von HTML 4.01 und eine verlässliche Unterstützung von HTML 5 bietet. Durch die verbesserte Unterstützung dieser HTML-Elemente können Webentwickler jetzt ausdrucksvollere und zugänglichere HTML-Markups erstellen. Dieses Dokument befasst sich mit den Änderungen am Verhalten von Windows Internet Explorer 8 in Bezug auf HTML- und CSS-Unterstützung und untersucht, welche Folgen diese Änderungen für den Webentwickler haben.
HTML-Unterstützung
Um Entwicklern zu helfen, alle Vorteile der von HTML 4.01 gebotenen Elemente zu nutzen, und um die von Webentwicklern beabsichtigte semantische Bedeutung besser bereitzustellen, wurde in Windows Internet Explorer die Unterstützung der folgenden Präsentationselemente aktualisiert:
Das P-Element: Repräsentiert einen logischen Absatz.
Das OBJECT-Element: Kann ein beliebiges Objekt einschließlich Bildern repräsentieren.
Automatisches Schließen von P-Elementen
Nicht geschlossene P-Elemente werden jetzt automatisch geschlossen, wenn nach ihnen TABLE -, FORM -, NOFRAMES - oder NOSCRIPT -Elemente folgen.
<html>
<head>
<title>Simple P Element Closing Example</title>
<meta http-equiv="X-UA-Compatible" content="IE8"/>
</head>
<body>
<p>This is the first paragraph</p>
<p style="margin-left:30px">This is another paragraph. <!-- P not closed -->
<table border="1px" cellpadding="2px">
<tr><td>This is a table cell.</td></tr>
</table>
<p>This is a third paragraph.</p>
</body>
</html>
In diesem Beispiel ist das zweite P-Element nicht geschlossen. Wenn die Seite mit Windows Internet Explorer 7 betrachtet wird, wird das TABLE-Element als untergeordnetes Element des zweiten P-Elements angezeigt. Das zweite P-Element ist vom linken Rand des Fensters aus um 30 Pixel eingerückt. Da das TABLE-Element ein untergeordnetes Element des P-Elements ist, wird es ebenfalls vom linken Rand des Fensters aus eingerückt. Wird die Seite jedoch mit Windows Internet Explorer 8 im Standardmodus betrachtet, dann ist das TABLE-Element bündig am linken Rand ausgerichtet. Da Windows Internet Explorer 8 nicht geschlossene P-Elemente automatisch schließt, bevor TABLE-Elemente angezeigt werden, ist das TABLE-Element ein untergeordnetes Element des Elements.
Verwenden von OBJECT-Elementen zum Anzeigen von Bildern
In Windows Internet Explorer 8 ist es jetzt möglich, das OBJECT-Element zu verwenden, um Bilder anzuzeigen. Wenn in älteren Versionen des Browsers Bilder mit diesem Element angezeigt wurden, dann wurden in der Regel dem Bild automatisch Bildlaufleisten und Ränder hinzugefügt, was oft zur Folge hatte, dass das Bild nicht korrekt angezeigt wurde.
In Windows Internet Explorer 8 zeigt das OBJECT-Element Bilder jetzt so an, als wären sie mithilfe von IMG-Elementen eingebettet worden. Um dieses Verhalten auf Ihren Webseiten zu verwenden, stellen Sie das DATA-Attribut des OBJECT-Elements auf die URL des Bilds ein. Sie können auch eine Daten-URL im DATA-Attribut einbetten. Weitere Informationen finden Sie unter Datenbindung .
Um Windows Internet Explorer dazu zu bringen, Bilder in OBJECT-Elemente zu laden, die das Verhalten älterer Versionen verwenden, wählen Sie entweder einen älteren Kompatibilitätsmodus für Ihre Webseite aus oder stellen Sie das TYPE-Attribut des OBJECT-Elements auf „text/html“ ein.
Verbessertes Objektfallback
Wenn es einem OBJECT-Element nicht gelingt, eine Ressource zu laden, wird stattdessen Inhalt wiedergegeben, der im OBJECT-Element enthalten ist. Dies wird als Objektfallback bezeichnet, weil es Ihnen ermöglicht, eine Strategie zu definieren, die Windows Internet Explorer verwendet, um einen Schritt zurückzugehen, falls etwas schiefgehen sollte.
In Windows Internet Explorer 7 wurde die Möglichkeit eingeführt, OBJECT-Elemente zu schachteln, d. h., mehrere OBJECT-Elemente zu verwenden, um eine reichhaltigere Fallbackstrategie zu erstellen, wie es das folgende Beispiel zeigt.
<object data="..." type="silverlight" >
<object data="..." type="windows media file">
<object data="..." type="image/png">
Wow! Everything went wrong. Sorry.
</object>
</object>
<object>
In diesem Beispiel werden drei OBJECT-Elemente verwendet, um eine Objektfallbackstrategie zu definieren. Zuerst wird versucht, eine Silverlight-Anwendung zu laden. Falls dies fehlschlägt, wird eine Microsoft Windows-Mediendatei angefordert. Falls die Windows-Mediendatei nicht geladen werden kann, wird in diesem Beispiel ein Bild geladen.
Wenn Sie dieses Beispiel mit Windows Internet Explorer 7 anzeigen würden, dann würden Sie zwar das Bild sehen, aber im DOM (Dokumentobjektmodell) der Seite würde es nur ein einziges OBJECT-Element geben, weil Windows Internet Explorer 7 für Objekte, die nicht geladen werden können, kein OBJECT-Element erstellt.
Wenn Sie das Beispiel mit Windows Internet Explorer 8 anzeigen würden, dann würden Sie das Bild mit drei OBJECT-Elementen im DOM der Seite sehen. Da sie nicht geladen werden konnten, würden die ersten beiden OBJECT-Elemente inaktiv sein. Sie könnten jedoch mithilfe von JavaScript nach ihnen suchen.
Hinweis: Inaktive Objekte können nicht reaktiviert werden, ohne die Seite zu aktualisieren oder mithilfe von JavaScript neue Objekte zu laden.
Windows Internet Explorer 8 verwendet dieses neue Fallbackverhalten nur für Fehler im Zusammenhang mit der Datenübertragung. Dies bedeutet, dass es nur dann verwendet wird, wenn eine Ladeanforderung eine Client (4xx)- oder eine Server (5xx)-HTTP-Fehlerantwort generiert. Falls die Anforderung aus anderen Gründen (z. B. aufgrund eines fehlerhaften Inhalts oder eines beschädigten ActiveX-Steuerelements) fehlschlägt, wird das ursprüngliche Fallbackverhalten ausgeführt. Weitere Informationen zu HTTP-Antwortcodes finden Sie unter HTTP-Antwortheader .
Verbesserungen für HTML 5/AJAX
Die in Windows Internet Explorer 8 integrierten Verbesserungen für HTML 5 umfassen AJAX-Navigationen, DOM-Speicher, Dokumentübergreifendes Messaging (Cross-Document Messaging, XDM) und Konnektivitätsereignisse. Diese Verbesserungen wurden in enger Koordination mit dem W3C HTML 5.0-Arbeitsentwurf entwickelt. Weitere Informationen finden Sie unter AJAX – Einführung in AJAX-Navigationen , Einführung in DOM-Speicher , AJAX – XMLHttpRequest-Verbesserungen in Internet Explorer 8 und AJAX – Konnektivitätsverbesserungen in Internet Explorer 8 .
AJAX-Navigationen
Einer der größten Vorteile der Verwendung von AJAX ist die Möglichkeit, Seiteninhalt ohne herkömmliche Seitennavigation zu aktualisieren. Die Unfähigkeit, den Zustand einer Seite zu speichern und seine Komponenten zu warnen, wenn dies geschieht, kann in einigen Szenarios problematische Konsequenzen haben, weil Komponenten wie z. B. die Adressleiste und die Zurück- und Vorwärts-Schaltfläche nur nach einer Seitennavigation aktualisiert werden. Aus diesem Grund speichert der Browser keine AJAX-Inhaltsänderungen im Reisebericht oder in Aktualisierungskomponenten wie beispielsweise der Adressleiste. Dies kann Endbenutzer verwirren, die sich dann fragen, wieso der Browser bei dem alten Inhalt hängen bleibt. Im IE8-Modus behandelt Windows Internet Explorer window.location.hash -Aktualisierungen wie Navigationen und speichert die vorherige Dokument-URL.
DOM-Speicher
Heute verwenden Webseiten die Eigenschaft document.cookie , um Daten auf dem lokalen Computer zu speichern. Cookies sind in ihrer Leistungsfähigkeit beschränkt, weil Websites nur 50 Schlüssel/Wert-Paare pro Domäne speichern können. Darüber hinaus ist das Cookie-Programmiermodell unhandlich und erfordert die Analyse der gesamten Cookie-Zeichenfolge auf Daten. Die HTML 5-DOM-Speicherobjekte von W3C stellen ein viel einfacheres globales Speichermodell und Sitzungsspeichermodell für Schlüssel/Wert-Paarzeichenfolgendaten bereit. Websites können Daten für die Lebensdauer einer Registerkarte oder bis zur Löschung der Daten durch den Benutzer speichern.
Jede Domäne einschließlich ihrer Unterdomänen hat einen lokalen Speicherplatz von 10 MB. Dies hilft, die Wahrscheinlichkeit domänenübergreifender Angriffe zu senken. In ähnlicher Weise hat jede Browser-Registerkarte ihren eigenen Sitzungsspeicher. Ein DOM-Speicher ist lediglich eine Methode für Webanwendungen, auf einfache Weise Daten zu speichern, ohne dabei von einer Datenbank unterstützt zu werden. Daher gibt es beispielsweise keine Möglichkeit, komplexe Abfragen wie z. B. eine Suche nach einem Wert durchzuführen.
Dokumentübergreifendes Messaging (Cross-Document Messaging, XDM)
Die Website-Ursprungsrichtlinie des Browsers hindert Webseiten daran, Daten aus anderen Domänen abzurufen. Dies bedeutet, dass die verschiedenen Domänen auf einer einzelnen Webseite nicht miteinander kommunizieren können, um eine reichhaltigere Erfahrung zu bieten. Websites umgehen diese Richtlinie, indem sie verschachtelte IFrames erstellen und Daten abrufen, die über URLs übertragen werden. Eine weitere Möglichkeit für Websites, diese Richtlinie zu umgehen, besteht darin, Skriptdateien und andere Ressourcendateien aus anderen Domänen direkt zu hosten. Diese zweite Art der Problemumgehung ermöglicht lediglich eine unidirektionale Kommunikation. Sie stellt zugleich ein Sicherheitsrisiko dar, weil eingebettete Skripte und Ressourcen mit den gleichen Berechtigungen wie die Host-Website ausgeführt werden und Zugriff auf die Daten des Benutzers wie z. B. die in Cookies gespeicherten Daten haben.
XDM stellt aus dem Fensterobjekt heraus eine postMessage-Methode bereit, die es den verschiedenen Domänen ermöglicht, mit gegenseitiger Zustimmung miteinander zu kommunizieren. XDM bietet eine viel einfachere und wesentlich leistungsorientiertere Methode zur bidirektionalen domänenübergreifenden Kommunikation als die oben aufgeführten Problemumgehungen.
Konnektivitätsereignisse
Windows Internet Explorer 8 ermöglicht Webseiten durch die Eigenschaft window.navigator.onLine und durch online/offline-Ereignisse zu erkennen, wann der Browser online oder offline ist. Durch diese Informationen können Sie mithilfe des DOM-Speicherobjekts reichhaltige Offline-Szenarien einrichten. Wenn beispielsweise ein Benutzer bei seiner E-Mail-Seite online angemeldet ist und die Verbindung unterbrochen wird, könnte die Seite den Benutzer auffordern, einen Entwurf im DOM-Speicher zu speichern, und ihm ermöglichen, die Bearbeitung der E-Mail fortzusetzen. Sobald die Verbindung wieder hergestellt wird, kann das Skript die E-Mail abrufen und sie an den Server senden.
Weitere Informationen finden Sie unter AJAX – Konnektivitätsverbesserungen in Internet Explorer 8 .
CSS-Unterstützung
Die Unterstützung des CSS-Standards wurde mit jeder neuen Version von Windows Internet Explorer verbessert und hat jetzt zur vollständigen Unterstützung von CSS 2.1 geführt. Die folgenden Tabellen zeigen auf einen Blick die verschiedenen in Windows Internet Explorer 8 unterstützten verbesserten CSS-Eigenschaften im Vergleich zu den von Windows Internet Explorer 7 unterstützten CSS-Eigenschaften. Diese Tabellen bieten keine umfassende Liste der von Windows Internet Explorer 8 unterstützten CSS-Eigenschaften, sondern zeigen lediglich diejenigen CSS-Eigenschaften, die in Windows Internet Explorer 7 entweder gar nicht oder nur teilweise unterstützt wurden, aber jetzt in Windows Internet Explorer 8 unterstützt werden. Weitere Informationen zur CSS-Kompatibilität in Windows Internet Explorer und erweiterte CSS-Elementunterstützungstabellen finden Sie unter CSS-Kompatibilität und Internet Explorer .
Die Angabe „Partiell“ in einer Zelle bedeutet, dass diese Funktion in dieser Version von Windows Internet Explorer nur teilweise implementiert ist. Wenn Sie weitere Informationen erhalten möchten, klicken Sie auf den Link, um die Verweisseite dieser Funktion auf MSDN anzuzeigen.
Pseudoklassen
CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
:active { sRules } |
Partiell |
Ja |
|
:after { sRules } |
Nein |
Ja |
|
:before { sRules } |
Nein |
Ja |
|
:focus { sRules } |
Nein |
Ja |
|
:lang(C) { sRules } |
:lang() |
Nein |
Ja |
Listen
CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
{ list-style-type : sStyle } |
Partiell |
Ja |
Farbe und Hintergrund
CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
{ background-position : sPosition } |
Partiell |
Ja |
Schriftart und Text
CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
{ font-weight : sWeight } |
Partiell |
Ja |
|
{ white-space : sWrap } |
Partiell |
Ja |
|
{ word-spacing : sSpacing } |
Partiell |
Ja |
Generierter Inhalt
CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
{ content : sContent } |
Nein |
Ja |
|
{ counter-increment : sCounter } |
Nein |
Ja |
|
{ counter-reset : sCounter } |
Nein |
Ja |
|
{ quotes : sQuotes } |
quotes |
Nein |
Ja |
Rahmen und Layout
CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
{ border-collapse : sCollapse } |
Partiell |
Ja |
|
{ border-spacing : sSpacing } |
Nein |
Ja |
|
{ border-style : sStyle } |
Partiell |
Ja |
|
{ caption-side : sLocation } |
Nein |
Ja |
|
{ empty-cells : sEmptyCells } |
empty-cells |
Partiell |
Ja |
Positionierung
CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
{ bottom : sBottom } |
Partiell |
Ja |
|
{ display : sDisplay } |
Partiell |
Ja |
|
{ left : sPosition } |
Partiell |
Ja |
|
{ right : sPosition } |
Partiell |
Ja |
|
{ top : sTop } |
Partiell |
Ja |
|
{ z-index : vOrder } |
Partiell |
Ja |
CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
{ orphans : nLines } |
Nein |
Ja |
|
{ page-break-inside : sBreak } |
Nein |
Ja |
|
{ widows : nLines } |
Nein |
Ja |
Benutzeroberfläche
CSS 2.1 |
|
IE 7.0 |
IE 8.0 |
{ outline : sOutline } |
Nein |
Ja |
|
{ outline-color : sColor } |
Nein |
Ja |
|
{ outline-style : sStyle } |
Nein |
Ja |
|
{ outline-width : sWidth } |
Nein |
Ja |
|
CSS 3 |
|
IE 7.0 |
IE 8.0 |
{ box-sizing : sSizing } |
box-sizing |
Nein |
Ja |
Funktionen
CSS 2.1 |
IE 7.0 |
IE 8.0 |
counter() |
Nein |
Ja |
attr() |
Nein |
Ja |
Schlüsselwörter
CSS 2.1 |
IE 7.0 |
IE 8.0 |
Inherit |
Nein |
Ja |
Weitere Informationen zur CSS-Kompatibilität in Windows Internet Explorer und erweiterte Unterstützungstabellen finden Sie unter CSS-Kompatibilität und Internet Explorer.