HTML and CSS Support

Windows Internet Explorer 8 is the most standards-compliant version ever, with full support for Cascading Style Sheets (CSS) Level 2.1, enhanced support for CSS 3, improved support for HTML 4.01, and strong support for HTML 5. Because of the improved support of these HTML elements, Web developers can now build more expressive and accessible HTML markup. This document will discuss the changes to behaviors in Windows Internet Explorer 8 regarding HTML and CSS support and how these changes affect the Web developer.

HTML Support

To help developers take full advantage of the elements that HTML 4.01 offers, and to better provide the semantic meaning intended by Web developers, Windows Internet Explorer has upgraded support for the following presentational elements:

The P element: Represents a logical paragraph.

The OBJECT element: May represent any object, including images.

Automatically Closing P Elements

Unclosed P elements are now automatically closed when followed by TABLE, FORM, NOFRAMES, or NOSCRIPT elements.

HTML

<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 this example, the second P element is not closed. When viewed with Windows Internet Explorer 7, the TABLE element is displayed as a child element of the second P element. The second P element is indented from the left margin of the window by 30 pixels. Because the TABLE is a child element of the P element, it is also indented from the left margin of the window. When viewed with Windows Internet Explorer 8 in the default mode, however, the TABLE element is aligned to the left margin. Because Windows Internet Explorer 8 automatically closes unclosed P elements before displaying TABLE elements, the TABLE element is a child of the element.

Using OBJECT Elements to Display Images

Windows Internet Explorer 8 now makes it possible to use the OBJECT element to display images. When displaying images with this element in older versions of the browser, it used to automatically add scrollbars and borders to the image, which frequently caused the image to display improperly.

Now with Windows Internet Explorer 8, the OBJECT element displays images as if they were embedded using IMG elements. To use this behavior in your Web pages, set the OBJECT element's DATA attribute to the URL of the image. You can also embed a dataURL in the DATA attribute. For more information, see Data Binding.

To make Windows Internet Explorer load images into OBJECT elements using the behavior of older versions, either choose an older compatibility mode for your Web page or set the OBJECT element's TYPE attribute to text/html.

Improved Object Fallback

When an OBJECT element fails to load a resource, content inside the OBJECT element is rendered instead. This is called object fallback because it allows you to define a strategy that Windows Internet Explorer uses to "fall back" to when something goes wrong.

Windows Internet Explorer 7 introduced the ability to nest OBJECT elements; that is, to use multiple OBJECT elements to create a richer fallback strategy, as shown in the following example.

HTML

<object data="..." type="silverlight" >
   <object data="..." type="windows media file">
      <object data="..." type="image/png">
          Wow!  Everything went wrong.  Sorry.
      </object>
   </object>
<object>

This example uses three OBJECT elements to define an object fallback strategy. It first tries to load a Silverlight application. If that fails, a Microsoft Windows Media file is requested. If the Windows Media file cannot be loaded, the example loads an image.

If you viewed this example using Windows Internet Explorer 7, you would see the image, but there would be only one OBJECT element in the page's Document Object Model (DOM), because Windows Internet Explorer 7 does not create OBJECT elements for objects that fail to load.

If you viewed the example using Windows Internet Explorer 8, you would see the image with three OBJECT elements in the page's DOM. Because they failed to load, the first two OBJECT elements would be inactive. You could, however, use JavaScript to search for them.

Note: Inactive objects cannot be reactivated without refreshing the page or using JavaScript to load new objects.

Windows Internet Explorer 8 uses this new fallback behavior only for communication related errors; that is, it only occurs when a load request generates a client (4xx) or a server (5xx) HTTP error response. If the request fails for other reasons, such as malformed content or a corrupted ActiveX control, the original fallback behavior occurs. For more information regarding HTTP response codes, see HTTP Response Headers.

HTML 5 / AJAX Enhancements

HTML 5 enhancements with Windows Internet Explorer 8 includes AJAX Navigations, DOM Storage, Cross-Document Messaging (XDM), and Connectivity Events. These were developed in close coordination with the W3C HTML 5.0 Working Draft. For more information, see AJAX - Introducing AJAX Navigations, Introduction to DOM Storage, AJAX - XMLHttpRequest Enhancements in Internet Explorer 8, and AJAX - Connectivity Enhancements in Internet Explorer 8.

AJAX Navigations

One of the significant benefits of using AJAX is the ability to update page content without traditional page navigations. The inability to save the state of a page and alert its components when this happens can be problematic in some scenarios, because components like the address bar and the back and forward buttons only update after page navigation. As a result, the browser doesn’t save AJAX content changes on the travelog or update components like the address bar. This may confuse end-users who wonder why the browser seems stuck on old content. In IE8 mode, Windows Internet Explorer treats window.location.hash updates like navigations and saves the previous document URL.

DOM Storage

Today, Web pages use the document.cookie property to store data on the local machine. Cookies are limited in capability because sites can only store 50 key/value pairs per domain. Furthermore, the cookie programming model is cumbersome and requires parsing the entire cookie string for data. The W3C’s HTML 5 DOM Storage objects provide a much simpler global and session storage model for key/value pair string data. Sites can store data for the life of a tab or until the Web site or user clears the data.

