 | ||
|
| ||
| ||
|
| ||
Will Friedman
Microsoft Corporation
October 5, 1998
The following article was originally published in Site Builder Magazine (now known as MSDN Online Voices).
As Microsoft's Strategic Partner Liaison for Internet Explorer 5, one of the things I hear most often from partners at major Web sites is that they only want to author their content once. Therefore I have developed this cheat sheet to focus in on the things that take advantage of innovations in Internet Explorer 4.0 and 5, but degrade gracefully on downlevel browsers. These advances address issues such as speed, usability, and getting the user to return to your site. For example. using CSS2 Fixed Tables, you can dramatically speed up pages that use HTML tables. Also, I will show you how to use script to set the browser home page to your page (with the user's permission, of course).
All of the items in this cheat sheet:
Note: The mouseover effects, HTML 4.0, and the AddFavorite method described below are all available in Internet Explorer 4.0.
Embed the following code in the <HEAD> of your HTML document for automatic mouseover effects on all links on your page. The styles a and a:visited are used for compatibility with Internet Explorer 3.0.
<STYLE>
<!--
a {color:blue;}
a:visited {color:purple;}
a:hover {color:red;}
-->
</STYLE>
The comment tags allow browsers that don't support the hover effect to ignore this code. This feature is based on the CSS2 specification 
.
Internet Explorer 4.0 supports HTML 4.0 . Two new attributes in HTML 4.0 are LABEL and ACCESSKEY. They are used to improve usability and accessibility by associating a keyboard shortcut or a label with the element. When the users clicks on the LABEL, the click event is passed on to the associated element. ACCESSKEY can be used either directly on an element or in conjunction with a LABEL.
The examples below illustrate this further. You may wish to cut and paste them into an HTML document to observe the behavior.
In this example, clicking the text "Check to receive mailing" will toggle the checkbox.
<LABEL FOR="chkInfo"> Check to receive mailing </LABEL> <INPUT TYPE="CHECKBOX" ID="chkInfo" VALUE="SendMailing">
<A HREF="go.htm" ACCESSKEY="I"> Click here or press Alt-I for Instant Ordering </A>
In this example, the underlined N gives a visual cue that N is the access key, which will give the <INPUT> focus. Users familiar with accessibility standards in traditional Windows applications will recognize this convention.
<LABEL FOR="txtName" ACCESSKEY="N"> <U>N</U>ame:</LABEL> <INPUT TYPE="TEXT" ID="txtName" SIZE=30>
Browsers that don't support these form enhancements ignore them gracefully.
Note: To see the <INPUT> elements appear in Navigator, you must enclose them between <FORM> tags. You will already be doing this for any form that you intend Navigator users to see.
The HTML 4.0 TITLE attribute causes a ToolTip to be displayed when the user hovers over an element:
<A HREF="./completesale.htm"> <IMG SRC="./gifs/productimage.gif" TITLE="Click this image to purchase"></A>
Unlike the ALT attribute, which applies only to <AREA< and <IMG> tags, you can place a TITLE on any HTML element, such as over an anchor.
The following code is used to add a link that, when clicked, adds the current page to the user's Favorites folder. There are two versions, one to use if you serve the same page to all users, regardless of browser version, and one if you are sure the user has Internet Explorer 4.0 or higher.
This script does its own client-side browser detection.
<SCRIPT>
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0)
&& (parseInt(navigator.appVersion) >= 4)) {
document.write("<U>
<SPAN STYLE='color:blue;cursor:hand;'
onclick='window.external.
AddFavorite(location.href, document.title);'>
Add this page to your favorites</SPAN>
</U>");
}
//-->
</SCRIPT>
This script assumes you perform browser detection on the server or have a homogenous Internet Explorer 4. x environment.
<U><SPAN STYLE='color:blue;cursor:hand;' onclick='window.external. AddFavorite(location.href, document.title);'> Add this page to your favorites</SPAN></U>
Note: Fixed tables, the custom favorites icon, improved cache control, and the home page object model will be supported in Internet Explorer 5, but won't hurt users of any downlevel browser.
HTML tables are normally relatively slow to appear, since browsers calculate the size of each cell in the table before beginning to draw it. When you set the CSS2 table-layout property to FIXED, the browser uses the column-width and row-height information in the first row of the table to lay out the table immediately. Fixed tables render progressively, resulting in a significant speed improvement.
Downlevel browsers simply ignore the style attribute, and render the table normally.
Add the fixed-table layout style to your table as shown in the sample below:
<TABLE STYLE="table-layout:fixed"> . . . </TABLE>
This trick doesn't require any code. To place a custom icon in the user's Favorites, simply place a logo icon at the root of your Web site and name it favicon.ico. For example, put the file at http://www.domainname.com/favicon.ico. When the user adds any page in your domain to his or her Favorites, your icon will appear next to the link -- in both the Favorites menu and the Favorites pane, which appears at the right side of the browser.
You must use the Win32 Icon file format for this image. As of this writing, this feature works on Win32 versions of Internet Explorer 5 only.
If for some reason you can't put the icon at the root of your domain, you can include the tag below to specify an alternate location:
<LINK REL="SHORTCUT ICON" href="/path/foo.ico">
Internet Explorer 5 does a better job of respecting the HTTP directive EXPIRES. The EXPIRES directive instructs the browser to get an item from the cache, instead of from the Web server, until such time as the content "expires." Older browsers have performed a roundtrip to the server even when this tag was present. We are proud to say Internet Explorer 5 is "less dumb," and that it respects the EXPIRES setting.
EXPIRES directive can be set either on the server or by using a <META> tag. If you set it on the server, you can set different expiration values for different items in a page. For example, you could expire an ad GIF immediately, so it always comes from the server, while setting the HTML page expiration date in the future so the next time the page is loaded, the text will come from the cache. See your server software documentation for details on how to set HTTP directives on a per-file basis.
The syntax for setting the EXPIRES directive using the <META> tag is as follows:
<META HTTP-EQUIV="expires" VALUE="Tue, 23 Jun 1998 01:46:05 GMT">
The following example takes advantage of an intrinsic DHTML behavior to change the user's home page to the current page. The style block, which goes in the <HEAD> of the document, associates the .homepage class with the built-in behavior. The inline STYLE on the <SPAN> tag simulates the look and feel of a hot link, but clicking the link doesn't cause a new page to be loaded.
This example also uses conditional comments, a new Internet Explorer 5 feature, to gracefully hide the link from downlevel browsers.
The style block goes in the page <HEAD>:
<STYLE>
<!--
.homepage {behavior:url(#_IE_)}
-->
</STYLE>
This code can be placed anywhere in the page body:
<!--#if IE 5#> <U><SPAN STYLE='color:blue;cursor:hand;' CLASS=homepage ONCLICK='this.setHomePage(window.location);'> Make this your home page</SPAN></U> <!#endif#-->
You can also change the user's home page to a page other than the current page by replacing window.location in the above example with a specific URL.
For example,
ONCLICK="this.setHomePage('http://www.myhome.com')"
To prevent "slamming," Internet Explorer first asks the user if he or she wants to change their home page rather than setting it automatically.
Will Friedman is the Strategic Partner Liaison for Internet Explorer 5, and works with top Web sites to educate them on the features and opportunities coming in Internet Explorer 5. In his spare time, he is rapidly forgetting how to play guitar.
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top