Measuring Up Css1 In Nn 6

On April 5, 2000, Netscape made its "Pre-Release" edition of Netscape 6 available for download and testing.

Not a little amount of that anticipation stems from the full implementation of CSS1 (Cascading Style Sheets), which had been sorely lacking in previous Netscape releases. In the interest of determining how close developers came to their CSS goals (and how version 6 compares with 4.x), I put the new version to the W3 series of tests. The suites investigate 11 general areas, including font and box properties, cascading order and units. Here's how N6 stacked up.

(Note: Tests performed in Netscape 6 pre-release and Netscape 4.6 on a Windows NT box. Tests may be conducted at http://www.w3.org/Style/CSS/Test/current/index.html. Thanks to Travis Truman for his contribution in editing. And, oh yeah, the reading ain't real scintillating, though it is informative...)

Check out an easy to read comparison chart showing the differences between 6.0 and 4.6 here.

Suite One: Basic Concepts

1. N6 passed all the general tests involving "link" and "@import" of external style sheets. The tests included various methods of embedding CSS into a document, such as linking multiple stylesheets to the page, linking multiple stylesheets to each other, including styles in the document header, and using the STYLE attribute of tags. The cascade of these styles where also at issue for this test. Netscape 4.6 failed parts of this test, specifically at those points involving the unsupported "@import" property.

2. N6 and 4.6 both displayed text properly when grouping multiple classes to the same attributes (e.g. ".one, .two, .three {color: green;}").

3. N6 and 4.6 implementation of declaration of style by tag name, id (implemented "#value {style}") and class (implemented ".value {style}") was successful.

4. Both correctly applied styles using class as a selector.

5. By contrast, N6 failed on a particular point of using ids as selectors: id selectors cannot begin with digits in CSS1, but N6 does display an id named in this manner ("#2valuename {style}"); interestingly, 4.6 passed this. However, N4.6 failed at properly displaying the simple style "p#two {color: blue;}" when applied in "<p id=two>".

6. N6 passed contextual selectors, meaning it applies based on tags nested within other tags, such as applying style to "p" where "html body table p {style}". N4.6 did not support this feature at all.

7. Both passed commenting, where comments are added to various points of the stylesheet itself.

1. Obviously, N 4.6 failed all the pseudo-class tests (no hovering, no implementation of "visited"), while N6 does implement them. However, it failed one small test: the anchor tags turn orange when clicked upon where the test specifically indicates it should not.

2. "First-line," as in P:first-line {color: green;}, works in N6, but doesn't in N4.6. This test reveals that N6 also implements small-caps where 4.6 does not. Also works in combination with selectors.

3. Same for "first-letter," and it should be pointed out that first letter includes a quote mark; that is, ' "W ' counts as one letter.

4. N6 can handle multiple pseudo-element combinations, BUT it does somehow interfere within a table, so that the test inside a table (each test is duplicated outside and within a table) creates a cell extraordinarily long. The page source validates, but that table ends up being hundreds of thousands of pixels long; the table (though not the style) displays fine in N4.6. The paragraphs themselves display only on one line, though that line is not anywhere close to size of the table. It is possible that, though the page validates, this problem is the result of strict interpretation of the table code.

Suite Three: Cascading Order

1. N6 passed cascading tests that include use of the declaration "! important." N4.6 fails implementation of this keyword.

2. N6 passes the strictest interpretation of cascading, including contextual cascades. N4.6 not only fails this test entirely, it applied certain elements of the style to the actual bullet mark itself, in those tests involving list items, rather than the text.

Suite Four: Formatting

1. As far as vertical formatting (margins and padding), both browsers implement the multiple units of measurement. N6 seems to display "float" properly, but not the "clear" property; however, because "clear" affects floating elements, it's difficult to say whether it is properly implemented in relation to the vertical margin. N4.6 also seems to fail the "clear" property, and incorrectly implements negative units (negative units should not be allowed to the "margin-" or "padding-bottom").

2. N6 does a fantastic job of implementing horizontal margins, padding and indents, as well as the "width" property and alignment of elements to parents (without affecting the text within). N4.6 implements none of these features, with the exception of "width." Also, where 4.6 used to apply background strictly to the text line, N6 treats the element as a block, so backgrounds appear as boxes, rather than line by line. ("Padding," "margin" and "indent" are discussed in detail in later test groups.)

3. N6, again, has problems displaying floating elements, but generally does a dramatically better job of displaying block-level items as individual, floating objects than 4.6. Much of the overlapping that occurred in 4.6 does not appear in N6, while vertical and horizontal alignment of blocks seem to have improved also. (This test really should be seen to be understood: http://www.w3.org/Style/CSS/Test/current/sec414.htm.)

4. Similarly, the test of inline ("span") elements needs to be seen (http://www.w3.org/Style/CSS/Test/current/sec42.htm). Most significantly, though, the extra return that a "span" tag occasionally adds is fixed, and the interpretation of inline seems more literal in N6; that is, "span" does not appear as a block if a background or border is applied; a border applied to a "span" borders each line within that tag.

5. N6 does a fairly good job of implementing the "display" property, though it does not properly render the block in pixels; it does in percent. N4.6 renders the block, but does not size or align it properly.

6. N6 does line-height well, though I actually am having a very hard time interpreting the last piece of this test, which involves negative margins; however, I believe that part renders correctly. N4.6 does not apply styles to the images, so it will not render in a manner that allows the completion of the test and also overlaps text and images.

7. N6 interprets the "body" tag as an element of specific height and width within the "html" tag (or the document object); the "html" background surrounds the body background, so that two distinct styles are displayed. N4.6 displays only the "body" style, which is to say, the background is is only that of the body tag.

Suite Five: Font Properties

1. N4.6 does a better job interpreting general font styles (e.g. "sans-serif," "serif"), especially on "cursive" fonts. N6 does not display the same font for "cursive" as 4.6, which is actually a cursive font. This particular font should not have anything to do with preferences, as that has been set as equally as possible between the two browsers. N6 picks up Comic, while 4.6 displays a cursive font. Neither displays "fantasy."

2. "Oblique" works for "font-style" in N6, not 4.6. Other styles (e.g. "italic" display in both.

3. "Small-caps" and "Normal" work in N6, not 4.6.

4. In N6, "Font-weight" diplays the same as it has in N4.6, using "bold," "bolder," and 100 - 900. However, 100, 300, and 500 appear as "normal" while "700" and "900" appear bold.

5. N4.6 is superior in implementing relative font sizes, medium, small, x-small, etc. N6 displays small, x-small and xx-small as the same if your default font preference is set low. For example, you can choose 12, 13, 14, 15 16, 18, 20 and 24. If you choose 14, for example, x-small and xx-small appears as 12 and small appears as 13. BUT, if you choose 13, all three appear at 12. As an aside, you can type in an arbitrary number for the default variable font size.

6. Both seem to render inches, picas, points, pixels, em, ex, cm and mm (tested with screen shots, though not all measurements units where available in imaging software rulers).

7. When using the shorthand "font" property, the "line-height" of the text is much more precise in N6, but the type fails to inherit "font-size" of the "body" tag within the table test. N4.6 does not implement line-height based on percentage; and, the font sizes determined by "percentage" reflect the size of the browser's default font, not that inherited from the "body" tag.

Suite Six: Color and Background Properties

1. Both browsers display font color properly, when applied with ".class {color: color;}".

2. N6 passed the "background-color" tests, including an instance in which a SPANned element's background was set to transparent. N4.6 failed this test, and displayed the document background instead of the parent element background.

3. Both browser versions allowed stylesheets to apply an (gif) image to block-level elements as a background.

4. N6 allows background positioning relative to the parent-element by percentage or unit and positioning based on starting point of top, bottom, right and left. In respect to the former, if an element has the style ".four {background-image: url (bg.gif); background-position: 50% 50%; background-repeat: repeat-y;}," the image appears as a vertical (tiled) line in the horizontal center of the block. In respect to the latter, if an element takes the style ".eight {background-image: url(crosshair2.gif); background-position: bottom right," the block will render the first complete tile at its bottom, right corner. Any incomplete tiles will stop at the top left of the block. N4.6's rendering of the page is buggy at best (with text and formatting overlaps, etc.).

5. Both N6 and 4.6 display backgrounds with x- and y-axis "repeat" accurately.

6. N6 supports fixed "background-attachment," while 4.6 does not.

7. Using the shorthand "background," N6 supports a combination of repeat, positioning, and "background-color," allowing displays of both image and (hex) color, with the image positioned relative to the parent element. N4.6 does not position the background but implements other properties.

Suite Seven: Text Properties

1. N6 fully supports the "word-spacing" text property, including all specified units of measurement and negative spacing; it does not allow spacing with percentage, which is correct to standards. N4.6 does not support this at all.

2. The "letter-spacing" property is implemented in exactly the same manner, with N4.6 not supporting.

3. N6 fully supports all "text-decorations" properties, including underline, blink, strikethrough and overline, while N4.6 supports all except "overline." N4.6 also failed to correctly implement the inheritance of these text styles from parent to inline children.

4. N6 is completely standards compliant in for "text-alignment," including alignment to text-top, text-baseline, subscript, superscript and alignment to image elements. It's worth noting that "subscript" and "superscript" will not change the size the element to which they are applied. N4.6 implementation is more erratic, especially in text-alignments like "superscript" and "text-top." It is more accurate in text alignment to non-text elements, though not in aligning non-text elements to the text.

5. N6 supports "text-transform" perfectly, while N4.6 supports the property with some exceptions (after a non-breaking space and within inline elements).

6. N6 does not support "text-align: justify," while N4.6 implements the property correctly.

7. Both browsers fully support indentation with a variety of measurement units, though the implementation of the percentage, based on inheritance of parent elements, appears imprecise in both.

8. The "line-height" text property displays correctly in N6. N4.6 implements "line-height" for a variety of measurement units, but incorrectly allows negative spacing and does not render inline element styles faithfully.

Suite Eight: Box Properties

1. Although both browsers appear to implement "margin-top" correctly, I am unclear as to precisely how these should appear (i.e., if a margin-top of x measurement is applied to a block-level element with a background, the margin is applied to the "outside" the box; that is, no "extra" background appears. I believe this is correct, but again, not certain).

2. The same is true for margin-top properties applied to inline elements; neither displays a difference of line-heights when margin properties are applied to "span" items, which is correct. Both browsers correctly ignore the negative margin on the inline elements.

3. N6 fully supports "margin-right" properties, with margins begining added to the right of the block-level, not the text. One interesting note: a negative right margin causes the element to extend beyond the right boundary of the parent element, which, if the parent element is "body," will extend beyond the browser window, causing horizontal scrolling. Negative margins are not supported by 4.6, nor did the browser properly display the margins to a list item.

4. N6 implements right margins of inline items properly, while N4.6 test results include overlapping parent-child elements.

5. "Margin-bottom" displays properly in N6 with the exception of the negative value, which does not affect layout of the elements at all but should. N4.6 does pass that test, but does not display those elements with positive values correctly. In fact, when a (positive) bottom margin is applied to a "p" element, that natural bottom margin is removed, so that two paragraphs have no space between them (other than line-height).

6. N4.6 improperly allows bottom margins of inline elements to affect line-height when the value is positive, but N6 properly implements.

7. The left margin displays in the same manner as the right margin (see above, "3.") in both browsers. In N6, the negative margin cuts effectively crops the left side of the element, with no horizontal scrolling; in N4.6, the negative left margin becomes a margin of zero but does not crop.

8. Implementation of left margins for inline elements is complete in N6, but causing overlap for both negative and positive values in N4.6.

9. The shorthand implementation of the "margin" property displays properly in N6 within the "body" tag, where N4.6 displays all margins except the bottom (it behaves as described in "5."). However, within the "table" element in N6, the margin causes the "p" elements to display on one line, increasing the overall size of the table.

10. Shorthand margins are fully implemented for inline elements in N4.6 and

11. "Padding-top" implementation is perfect in N6, the padding appended to the top of the block element (not the text) but, correctly, not allowing negative values. N4.6 is also fully compliant.

12. In N6, adding top padding to inline elements does not affect line-height, which is the correct implementation, but it does result in increased vertical size; so, the background color of the inline elements overlaps the background color of the parent element (both staying in the background of all text). Adding padding to the inline elements in 4.6 does not affect display (either to line-height or the background of an inline element).

13. Adding padding to the right appends space to the children (i.e., the text) of the block element in N6, not the block itself, which is the intended outcome. N4.6 applies the padding to the block itself.

14. "Padding-right" is implemented correctly for inline elements in N6, where negative values are not allowed. Results are buggy in N4.6 with some of the inline elements displaying on separate lines.

15. Bottom padding adds space to the bottom of the elements children (i.e., the text) of the block element in N6, while N4.6 applies it to the bottom of the block itself.

16. N6 displays the inline elements with padding on the bottom just as the do those with padding on the top (see "11."). In N4.6, "padding-bottom" does affect line-height, adding spacing between the inline element and its parent.

17. The browser also adds left padding to the elements children, rather than the element itself, in N6. However, the changing the padding of a list element ("ul") does not add padding to the "natural" padding that the list item ("li") already has, but positions the list item absolutely within the parent element. Where padding is added to both the list and the list item, the "second" padding space is added between the bullet mark and the text. In N4.6, the padding is added to the margin that already exists.

18. In N6, inline padding displays just as "padding-right" with space appended on the left (see "11."). In N4.6, use of positive values causes breaks (negative does not apply in either browser).

19. Implementation of shorthand "padding" is implemented fully in N6, with the padding appended -- using various units -- to the children of the element (i.e., the text). There is no problem in the table display (as there is with "margin" shorthand). In N4.6, padding is appended to the outside of the element.

20. When applying the shorthand property to inline elements, N6 displays in the same fashion as mentioned above, with overlapping backgrounds and padding appended to the text itself. N4.6 also performs as expected from individual tests above (with padding added to the bottom causing an increase in line-height).

21. In N6, adding "border-style" with any attribute creates a border (with a default thickness) around the entire element. Adding the "border-top-width" property affects only the top line weight, and it supports "thick," "thin" and "medium," as well as pixel-designated. N4.6 displays the top border properly but does not display the other border lines, and it also renders the top line when "border-style" is NOT defined, which it should not do.

22. Application of the property to inline elements displays the same, with N6 rendering the bordered box inside its parent box, and N4.6 rendering only the top border; also, N4.6 adds an extra break after the "span".

23. Application of "border-right-width" behaves in precisely the same manner as "border-top-width" in both browsers (see "20.").

24. Application of the above to inline elements behaves just as "border-top-width" when it's applied to inline elements (see "21.").

25. "Border-bottom-width," too, displays in the same manner as top border (see "20.").

26. "Border-bottom-width," when applied to inline elements, displays in the same manner as top when applied to inline elements (see "21.").

27. "Border-left-width," too, displays in the same manner as top border (see "20.").

28. "Border-left-width," when applied to inline elements, displays in the same manner as top when applied to inline elements (see "21.").

29. N6 applies the shorthand "border-width" property to each line of the border to render the box, and does not draw any border when "border-style" is not defined, which is compliant. N4.6 also supports the shorthand property, though it will render the border with the "border-style" declared.

30. Inline elements with the shorthand property applied also render as they should in N6; N4.6 adds a break after the inline element with the same "border-style" exception.

31. The "border-color" style is fully supported in N6, with a shorthand property that allows each side to be a different color: ".three {border-color: purple green blue yellow; border-width: medium; border-style: solid;}" results in a box with a top line purple, the right green, the bottom blue and the left yellow. "Border-style" is not supported in N4.6, so the combination of "border-style" and "-color" does not render. Also, the shorthand "border-color" property results in a border of a random color (aqua) in N4.6 ("border-width" is apparently the property needed to render a box in N4.6).

32. Inline elements behave in the same manner as that described above in both browsers; N4.6 also adds a break after the "span" element.

33. N6 faithfully renders all variations of the border style, including "dashed," "dotted," "solid," "double," "ridged," "inset," and "groove." However, applying a weight of "thick" to each of the styles results in the total weight being equal to a "thick" solid line (that is, if the style is "double," the two lines together, as a unit, are the same width as a solid); when the thickness is specified in measurement units, the line weight equals that. N4.6 renders in the same manner, with the exception of "thick" equaling solid-line thickness ("thick" is variable).

34. The same results occur when applied to inline elements in both browsers; N4.6 adds a break after the "span" element.

35. The shorthand "border-top" property, such as ".one {border-top: purple double 10px;}," renders faithfully in N6, without borders on any other side of the box (only the top line appears, in this example, as a purple double-line whose total weight [two lines combined] equal ten pixels). N4.6 does not support this shorthand property.

36. Results when "border-top" applied to inline elements are the same.

37. N6 behaves in the same manner as "border-top" when "border-right" shorthand styles are applied (see "34."). N4.6 does not support.

38. N6 behaves in the same manner as "border-top" when "border-right" shorthand styles are applied to inline elements (see "34."). N4.6 does not support.

39. N6 behaves in the same manner as "border-top" when "border-bottom" shorthand styles are applied (see "34."). N4.6 does not support.

40. N6 behaves in the same manner as "border-top" when "border-bottom" shorthand styles are applied to inline elements (see "34."). N4.6 does not support.

41. "Border-left" shorthand property styles also render faithfully in N6, although when applied to directly to the list-item (the "li" instead of the "ul"), the border renders between the bullet mark and the first character. N4.6 does not support this shorthand property.

42. N6 behaves in the same manner as "border-top" when "border-left" shorthand styles are applied to inline elements (see "34."). N4.6 does not support.

43. The "border" shorthand property, such as ".one {border: medium black solid;}," is fully supported by N6; an interesting note: applying a style of "border: 0px" to an element will over-ride an anchor border in N6, though not in 4.6. N4.6 does support the shorthand property, but will not apply the style to the cells of a table.

44. Applying the border property to inline elements renders the same as above, without affecting the line-height of the text, regardless of border thickness (the border renders behind the surrounding text). In N4.6, the border does affect line-height, and the browser adds a break after the "span" element.

45. N6 applies the "width" property to both images and tag elements (where percentage measurements are based on the parent element width). N4.6 does not apply widths to images, though it does to tag elements. However, percentages, which should be based on a parent element, seem to be based solely on document width (the text block within the table renders at its percentage based on the width size, not the table).

46. N6 appropriately applies "height" to both images; N4.6 does not support this.

47. Both browsers support simple implementations of "float," which is similar to "text wrap" in (print) layout editors.

48. N6 does an excellent job of implementing "float" in combination with margins in order to position images precisely with the parent element in which the image is placed. N4.6 implementation is buggy, resulting in overlapping text and images.

49. N6 also does a good job of implementing "float" on block level elements, such as "div" text blocks. N4.6 does support this, but implementation is fairly buggy, especially when floating elements right and when in combination with other styles applied.

50. Floating multiple objects "left" on the same line in N6 correctly results in elements lining up in the order they are named; that is, the elements float "left" of the objects that follow it. In N4.6, the elements simply overlap on top of each other.

51. Neither browser implements "clear" fully; clearing the bottom, particularly, is the problem.

52. "Clear" works in combination with padding and margin in block-level elements in N6. N4.6 implementation results in a improperly-displaying block-element (with a narrow width).

53. N6 renders the final test page to exactly match the (raster) image provided by makers as a reference point. The final box properties test is combination of most properties tested here. N6 deviates only in the rendering of the radio button. N4.6 does not match at all (should view at http://www.worg/Style/CSS/Test/current/sec5526c-test.htm).
    
    Netscape 6 Acid Test
    
    Netscape 4.6 Acid Test
    
    Reference Image

Suite Nine: Classification Properties

1. N6 supports the "display" property for list items; "block" and "inline" causes any level element to be displayed as block-level objects or as inline (on the same line) elements. N4.6 will not apply "block" to inline elements. The fully implemented "list-style-type" property affects the bullet marks themselves (as in "block" and "disc") in an unordered list in N6; N4.6 does not display the bullet, but treats the element as a list element (with indentation) when "display: list-item". Both browsers support "display: none;" by hiding items.

2. "White-space" attributes "pre," "nowrap" and "none" are fully implemented in N6; application of "nowrap" causes a block level item to remain on one line, even beyond the natural boundary of a window. N4.6 supports only "pre" and "none."

3. N6 will apply a variety of list style types to list items for both ordered and unordered lists; attributes include upper and lower roman and alpha, as well as decimal. N4.6 also fully supports this property.

4. N6 supports images as list-item bullet marks. N4.6 does not.

5. The "list-style-position" property in N6 moves the bullet mark either outside the block (as a normal list-item would display) or places the bullet within the left margin of the item (as though the bullet were simply the first character). N4.6 does not implement this feature.

6. N6 faithfully renders a combination of "list-style-type" and "list-style-position;" N4.6 doesn't support the latter.

Suite Ten: Units

1. Both N6 and N4.6 support pixels, picas, ems, exs, centimeters, millimeters and inches.

2. Both browsers properly support percentage as a percent of parent element (though N4.6 does not properly display other applied styles in the test).

3. For color units, both browsers support pre-defined text ("black" or "red"), hex values, rgb values from 0 to 256. rgb values based on percent (including decimal percents) and interprets values above and below accepted ranges as the high or low value for that range. N4.6 improperly interprets random input as values as color; unaccepted values should default to the default color.

4. N6 correctly interprets the URLs as relative to the imported stylesheets, not the document importing them. N4.6 does the opposite.

Suite 11: CSS1 Conformance (Forward-Compatible Parsing)

1. The final test looks at some differences between CSS1 and 2, and shows how the browser degrades when certain styles are applied incorrectly. N6 degrades without scrapping the style and does not interpret style where the values are invalid. N4.6 does not degrade gracefully and does not implement all the style properties being tested; but, it also does not display where styles were improperly applied.