Newlogo.gif (8646 bytes)Only in IE4 (but why?)


Poor Netscape really does seem to have been left behind this time, as even its implementation of Cascading Style Sheets - the core of its version of 'Dynamic HTML' - isn't as powerful as Microsoft's. Fix it soon please, Netscape, because we need to keep some competition going in the browser market!

The big difference between IE4 and Navigator 4's CSS handling is that IE4 lets you apply CSS styles to (some) non-container objects, such as <IMGs and pushbuttons, while Navigator doesn't. In many cases you can get the same effect in Navigator by enclosing the objects in a container (such as the Navigator-only <LAYER>), but if you do that, then you can end up with strange results on one or both of the two browsers.

Here are some examples. NOTE - if you're viewing this page in Navigator, expect to see some strange results!


Styles applied direct to images:

Scove1.jpg (7534 bytes)gradbox.gif (18623 bytes)

The images on this page automatically have a 4-pixel border and a margin of 5 pixels all round, courtesy of the page's CSS. It specifies a rule for all occurrences of the IMG HTML element type, like this:

<Style>
IMG {border:4px solid;margin:5;}
</style>

so every image is automatically styled. Alternatively you can create a class, like this:

<Style>
all.imgstyle {border:6px red solid;margin:5;}
</style>

then apply it to individual tags, like this:

<IMG src="MyPic.jpg" class="imgstyle">

That's what I've done with the image above - note how the class applied individually to the <IMG tag overrides the standard style specified in the IMG {} CSS rule.

One other point about classes - in this example, I've created the class within the collection of all HTML element types ('all.imgstyle'). This means that I could apply that class to any HTML element that can be styled, for example putting a 6-pixel border round a DIV. On the other hand, now that I've used that name for an all-objects class, I can't create other classes with the same name, but specific to individual element types (as in the multiple 'alternative' classes I created for H1, H2 etc on the basic classes page). It doesn't make any difference to the <IMG tag though - the syntax is still class="imgstyle" whether the class is defined as 'all.imgstyle' or 'IMG.imgstyle'.


Applying styles to forms:

  This is my form

Type text here:

This almost works in Navigator too, although introducing a line break in the form (to put the text box below the buttons) made it go wrong. The CSS rule for this is:

FORM {color:yellow;background-color:blue}


Applying style classes to pushbuttons

         

You can't define a style to be automatically applied to every pushbutton (or to other specific input types, such as text fields), but you can create classes and apply them to button-defining HTML tags. The first three butttons have a class which gives them foreground and background colours, while the second three's class gives them a background-image property.

The CSS class definitions are:

all.specialbutton {color:blue; background-color:yellow}
all.graphbutton {background-image: url(Paulbtn.jpg); color:red; font-weight:bold}

The button defintions are:

<INPUT TYPE="button" CLASS="specialbutton"...

and so on.


And finally,  you can do some Dynamic HTML programming with CSSs in IE4.

In Internet Explorer 4.0 you can access the properties of cascading style sheet rules, and change them from scripts. When you change a rule's property, the browser redisplays every object on the page to which that rule applies. This lets you change the appearance (and even visibility) of a large number objects with a single script statement - potentially very powerful stuff. Here are a couple of examples.


Modifying text styles

This is H3 Text

This is ordinary text

This is H3 Text too

This is more ordinary text

And this is H3 text as well!

Try clicking the 'Change H3 style' button - all the H3-styled text items change appearance. The JavaScript routine that does this is in the <HEAD> section of this page. It modifies three style properties (colour, decoration, size) each time through, so there are three script statements.


Controlling visibility.

Scove1.jpg (7534 bytes)gradbox.gif (18623 bytes)

Click the button below - all the images in the page (not just the three above) will disappear. Click the button again and they'll all come back. The JavaScript routine is toggling the IMG style rule's .style.visibility property between 'visible' and 'hidden' values, just as a script might toggle the .style.visibility property of an individual <IMG.. tag object.

You can also manipulate the rule's .style.display property in the same way - doing this makes the images relinquish their screen space when they disappear.

Although hiding and showing images is fun (OK, so I don't get out much!), a more valuable use of these techniques might be to show and hide DIVs and other containers, such as the 'eye catching boxouts' on the 'Not just fancy text' page. For example, you could have a 'hide/show tips' button on a tutorial page.


How scripts access CSS properties in IE4 Dynamic HTML.

You access CSS properties via one of IE4's 'collections', this time the collection of style sheets for the document (see filters, last month, for other examples of collections).

Each style sheet contains one or more rules. For example this sheet:

<style ID="MyCSS">
H3 {color:blue; font-size:18; text-decoration: underline}
IMG {border:4px solid;margin:5; visibility:visible}
</style>

has two rules (H3 and IMG). Rules are numbered from zero within a sheet, so this sheet's rules are 0 and 1 respectively. Note that this style sheet also has an ID="MyCSS"  keyword - it's not mandatory, but it makes it easier to access the sheet's properties (see below).

Here's a script statement to modify the H3 rule's 'color' property:

document.styleSheets.MyCSS.rules[0].style.color="red"

This means 'the .style.color property of rule 0 of the sheet "MyCSS" within the collection of style sheets for this document'. If your document contains just one style sheet (as most documents in fact do), you can drop the ID="MyCSS" and just say:

document.styleSheets[0].rules[0].style.color="red"

However I like to use ID= names as they help to stop errors from creeping in during later modifications. If you <LINK style sheets in from external files, they too become members of the collection of sheets for the document.

Indexing the rules collection (ie.g. rules[0]) is the only way you can get at individual rules within a sheet. This isn't very satisfactory, since if you add new rules anywhere except at the end of a sheet, you're likely to make existing rule references invalid. One way to avoid this problem is to put just one rule in each style sheet you're going to access from scripts, and give each sheet a name, like this:

<style id="H3Sheet">
H3 {color:blue; font-size:18; text-decoration: underline}
</style>
<style id="IMGSheet">

IMG {border:4px solid;margin:5; visibility:visible}
</style>

Now you can use the sheet ID names, with the rule number always zero, like this:

document.styleSheets.H3Sheet.rules[0].style.textDecoration="none"

A final point about scripting CSS properties - remember that scriptable property names are spelt differently from CSS attribute names(!)  The conversion rule is, at least, consistent - to convert a CSS name to a property name, first drop the hyphens, then captialise each letter which immediately followed a hyphen in the CSS name. Thus the CSS attribute text-decoration becomes the scriptable property textDecoration (watch those capitals!), font-size becomes fontSize, and so on. (Consistent or not, whoever dreamed that one up deserves to lose their stock options!)


Back to Menu