Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

Conditional Comments, Radio Buttons

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Michael Wallent
Microsoft Corporation

July 17, 1998
Updated: December 7, 1998

Contents

With the Radio Button Blasting
HTML Editing Component
HTML Is Conditional
A Little Summer Fun

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).

With the Radio Button Blasting

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.

View the sample. And here's the code:

<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.

HTML Editing Component

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.

HTML Is Conditional

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.

A Little Summer Fun

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.

See you next month.

 

DHTML Dude

Michael Wallent is Microsoft's lead program manager for DHTML and an exceedingly proud new papa.


  
Show:
© 2015 Microsoft