Developing and Authoring for the Web

  • Article

Cc940326.chap_01(en-us,TechNet.10).gif Cc940326.image(en-us,TechNet.10).gif

Internet Explorer 5 offers a feature-rich platform for building Web-based applications and developing informative content for users. The browser provides enhanced support for standards-based Internet technologies and improves the ease and speed with which developers can take advantage of these technologies. Improvements to the browser programming model, such as drag-and-drop capabilities across frames and applications, further enrich the Web development platform.

The following sections describe the new and enhanced features that can help you create Web-based applications.

Enhanced Support for Dynamic HTML Standards

Enhanced support for Dynamic HTML standards provides you with a comprehensive standards-based platform for authoring interactive content. You can create content that is compatible with other browsers that also support these standards.

Internet Explorer 5 includes enhanced support for the following standards:

  • HTML 4.0

  • Cascading style sheets (CSS) 1.0 and CSS positioning

  • Scripting and support for the Document Object Model (DOM)

  • Extensible Markup Language (XML)

  • Extensible Stylesheet Language (XSL)

  • ECMA-262 scripting (JavaScript standard)

  • HTTP

Enhanced Support for XML

XML provides you with a standard data-interchange format for building data-based applications. Internet Explorer 5 includes the following enhancements to XML support:

  • Full support for the W3C XML Document Object Model (DOM) offers extensive programmatic control of XML document content, structure, and formats.

  • You can embed XML in a document as data or metadata. The full XML DOM is then exposed for the element, but the elements inside the XML tag are not rendered on the page and are not included in the HTML DOM.

  • You can intermix XML tags with HTML tags in a Web document. You can also apply CSS properties to these elements to control how they are displayed.

  • Using native XML support, you can view XML like a regular document within the browser.

  • With XSL support, you can apply style sheets to native XML documents and display the data dynamically.

Performance Improvements

With enhancements to the browser programming model, both developers and users will experience improved performance in the following areas:

  • A more efficient DHTML rendering engine - Optimization of the DHTML rendering engine (and, in particular, the internal algorithms) has increased the performance of basic browser functions, allowing significantly faster and more efficient display of content than in earlier versions of the browser. These improvements are most noticeable when users are viewing very large documents built with Dynamic HTML and pages that include databinding technology.

  • Fixed-layout tables - Internet Explorer 5 includes support for fixed-layout tables, which allow you to specify table-column sizes, while the content size inside the table cells does not affect the table layout. By not calculating the minimum and maximum size of each cell in the table, fixed-layout tables are progressively rendered, so the browser displays each table row as it downloads.

  • Render first for the HTTP-Expires header - Internet Explorer 5 now supports the HTTP-Expires header on both pages and images. The browser does not automatically check the network first when an object from the cache has not yet expired. For a period before the expiration time (specified in the cache control header), Internet Explorer renders from the cache even if a newer version is available. This ability reduces network traffic and improves browser performance.

Dynamic HTML Behavior Components

Dynamic HTML behavior components are simple, lightweight components that, when applied to standard HTML elements on a page by using CSS, can enhance the element's default behavior. Additionally, behavior components separate the script from the content on a page, making it easy to reuse code across multiple pages and improving the overall manageability of the page. Just as CSS enables Web-site developers to separate the content of a page from its format, dynamic HTML behavior components extend that idea to separate scripted behaviors as well.

You can now build reusable scripts and custom XML tags that Web pages can reference. For example, you could write a script that specifies which text or pictures fly in from the right side of the page. This script can be referenced from any page simply by calling it. You can then change content without affecting the script.

For example, to build the mask-entry field by using Internet Explorer 4.0, you would have included an INPUT tag on the page, then added script that monitored the focus and keyboard interaction with the control. You would have needed to create the script for every page that required the new mask-entry type. Now, with the new Dynamic HTML behavior components, you can encapsulate all the script inside a component that can quickly and easily be referenced from any page, even by someone who has no knowledge of scripting.

Dynamic Properties

Instead of creating long, complicated scripts to perform relatively simple activities, you can define any property on a page as a function of any other property. This feature can be useful for pages that use CSS positioning. You can now set up very complex screen layouts that are simple to author, don't require a line of script, and respond to screen changes dynamically.

For example, the font size of a section of text can be set to 20 percent of the width of a table, and the font size will change dynamically if the page is resized without being refreshed from the Web server. As the document changes size, a recalculation engine (similar to technology used in spreadsheet applications, such as Microsoft Excel) determines a dependency and resets the property.

Full Drag-and-Drop Object Model Support

The Internet Explorer 5 object model now includes full support for drag-and-drop operations from Web pages to the desktop or any other application. Full control over cursors, drag initialization, and Clipboard support has also been added to the object model. You can build Web-based applications that enable users to drag content between frames and even to other applications.

Retaining Persistence

Any element on a Web page, such as a collapsible outline, can remain in its current state, even when a user leaves the page and returns later. While in the past you have been able to do this in a limited way with cookies, the new persistence technology of Internet Explorer 5 provides an XML-based method for persisting data.

You can persist form data, dynamic positions and content, styles, and script variables, which increases the speed of navigation and content authoring. For example, you can specify that a collapsible list of links within a table of contents on a page remains in the same expanded state until the user returns to the page. You can preserve documents exactly as they are displayed on the screen rather than relying on settings for a document maintained on a remote server.

