Standards in 30 Seconds

W3C Standard Travel Channel Demo

CSS first-line Formatting

#heading:first-line 
{ color: #993333; font-size: 26pt; }

HTML 4.0 Image Button

<button 
style="background-color: #444478; 
color:white; font-weight:bold;"
onclick="load('xml/flights.xml')">
<img width=70 height=34 
src="images/tinylogo.gif" 
align=left>Go Find<br>That Flight!
</button>

DOM2 CSS Hiding and Showing Elements

function hideElt(elementID) {
    document.getElementById(elementID).
       style.opacity = '0.00';
}

function showElt(elementID) {
    document.getElementById(elementID).
       style.opacity = '1.00';
}

DOM2 CSS Highlighting Elements

function hlt(event) {
  this.style.backgroundColor=
     "rgb(255, 255, 204)";
  this.style.textDecoration=
     "underline";
}

function dlt(event) {
  this.style.backgroundColor=
      "transparent";
  this.style.textDecoration="none";
}

Moving (Offsetting) an Element

function depress() {
  this.style.position="relative";
  this.style.left="3px;"
  this.style.top="3px;"
  this.style.color="#660000";
}

DOM1 Iterating Over Elements by Tag Name

function init() {
  var links = 
    document.getElementsByTagName("A");
  for (var i=0; i<links.length; i++) {
    links.item(i).onmouseover=hlt;
    links.item(i).onmouseout=dlt;
    links.item(i).onmousedown=depress;
    links.item(i).onmouseup=undepress;
    links[i].onclick=donothing;
  }
}

HTML Namespace in XML

<html:form>
<html:input type="button" 
   id="toggle" value="Toggle Style" 
   onclick="initiateToggle(); 
   return false;"/>
</html:form>
<html:script src="flights.js" />

What Makes this Possible?

Gecko

Open Standards Leadership

Supporting Older Browsers

CSS1 Support Checklists: Nav4/IE4 Win95/Mac

All properties: http://style.webreview.com/
mastergrid.html

"Safe" properties: http://style.webreview.com/safegrid.html

"Unsafe" properties: http://style.webreview.com/
unsafegrid.html

Note: text background color

Nav4 puts background-color behind an element's text. IE4 puts it to the right edge of the page. Example: this markup:
<P STYLE="background-color: red">red background</P>

looks like this in Nav4:
red background
... and like this in IE4:
red background

Hint: text background color

To make background color behind the element's text only in both browsers, set background color on a <SPAN> enclosing the text.

white on black

Hint: text background color

To make background color to right edge of page in both browsers, use 1x1 table element with WIDTH=100%.

white on black

Hint: background color for positioned elements

To make background color behind entire element area (regardless of amount of text), use 1x1 borderless table with WIDTH and HEIGHT and background properties set to match element.

some text that doesn't fill the element

Hint: Keep CSSP Simple!

Hint: put CSS1/CSSP markup in HTML comments!

Put the contents of the STYLE element in HTML comments. This hides the CSS1/CSSP markup from older browsers, so it is not seen by user. Example:

<STYLE TYPE="text/css"><!--
#foo { color: red }
--></STYLE>

Browser Detection

Use the Ultimate JavaScript Client Sniffer at: http://developer.netscape.com/docs/
examples/index.html?content=
javascript/browser_type.html


Supports Nav2+, IE3+, Opera on all platforms.

Browser Detection

After you detect browser vendor, version, and (when necessary) OS, you can:

DOM Sniffing by Object Detection

if (document.getElementById) 
{   /* W3C  DOM CODE */  }

else if (document.layers) 
{   /* Nav4 DOM CODE */  }

else if (document.all) 
{   /* IE4  DOM CODE */  }

Dynamic Markup: dw

Convenience function. document.write(str) iff browser version >= optional argument minVersion and browser version <= optional argument maxVersion.

function dw(str, minVersion, maxVersion)
{   if ( ((dw.arguments.length < 3) || 
          (is.major <= maxVersion)) 
         && ((dw.arguments.length < 2) || 
             (is.major >= minVersion)))
    document.write(str)  }

Dynamic Markup: dwb

Convenience function. document.write(str) iff optional argument aBoolean is true. Powerful when used with booleans from JavaScript Client Sniffer.

function dwb (str, aBoolean)
{   if  ((dwb.arguments.length < 2) || 
         aBoolean)
    document.write(str)  }

// Example: provide advice to user
dwb ("Download Netscape Now!", is.ie);

Dynamic Markup: sv

Convenience function. Return str iff browser version is >= optional argument minVersion and <= optional argument maxVersion. Else return "". Useful when concatenating long strings to write out.

function sv(str, minVersion, maxVersion)
{   if ( ((sv.arguments.length < 3) || 
         (is.major <= maxVersion)) 
         && ((sv.arguments.length < 2) || 
            (is.major >= minVersion)))
    return str;
    else return "";
}

Dynamic Markup: sb

Convenience function. Return str iff optional second argument aBoolean is true. Else return "". Useful when concatenating long strings to write out.

function sb (str, aBoolean)
{   if  ((sb.arguments.length < 2) || 
         aBoolean)
    return str;
    else return "";
}

Where to get the source code:

Functions dw, dwb, sv, and sb are included in the xbdhtml.js API (view or download), which is explained in the TechNote on Setting CSSP Properties from JavaScript at:

http://developer.netscape.com/docs/
technote/dynhtml/index.html?content=
csspapi/csspapi.html

Making CSS1 Work in W3C DOM 2

1. In HEAD, create a target style sheet:

<STYLE ID="ietssxyz" 
TITLE="headstyle"
TYPE="text/css"></STYLE>

Making CSS1 Work in W3C DOM 2

2. Define a function to get the style sheet object

var styleSheetTitle = "headstyle";
function getStyleSheetByTitle (styleSheetTitle)
{  var i = 0;
   while ( ( i < document.styleSheets.length ) &&
        (document.styleSheets.item(i).title != 
         styleSheetTitle) ) { i++; }
   if (i == document.styleSheets.length) return null;
   else return document.styleSheets.item(i);
}

Making CSS1 Work in W3C DOM 2

3. Define a convenience function to add a rule to the style sheet

function addRuleToStyleElement 
   (styleSheetElement, selector, declaration)
{  styleSheetElement.insertRule (selector + 
   " { " + declaration + " } ",
   styleSheetElement.cssRules.length); 
   // insert at end of sheet
}

Making CSS1 Work in All 3

To achieve the same result, the rules must be added by JavaScript at the same place in the HTML markup in the same order.

This will make sure they get the same CSS1 priority level in IE4 and Nav4. (Later rules have higher priority.)

Making CSS1 Work in All 3

In HEAD, create a target style sheet:

<STYLE ID="ietssxyz" 
TITLE="headstyle"
TYPE="text/css"></STYLE>

Making CSS1 Work in All 3

In SCRIPT within HEAD, add rules to target style sheet:

<SCRIPT LANGUAGE="JavaScript1.2">
if (is.nav5up) addRuleToStyleElement 
   (styleSheetElement, ".hint", 
   "background-color:yellow"); 
else if (is.nav4)
document.classes.hint.all.color 
= "yellow";
else if (is.ie4up) document.styleSheets
["ietssxyz"].addRule (".hint", 
"background-color:yellow");
</SCRIPT>

Automating the Mapping:

You can automatically generate cross-browser JavaScript to define CSS1 rules with the code generator in the TechNote on Setting CSS1 Properties from JavaScript at:

http://developer.netscape.com/docs/
technote/index.html?content=
dynhtml/css1tojs/css1tojs.html

DHTML Presentation Template TechNote:

TechNote on this Cross-Browser DHTML Presentation Template (for Nav4, IE4, and Nav3) and downloadable version at:

http://developer.netscape.com/docs/
technote/index.html?content=
javascript/prestemp/prestemp.html

APIs

Netscape xbdhtml.js: view or download,
     and read the TechNote
CBDHTML API: http://members.aol.com/
MHall75819/dhtml/cbdhtml.html

Dynamic Duo Tutorial:
http://members.xoom.com/dynduo/
Active Layers API:
http://www.alapi.com/lite2/
FreeDOM: http://www.thepattern.com/

URLs

Newsgroups

How You Can Help