IE Tips and Tricks - Part 1

Article
06/28/2006

It has occurred to me that I haven’t written much about client-side development and all that fun web browsery stuff. Before I get branded a server only guy, I’ve decided to write an n part series (where n is the number of articles I can write before getting bored of the subject) about my favorite HTML/CSS/Script tips and tricks.

The first is none other than DHTML expressions. DHTML expressions were a new feature in Internet Explorer 5 (back when the IE team was still attempting to innovate), however are still not used very often because of bugginess and performance issues. I’ve also seen several IE bugs that cause the IE window to crash if an expression exists against an object that’s since been removed from the DOM. I maintain that DHTML expressions (also called CSS expressions and “dynamic properties”) are quite helpful if used in very simple solutions, where the expression is something that can be resolved quickly as the IE DOM changes.

Expressions can be declared inline using a style attribute, within a CSS selector, or using script. I prefer the latter two since it keeps things simple. One of my favorite uses of expressions is to show and hide various UI depending on the state of a check box, radio button, or dropdown value. It allows UI to be hidden if certain options are not selected, or allows for an easy implementation of a “Show Advanced” checkbox.

In my example, I’m creating a simple time sheet that shows hours worked per pay period, and allows the user to show various classifications of work (Actual hours worked, Planned hours, and Overtime hours.) None of this uses script and it’s easy to see how it works, and doesn’t require logic complicated enough to warrant the use of a debugger (good luck debugging problems caused by expressions.)

Here’s my web page for you to copy into notepad and save locally:

<style>

BODY {font-family: Arial; font-size: 11px;}

TABLE {width: 75%; border: 1px solid grey;}

TH {background: #BBBBBB;}

.Total TD {text-align: right; border-top: 2px solid #999999;}

.Planned {display: expression(cbPlanned.checked ? '' : 'none'); background: #BBBBFF; text-align: right;}

.Actual {display: expression(cbActual.checked ? '' : 'none'); background: #BBFFBB; text-align: right;}

.Overtime {display: expression(cbOvertime.checked ? '' : 'none'); background: #FFBBBB; text-align: right;}

</style>

<input type="checkbox" id="cbPlanned"><label for="cbPlanned" style="background: #BBBBFF;">Show Planned</label>

<input type="checkbox" id="cbActual"><label for="cbActual" style="background: #BBFFBB;">Show Actual</label>

<input type="checkbox" id="cbOvertime"><label for="cbOvertime" style="background: #FFBBBB;">Show Overtime</label>

<tr><th>Period</th><th>Date</th><th>Work</th></tr>

</table>

As you can see, most of the logic is within the <style> block. Each planned work row has a class of “Planned”. In the CSS definition for the Planned class, the “display” property has an expression of whether or not the cbPlanned checkbox is checked. When the checkbox is un-checked, the display property of the CSS class becomes ‘none’.

Click Here to load this file in your web browser.

That’s it!

Mike – Web Dev Guy

IE Tips and Tricks - Part 1

Additional resources