CSS Simplifies Your Life
Part 3
The How and Why!
The Style Sheet code for the moving "layer" is very similar to the first part of the style sheet, except that a number sign "#", is placed at the beginning of the line.
#layout{position: relative;
visibility: show;
left: .02in; top: .02in;}
The JavaScript which is used to move the "layer" is also very simple:
function moveme(left,top){
if (navigator.appVersion.substring(0,1) == "4"){
if (navigator.appName == "Netscape")
document.layers.layout.moveTo(left,top);
else {
layout.style.pixelLeft = left;
layout.style.pixelTop = top;
}
}
else
alert('This effect requires a DHTML-capable Web browser.')
}
The browser uses the ID parameter of the P "layer" to indentify the style sheet properties:
<P ID="layout">paragraph text goes in here</P>
The JavaScript which causes the function to be executed is very simple:
<A HREF="#" onMouseOver="moveme(40,21)";>this text</A>
The function checks for browser and version, and writes the correct code for the appropriate Web browser. If it's Netscape4, then it uses the "layers" terminology and the moveTo() function to move the layer. If it's MSIE4, then it uses the pixelLeft and pixelTop properties of the style to move the "layer." If it's neither, then it just pops up an alert telling the user that they need a DHTML-capable browser.
Although the above example may look like JavaScript SS, it's actually just CSS and JavaScript. What's the difference? Here's a similar Style Sheet in JavaScript Style Sheet format:
<STYLE TYPE="text/javascript">
classes.NSDoo.P.color = "green"
classes.NSDoo.P.fontStyle = "italic"
classes.NSDoo.P.marginLeft = 20
classes.NSDoo.P.marginTop = 10
</STYLE>
This is an example of JavaScript Style Sheets. This paragraph is defined as a class with green, italic text, with a marginLeft of 20, and a marginTop of 10.
JavaScript Style Sheets give a further amount of control over the elements contained in a Web page, but at this time they only work in Netscape 4+ browsers. While a few if/then statements would allow you to write code for the appropriate browser, at this point the advantages of inline JavaScript Style Sheets are slim. Using a standard CSS which is linked to each document seems to be the most effective use of Style Sheets.
The main advantage of linked Style Sheets is that you can change the entire look of many pages at once by simply changing the single Style Sheet. Standard CSS can be used by each browser, and as you have seen, you can utilize JavaScript with standard CSS to create some nifty, useful effects. Additionally, JSS could be used on individual tags as needed or desired for Netscape-specific effects.
Style Sheets are useful for developers who wish a bit more control of the styles used on the pages they create. They're useful for corporate sites that wish to feature their corporate style on each page of the site. They're easy to use, and fairly portable. We've only skimmed the surface here, so now we'll just
point you to the many CSS resources that are available on the Web.
|
