Style Sheets: Changes to Industry Recommendations
Specifications last updated 2004-03-12.
Some Cascading Style Sheet (CSS) recommendations made by the World Wide Web Consortium (W3C), and others, often do not work in a real-world application. Many of these recommendations are not well supported by all browsers.
The most notable support limitation is in Netscape Navigator 4 (N4) browser versions, some others relate to Internet Explorer (IE). The recommended standard and a more suitable alternative for each tag element are listed below, along with a brief reason why the change was made.
NOTE: Defining 'any' margin, padding, or border (to a value other than zero) is likely to be added to the default margins defined within the N4 versions of browsers. Use of margin, padding, and border should be done with caution and extensive testing.
SIDE NOTE: I generally prefer to avoid the use of the verdana font (not sure about the geneva font) as the font often appears too wide for standard web designs. However, many print designers prefer the use of the verdana font, and optionally the geneva font. Most often when the verdana font is used, a web site designer has the tendancy shrink the base font by one to two font sizes for design presentation.
The practice of shrinking the page's base font-size is contrary to that of making a site accessible, forcing the visitor to attempt to enlarge the font to a standard reading size. It should also be noted that while verdana is wider, and may be more readable, most systems may not have that font or even any of the other options. The missing fonts result in a site having smaller than expected text, making it that much harder to read.
Provided the page's base font-size is not shrunk too much from its default, it would then be an appropriate font to use.
| HTML Tag | Industry Recommended |
Better Alternative (in our CSS) |
Reasons for Change |
|---|---|---|---|
| BODY | line-spacing:1.33em; | (leave undefined) | Causes text overlap with larger text sizes. |
| H1 | font-size:2em; | font-size:1.4em; | Size reduced to overcome overpowering default size for header one. |
| margin-top:.67em; | (leave undefined) | Incompatible with N4, adds to default. | |
| margin-bottom:.67em; | (leave undefined) | Incompatible with N4, adds to default. | |
| font-weight:bolder; | font-weight:900; | Unsupported with N4. | |
| H2 | font-size:1.5em; | font-size:1.2em; | Adjusted to compensate for header one's size adjustment. |
| margin-top:.83em; | (leave undefined) | Incompatible with N4, adds to default. | |
| margin-bottom:.83em; | (leave undefined) | Incompatible with N4, adds to default. | |
| font-weight:bolder; | font-weight:900; | Unsupported with N4. | |
| H3 | margin-top:1em; | (leave undefined) | Incompatible with N4, adds to default. |
| margin-bottom:1em; | (leave undefined) | Incompatible with N4, adds to default. | |
| font-weight:bolder; | font-weight:900; | Unsupported with N4. | |
| H4 | margin-top:1.33em; | (leave undefined) | Incompatible with N4, adds to default. |
| margin-bottom:1.33em; | (leave undefined) | Incompatible with N4, adds to default. | |
| font-weight:bolder; | font-weight:900; | Unsupported with N4. | |
| H5 | margin-top:1.67em; | (leave undefined) | Incompatible with N4, adds to default. |
| margin-bottom:1.67em; | (leave undefined) | Incompatible with N4, adds to default. | |
| font-weight:bolder; | font-weight:900; | Unsupported with N4. | |
| H6 | margin-top:2.33em; | (leave undefined) | Incompatible with N4, adds to default. |
| margin-bottom:2.33em; | (leave undefined) | Incompatible with N4, adds to default. | |
| font-weight:bolder; | font-weight:900; | Unsupported with N4. | |
| TH | font-weight:bolder; | font-weight:900; | Unsupported with N4. |
| DL | margin-top:1.33em; | margin-top:0px; | Incompatible with N4, adds to default. Alternative provides a cleaner presentation in other browsers. |
| OL | margin-left:40px; | (leave undefined) | Incompatible with N4, adds to default. |
| margin-bottom:1.33em; | (leave undefined) | Incompatible with N4, adds to default. | |
| UL | margin-left:40px; | (leave undefined) | Incompatible with N4, adds to default. |
| margin-bottom:1.33em; | (leave undefined) | Incompatible with N4, adds to default. | |
| LI | display:list-item; | (leave undefined) | Incompatible with N4. |
| FIELDSET | margin-top:1.33em; | (leave undefined) | Incompatible with N4, adds to default. Alternative provides a cleaner presentation in other browsers. |
| P | margin-top:1.33em; | margin-top:0px; | Incompatible with N4, adds to default. Alternative provides a cleaner presentation in other browsers. |
| PRE | margin-top:1.33em; | (leave undefined) | Incompatible with N4, adds to default. |
| whitespace:pre; | white-space:nowrap; | Does not exist per W3C. | |
| BLOCKQUOTE | margin-top:1.33em; | margin-top:0px; | Incompatible with N4, adds to default. Alternative provides a cleaner presentation in other browsers. |
| ACRONYM | letter-spacing:0.1em; | (leave undefined) | Unsupported by N4. |
| font-variant:small-caps; | (leave undefined) | Unsupported by N4. | |
| HR | border:1px inset; | (leave undefined) | Incompatible with Navigator 4, treated as a separate entity. |
| content:"\A"; | (leave undefined) | Inconsistent support. | |
| outline:none; | outline:0px; | 'none' is incompatible with IE on the Mac. (2003-02-24) | |
| BR | br:before or br:after |
(leave undefined) | Incompatible with Opera, puts everything on one line. Using the alternative of simply br causes Internet Explorer on the Macintosh to render double line spacing. The best option (for now) is to leave the tag undefined and assume browsers will properly render the content. (2004-03-16) |
| DIR (deprecated) |
margin-top:1.33em; | margin-top:0px; | Incompatible with N4. Alternative provides a cleaner presentation in other browsers. |
| MENU (deprecated) |
margin-top:1.33em; | margin-top:0px; | Incompatible with N4. Alternative provides a cleaner presentation in other browsers. |
| In the BODY: | display:none; | visibility:hidden; | N6 will completely ignore. Especially important not to apply this to form elements. (2003-10-10) |
| In the CSS: bdo |
(bi-directional rendering) | (reversed order) | The bidirectional specifications produced odd behaviours on certain systems, generally with Windows NT environments. Reversing the original sequence of the specifications corrects the behaviour for left-to-right rendering. If right-to-left rendering is needed, please reverse the order of the definition pairs and define the appropriate language in your documents. (2003-02-26) |
| In the CSS: @media |
@media (containing aural definitions) |
@media aural | A media type must be defined when a media is declared. |
| In the CSS: @media print |
@page | (define 'page' outside of the media definition) | Does not exist, per W3C, within this definition. This definition should not be nested within another definition and should be defined on it's own. |
| In the CSS: (anywhere monospace is used) |
font-family:monospace; | font-family:'courier new','courier',monospace; font-size:medium; |
The courier new and courier fonts are specified as a preferred system fonts over the browser's default monospace font. The font size is additionally defined each time a monospace font is defined to encourage a comparable font size, making proportional fonts and fixed-width fonts equivalent sizes. In general, and by default, most browsers tend to define fixed-width fonts one size smaller than proportional fonts. (2003-05-08) |
| In the CSS: (anywhere a size is defined) |
border-width:0; | border-width:0px; | For proper XML and XHTML support you should always define the units of a declared value (with the exception of font weight values). While the HTML implementation of CSS would most often assume pixels when a unit was not defined, this is not the case with the extensible languages. If a unit of measurement is not provided, even if it is zero, then most often the definition will be completely ignored. (2003-05-19) |