Internet Explorer 5 provides a local store for retaining persistence that is protected from unauthorized cross-domain access and is not affected by the 4 KB limit imposed by cookies. Properties can be stored hierarchically by using name and value pair combinations, and you can control the storage and retrieval of this information. By allowing information to safely reside on the client computer, fewer server transactions are required.

Client Capabilities

The Internet Explorer 5 platform introduces a new feature that enables the server to request the specific capabilities of the client computer. The server creates a special HTTP request (449) that includes a script for the client computer to execute. The script queries the client computer about its system capabilities, as well as the availability of browser features. The client computer executes the script, and then sends the information back to the server. This approach is secure - the client computer executes a script that is similar to any other script the browser can run.

Client capabilities consist of information about the browsing environment, including screen resolution, screen dimensions, color depth, CPU, and connection speed. Internet Explorer 5 also detects the components installed on the system. The server is specific about the capabilities that it needs from the client computer, so only the required information is generated and transferred.

You can customize content to provide the best possible user experience based on this client information. For example, if the user has an Intel® Pentium 266 computer, you might want to provide more sophisticated content; if the user has an Intel 386 computer, you might want to provide less sophisticated content, regardless of the browser used.

Cache Control

For specific Web pages where you do not want Internet Explorer to cache content, such as the user's password, you can disable the AutoComplete feature. You would add the following tags to a Web page to prevent AutoComplete from storing information:

  • pragma:no-cache

  • cache-control:no-cache

  • cache-control:no-store

  • cache-control:private (when not using Windows NT with per user-cache)

Multiple Cascading Style Sheet (CSS) Class Support

Internet Explorer 5 includes the ability to add multiple CSS classes to an element. You simply apply a list of CSS classes to the element's class property. Any element can accept a list of CSS classes, which makes it much simpler to write script when different actions can occur for a single element. For example, by adding multiple CSS classes to an element, you can easily write the code for a picture that changes when the mouse moves over it and changes again when it is clicked.

CSS Positioning

You can use CSS positioning to gain more control over the position and layout of elements on your Web pages. You can benefit from the following enhancements to CSS positioning:

  • Every HTML element can now be positioned, either absolutely or relatively.

  • Elements can be placed on a page with relative positioning, but can revert to absolute positioning on the fly.

  • Elements can now change from positioned to non-positioned, or vice-versa, at any time.

The currentStyle Object

Internet Explorer 5 introduces the currentStyle object (element.currentStyle), which exposes the current value that each element is using for all of its CSS properties (not just the ones that have been explicitly placed on that object). The currentStyle object represents the cascaded format and style of the object that is specified by global style sheets, inline styles, and HTML attributes.

Through the currentStyle object, cascaded style values of an object can be retrieved. Reading the currentStyle object differs from reading the style object, because style is not set inline on an object. For example, if the color property is set on a paragraph only through a linked or embedded style sheet and not inline, then object .currentStyle.color will return the color, whereas object .style.color will not return a value. If, however, you specify <P STYLE="color:'red'">, both the currentStyle and style objects will return a value of red.

The currentStyle object reflects the following CSS order of style precedence:

  1. Inline styles

  2. Style sheet rules

  3. Attributes on HTML tags

  4. Intrinsic definition of the HTML tag

The currentStyle object supports user-defined properties in style rules. It returns values that reflect the applied style settings for the page and may not reflect what is currently rendering at the time a value is retrieved. For example, an object that has "color:red; display:none" will return a currentStyle.color of red even though the object is not being rendered on the page. The currentStyle object, then, is not affected by the rendering constraints. Disabled style sheets also do not affect currentStyle objects.

Developer Mode

Internet Explorer 5 includes a Developer Mode, which enables developers and site designers to view all scripting and site error messages for debugging purposes. This option is turned off by default for most users who are simply browsing the Web. The error messages in Internet Explorer have also been improved to provide more detailed information about scripting errors, HTML structure errors, and other useful information for diagnosing application errors.

Compatibility Mode

Internet Explorer 5 has an Internet Explorer 4.0-compatibility mode. Using this special compatibility mode, you can set up a single computer to test your Web sites using the rendering capabilities of both versions of Internet Explorer.

Browserless Applications

You can create browserless (.hta) applications that are built using Internet technologies, but that do not run within the browser window. You author an .hta application by using Dynamic HTML and scripting, the same way you author Web pages for Internet Explorer 5. However, an .hta application can run in its own window, which is controlled from corner to corner, instead of running within the browser frame. The .hta applications are not subject to the security constraints imposed on Web pages; like executable (.exe) files, they can run without browser security restrictions.

An .hta application includes extensions for special behaviors and permissions that are not available to HTML pages. You can take any HTML page, set the "application/hta" MIME type, and then run it as an application. To make the HTML page into a full-featured application, you can add a few special .hta application declarations to specify the application icon, window size, window border, system menu, and other settings.

HTML-Enabled Area for User Comments

Internet Explorer 5 introduces a new intrinsic control similar to text boxes or drop-down boxes, which allows developers to insert a separate HTML-enabled area into their Web pages. Within this area, users can insert comments or any content they want.

.