HTML Card / Foldouts / Charts - February 2004 Edition - What's New?

Here are the differences between the February 2004 and September 2001 editions.

Feature support is shown for seven browsers instead of two: Microsoft Internet Explorer 4-6, Netscape Navigator 4-7, AOL 7, Mozilla 1.3, Konqueror 3, Safari, and Opera 6. Compliance with W3C standards HTML 4.01, XHTML1.1, and CSS2. is also indicated.

So, about these seven browser brands ... there's more to it ... and there's less to it. On the one hand AOL uses IE, and Netscape 6-7 is identical to Mozilla 1.0-1.3. I found no substantive differences within these pairings.  On the other hand Netscape 4 is a radically different browser than Netscape 6-7. And there are minor differences between Mac and Windows for all browsers that support both (IE, Netscape, Opera).  I tested nineteen unique browser / OS / version combinations at browsercam.com and all nontrivial incompatibilities I report in this new edition.

   

Here's how 7-browser support is indicated for <optgroup> This tag indents choices in a drop-down box. On the right is how it appears in the Tags section. The green border indicates this feature is not supported in Netscape 4. However it is supported by Netscape 6 – that's what the "N6" means. (It's also in Netscape 7. "N6" means version 6 and higher.)  The co-evolving Mozilla browser supports whatever Netcape 6-7 supports. Internet Explorer support for this tag didn't start until version 6 either – that's what the "IE6" means. The same applies to its co-evolving browser, AOL. (The feature is in AOL7 but not in the earlier pre-IE6 AOL browsers.) Opera does not support it at all ("-Op").  The white background indicates the other browsers do support the feature (Konqueror and Safari). Whenever a browser isn't explicitly mentioned, check the background color: white means yes.

   

One of the hardest things to remember with CSS is how to package it. The Styles section now has a very brief example of CSS with HTML. There are so many different ways to plug CSS into HTML. Here are three of the most common.  

This is from panel 8 of the Styles Foldout.  (The same figure is on the Styles Page of the Card.) The Lime is made green using the most simple and direct way: a span of text explicity given the style color:green. The Apple tree is red because its paragraph is in the "fruity" class. The entire page is black-on-white by default (only "zest" is black in the example), by virtue of the linked style sheet x.css.

Most style sheets uses one of these methods. Or a simple variation: class-specific styles can be in the .css file, or tag-specific styles in the <style> element. The big example on the front of the Card shows other ways (id-specific, div-specific, multiple-tag-specific). The Styles section shows some of the more exotic mechamisms (@-rules, pseudo-classes, pseudo-elements).

    

The new edition has more color cues.

Before

After

By the way, the only browser-specific features indicated here are that <div nowrap> and <dt nowrap> are IE-only, and <dir> has no visual effect in Opera. The gold hands indicate deprecated features, and point to alternatives. The other features are universal and standard.

   

The all-important <title> tag is not only the browser window title. It's also the starting point for a bookmark or favorite name. The new edition shows you what characters to avoid, so users don't get an error message when they add you to their favorites:

   

The Foldouts now have sections for URLs, SSI, and XHTML. In the last edition, these sections were only on the Card. So now the only thing the Card has that the Foldouts doesn't is the great big annotated example on the front. (And now you can get that on a chart.)
	The new HTML Characters Foldout

   

Speaking of the great big annotated example, it now shows a sample form-submission:

Whenever a user submits a form, a string like this is transmitted to the web server using HTTP.  It's simply stuck onto the end of the URL if <form method="get">  Or it's the http-request body if <form method="post">. These field names (text, type, fast, email) are specified in the <input> tags.

  

Updated and corrected for who supports what:

<basefont>  <button>  <link>  <optgroup>  <option>   <q>  <ruby>  <rt>
{border-collapse}  {border-spacing}  {font:caption, icon, menu, etc.}
{font-variant:small-caps}  {list-style-type}  {visibility:collapse}
&apos;  &thinsp  &ensp; &emsp; &#128;  &#142;  &#152;
   

More tag changes: <img align=left/right> relationship to <br clear> is demonstrated. <a name> is associated with URL #-suffix. <bgsound> can appear anywhere. <select> and <option> and <textarea> now show tiny examples for visual cueing. <input> mentions Netscape 4 requres it to be inside a <form> (it's maddeningly invisible otherwise). Fixed <option> visible-choice-name – it's the element, not the name attribute. <select> size correction (before open, not after open).

More style changes: The eight {scrollbar-...-color} styles are all spelled out. As are the special-effects in {filter: progid:ImageTransform.Microsoft...} The 21 filters are shown with syntax cues. (Both are  color-coded  to indicate IE-only availability.) Added instructions for getting details on the filters and the Windows colors (activeborder, graytext, threedlightshadow,...). {position:absolute; bottom:npx} is messy and should be avoided. /* Comments are valid in CSS files */

More character changes: The Konqueror browser supports the characters that Netscape 4 did, plus the greek alphabet and not much else. Many characters were fixed in IE5 for the Mac. Many obscure characters never were supported on all IE systems (e.g. harr, hArr, rArr, prop, isin, ni sub sup sube supe and or cup ang perp there4 forall exist nabla oplus).

HTML / CSS Card Dense print Laminated At-a-glance 8.5" x 11" $10 each

HTML / CSS Foldouts Large print Folds compact 8.5" x 3.5" $10 for the set

HTML / CSS Charts Large print 12" x 18" Wall charts $10 each $25 for all four