Each domain, including its sub-domains, has 10 MB of local storage space. This helps reduce the possibility of cross-domain attacks. Similarly, each browser tab has its own session store. DOM Storage is just a mechanism for Web applications to simply store data—there is no database behind it. For example, there is no way to do complex queries, such as search by value.

Cross-Document Messaging (XDM)

The browser’s site origin policy blocks Web pages from getting data from other domains. This means that different domains on a single Web page can’t communicate with each other to provide a richer experience. Web sites work around this policy by creating nested IFrames and retrieving data transmitted through URLs. Another way Web sites work around this policy is by directly hosting script and other resource files from other domains. This second workaround allows for only one-way communication. It is also a security risk because embedded script and resources run with the same privileges as the host Web site and have access to the user’s data such as that stored in cookies.

XDM provides a postMessage method off of the window object, which allows different domains to communicate with each other given mutual consent. XDM provides a much simpler, more performance-driven mechanism for two-way cross-domain communication than the workarounds noted above.

Connectivity Events

Windows Internet Explorer 8 allows Web pages to detect when the browser is online or offline through the window.navigator.onLine property and online/offline events. With this information, you can enable rich offline scenarios using the DOM Storage object. For example, if a user is logged onto his Live mail page and loses connectivity, the page could always prompt the user to save a draft in the DOM store and allow the user to continue editing the mail. When connectivity is restored, the script can retrieve the e-mail and send it to the server.

For more information, see AJAX - Connectivity Enhancements in Internet Explorer 8.

CSS Support

Support for the CSS standard has steadily improved with each new version of Windows Internet Explorer, culminating in full support for CSS 2.1. The following tables show, at-a-glance, the various improved CSS properties supported in Windows Internet Explorer 8 as compared to Windows Internet Explorer 7. These tables do not show a comprehensive list of CSS properties supported by Windows Internet Explorer 8; they show only the CSS properties that either were not supported or were only partially supported in Windows Internet Explorer 7 but that are now supported in Windows Internet Explorer 8. For more information regarding CSS compatibility in Windows Internet Explorer and expanded CSS element support tables, see CSS Compatibility and Internet Explorer.

A value of "Partial" in a cell indicates that that feature is only partially implemented in that version of Windows Internet Explorer. For more information, click the link to view that feature's reference page on MSDN.

Pseudo-classes

CSS 2.1		IE 7.0	IE 8.0
:active { sRules }	:active	Partial	Yes
:after { sRules }	:after	No	Yes
:before { sRules }	:before	No	Yes
:focus { sRules }	:focus	No	Yes
:lang(C) { sRules }	:lang()	No	Yes

Lists

CSS 2.1		IE 7.0	IE 8.0
{ list-style-type : sStyle }	list-style-type	Partial	Yes

Color and Background

CSS 2.1		IE 7.0	IE 8.0
{ background-position : sPosition }	background-position	Partial	Yes

Font and Text

CSS 2.1		IE 7.0	IE 8.0
{ font-weight : sWeight }	font-weight	Partial	Yes
{ white-space : sWrap }	white-space	Partial	Yes
{ word-spacing : sSpacing }	word-spacing	Partial	Yes

Generated Content

CSS 2.1		IE 7.0	IE 8.0
{ content : sContent }	content	No	Yes
{ counter-increment : sCounter }	counter-increment	No	Yes
{ counter-reset : sCounter }	counter-reset	No	Yes
{ quotes : sQuotes }	quotes	No	Yes

Border and Layout

CSS 2.1		IE 7.0	IE 8.0
{ border-collapse : sCollapse }	border-collapse	Partial	Yes
{ border-spacing : sSpacing }	border-spacing	No	Yes
{ border-style : sStyle }	border-style	Partial	Yes
{ caption-side : sLocation }	caption-side	No	Yes
{ empty-cells : sEmptyCells }	empty-cells	Partial	Yes

Positioning

CSS 2.1		IE 7.0	IE 8.0
{ bottom : sBottom }	bottom	Partial	Yes
{ display : sDisplay }	display	Partial	Yes
{ left : sPosition }	left	Partial	Yes
{ right : sPosition }	right	Partial	Yes
{ top : sTop }	top	Partial	Yes
{ z-index : vOrder }	z-index	Partial	Yes

Printing

CSS 2.1		IE 7.0	IE 8.0
{ orphans : nLines }	orphans	No	Yes
{ page-break-inside : sBreak }	page-break-inside	No	Yes
{ widows : nLines }	widows	No	Yes

User Interface

CSS 2.1		IE 7.0	IE 8.0
{ outline : sOutline }	outline	No	Yes
{ outline-color : sColor }	outline-color	No	Yes
{ outline-style : sStyle }	outline-style	No	Yes
{ outline-width : sWidth }	outline-width	No	Yes
CSS 3		IE 7.0	IE 8.0
{ box-sizing : sSizing }	box-sizing	No	Yes

Functions

CSS 2.1	IE 7.0	IE 8.0
counter()	No	Yes
attr()	No	Yes

Keywords

CSS 2.1	IE 7.0	IE 8.0
Inherit	No	Yes

For more information regarding CSS compatibility in Windows Internet Explorer and expanded support tables, see CSS Compatibility and Internet Explorer.