 | ||
|
| ||
| ||
|
| ||
Michael Wallent
Lead Program Manager, DHTML
Microsoft Corporation
July 17, 1998
Updated: December 7, 1998
The following article was originally published in the Site Builder Magazine (now known as MSDN Online Voices) "DHTML Dude" column.
At last month's online chat about the Internet Explorer 5 Developer Preview, there was a lot of interest in a new technology that we under-documented a bit in this release. When I mentioned "conditional comments," there were many quizzical posts. The chat wasn't the place to go into a lot of detail, so I'll cover it here.
Also, there were two other questions during the chat for which I didn't have the answer off the top of my head (yes, sometimes even the DHTML Dude needs to look in the SDK).
The first was pretty simple: When using a group of radio buttons, what is the simplest way to get the value of the one that's checked? I thought we had exposed a method that would return the checked value that would have been posted, but alas, we were not that clever.
Here's a chunk of code from a page that we use internally:
<HTML>
<BODY STYLE="font-family: verdana">
<H2>Radio Button Value Check</H2>
<FIELDSET STYLE="width:100px">
<LEGEND>Milestone</LEGEND>
<INPUT TYPE=radio
NAME=milestone VALUE="Beta 1">Beta 1<BR>
<INPUT TYPE=radio
NAME=milestone CHECKED VALUE="Beta 2">Beta
2<BR>
</FIELDSET>
<BR><BR>
<INPUT VALUE="Show Checked" TYPE=button
onclick="alert(getRadioValue('milestone'));">
<SCRIPT LANGUAGE="Jscript"><!--
function getRadioValue(radioName) {
var collection;
collection = document.all[radioName];
for (i=0;i<collection.length;i++) {
if (collection[i].checked)
return(collection[i].value);
}
}
//--></SCRIPT>
</BODY>
</HTML>
Basically, to make any set of radio buttons mutually exclusive, you give them all the same "name" property. The getRadioValue() method takes the name of the radio-button group for which you want to get the selected value. It iterates through all the items in the document with that name, and returns the value property for the element where checked == true. This function will work with any set of radio buttons.
Also note how the new HTML 4.0 <FIELDSET> and <LEGEND> tags are used to create visual groupings. These are supported in both Internet Explorer 4.0 and 5.0.
The other hot topic at the chat was using in your own applications the HTML Editing Component included with Internet Explorer 4.0 and 5.0. The same editing components we use internally in both Outlook Express and Visual InterDev™ can be used in your own applications.
Here's more information on the HTML Editing Component.
One common question I get: "How do I make my content degrade for other browsers?"
Previously, the answer was to use browser-sniffing on the server, or sniff the version information on the client with script. However, this had some limitations. Doing the detection on the server was time-consuming, and could be hard to manage. Doing browser-sniffing wasn't always the easiest thing to do, and it could add management overhead. So we looked at these problems again, and came up with a technology that we think will make this easier for you: Conditional comments.
There are two flavors of conditional comment. One has downlevel browsers skip the content (downlevel-hidden), and the other has downlevel browsers read (downlevel-revealed), but may have Internet Explorer skip it.
For example:
<!--[if IE 5]> Welcome to Internet Explorer 5 <![endif]--> <![if ! IE 5]> Please upgrade to Internet Explorer 5 <![endif]>
The first comment block is a downlevel hidden block -- downlevel browsers read it as a comment, but Internet Explorer 5 will read it as non-commented content if the expression is evaluated as true.
The second comment block is a downlevel-revealed block; downlevel browsers will treat the content inside the block as normal content. Internet Explorer 5 will ignore it completely if the expression is evaluated as true.
For those of you who like syntax diagrams, here's the info:
downlevel-revealed -> <![if expression
]>
html
<![endif]>
downlevel-hidden -> <!--[if expression ]>
html
<![endif]-->
expression -> term
expression -> expression | term
term -> value
term -> term & value
value -> true
value -> false
value -> !value
value -> (expression)
value -> comparison
comparison -> feature
comparison -> feature version
comparison -> lt feature version
comparison -> lte feature version
comparison -> gt feature version
comparison -> lte feature version
feature -> [A-Za-z][A-Za-z0-9]*
version -> [0-9][A-Za-z0-9.]*
In the Developer Preview release of Internet Explorer 5, the only "feature" for which you can test is "IE." In future releases of Internet Explorer 5, we'll add more conditions that you can test for.
Any content that is skipped doesn't show up in the object model of the document, so it's easy to create different representations of the same content in a page, but not pay the download cost for both.
For example, if I wanted to alpha-filter some content:
<DIV STYLE="filter: alpha(opacity=50)"> This is filtered </DIV>
With Internet Explorer 4.0, I would have created an IMG pointing to a representation of the alpha-filtered text, but set it to "display: none" with some browser-sniffing code on the page so it wouldn't show up. However, the image source would still be downloaded, so my page size with Internet Explorer wouldn't be smaller.
Now, with conditional comments, you can do the following:
<!--[if IE ]> <DIV STYLE="filter: alpha(opacity=50)"> This is filtered </DIV> <![endif]--> <![if ! IE ]> <IMG SRC="filteredtext.gif"> <![endif]>
With a single chunk of HTML, you can have two flavors of the same effect, and your browser will display the one that's right for you. Plus, the IMG is skipped entirely -- it's never downloaded. And a script engine was never started to figure out what kind of page to show, which speeds up the time it takes to load the page.
Long ago, when I was in college (well, not that long ago), I had an electrical engineering professor who would solve the calculus in the circuit diagrams down to some point and then say, "Solved! Now, you do the calculus, at home, for fun."
Well, same thing here. You have the tools. You have the knowledge. Between now and the 10th of August, send me a link to your DHTML site optimized for Internet Explorer 5. I'll post links to the best ones in the next DHTML Dude column, and maybe you'll even get some cool paraphernalia out of it.
See you next month.
Michael Wallent is Microsoft's lead program manager for DHTML and an exceedingly proud new papa.
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