Or, What does CSS Reboot again illustrate about all other Sites?
The first article, CSS Reboot as Web Standards Validation Indicator quantified valid sites which participated in CSS Reboot Spring 2006. The second article, The Most Common HTML Markup Errors, qualified Markup errors. This article qualifies the most popular errors found in the CSS of sites found during validation process using The W3C CSS Validation Service Tool . Some of the errors are simple, fundamental errors. They are easily corrected. However, some of the errors are not errors.
All CSS underwent validation utilizing default settings: Warnings: Normal Report; Profile: CSS Version 2; and, Medium: All. This was performed intentionally. Cognoscenti may know to use “Advanced Settings” as well as the average user may not.
The data was categorized into three sections: “Author-Generated Errors” when errors were caused by the authors; “Vendor-Specific Errors” when proprietary code had been used; and, “Validator-Generated Errors” where the CSS Validator lacks compliance with the CSS Specifications!
The actual, offending source code has been included when necessary for understanding the CSS Validator's error. The applicable CSS specification verbiage when necessary, too.
The error types below were most common or, popular, errors.
Author-generated Errors
1. Typographical Errors
- Line: 63 Context : h3
- Invalid number : font-weight ligher is not a font-weight value : ligher
- Line: 441 Context : #footer
- Invalid number : margin Unknown dimension : 2x
- Line: 199
- Invalid number : color 00000 is not a valid color 3 or 6 hexadecimals numbers : #00000
- Line: 102 Context : .primary .item .pagetitle
- Invalid number : background Too many values or values are not recognized : ffffff
- Line: 47 Context : #portfolio .right .c0
- Invalid number : width only 0 can be a length. You must put an unit after your number : 280
The above examples are—Merely—typographical errors. Typographical errors were the most common error type.
The errors above are easily identified. The following error doesn’t make sense until you view the actual code in the style sheet.
2. Whitespace Errors
- Line: 240
- Parse error - Unrecognized : . label { font-style: italic; }
The actual code,
. label {
font-style: italic;
}
Whitespace exists between the class indicator, “.” and selector name. And, see the following error for something different utilizing whitespace.
- Line: 324 Context : input#author
- Invalid number : font only 0 can be a length. You must put an unit after your number : 1.0 em "Lucida Sans Unicode",Arial,Helvetica,Sans-Serif
The actual code,
input#author {
margin: 0;
padding: 2px;
font: 1.0 em "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
}
Whitespace exists between the font size and unit of measure.
And, there was a less frequent whitespace error: whitespace missing between properties when used in “shorthand” selectors.
3. Auto Errors
- Line: 17 Context : body
- Invalid number : padding auto is not a padding-right value : 0 auto
The actual code,
body {
margin: 0 auto;
padding: 0 auto;
background-color: #fff;
text-align: center;
font-family: "Trebuchet MS", Verdana, Arial, Serif;
font-size: 10pt;
color: #666;
}
The most common use of “auto” as a value is for horizontally centering block-level, non-replaced elements in normal flow by means of “margin: 0 auto;”. Padding doesn’t work. [See Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification, [W3C Working Draft 11 April 2006], 10 Visual formatting model details, 10.3 Calculating widths and margins should other uses be wanted.]
4. Compound Values Errors
- Line: 616 Context : #formuway
- Invalid number : width Too many values or values are not recognized : 100% px
The actual code,
#formuway {
color: #666;
width: 100%px;
text-align: center;
font-size: 8pt;
margin-bottom: 25px;
}
This error type was an odd one; it appeared in several different style sheets.
5. Important! Errors
- Line: 573 Context : .imagelist ul li a img.lastfmimage
- Parse Error - !important }
The actual code,
.imagelist ul li a img.lastfmimage {
height: 100px; !important
}
Cascading Style Sheets, level 2, CSS2 Specification, 4.1 Syntax, 4.1.8 Declarations and properties offers,
A declaration is either empty or consists of a property, followed by a colon (:), followed by a value. Around each of these there may be whitespace. Because of the way selectors work, multiple declarations for the same selector may be organized into semi-colon (;) separated groups.
Example(s):
Thus, the following rules:
H1 { font-weight: bold } H1 { font-size: 12pt } H1 { line-height: 14pt } H1 { font-family: Helvetica } H1 { font-variant: normal } H1 { font-style: normal }are equivalent to:
H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal }
Notice that last line: it has no closing semi-colon. Ignore that practice. For continuing (and, extending) the principles of “well-formedness”, always use a semi-colon to end all declarations which have single values. And, use a semi-color to end the final value in selectors with multiple values. Thus, !important which is part of the value must be set inside of the final semi-colon. Or, simply stated, “!important” always goes inside semi-colons.
6. Font Shorthand Errors
- Line: 336 Context : #sidebar #searchform #s
- Invalid number : font Parse Error - [empty string]
The actual code,
#sidebar #searchform #s {
width: 125px;
padding: 2px;
font: .8em;
}
- Line: 412 Context : .primary .item .itemtext
- Invalid number : font 'Lucida Grande' is not a font-size value : 'Lucida Grande', Verdana, Arial, Sans-Serif
The actual code,
.primary .item .itemtext {
font: 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-align: justify;
font-size: 11px;
line-height: 16px;
color: #444;
}
Cascading Style Sheets, level 2 revision 1 CSS 2.1 Specification [W3C Working Draft 11 April 2006], 1 About the CSS 2.1 Specification, 1.4 Conventions, 1.4.3 Shorthand properties offers,
Some properties are shorthand properties, meaning that they allow authors to specify the values of several properties with a single property.
For instance, the 'font' property is a shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', and 'font-family' all at once.
When values are omitted from a shorthand form, each "missing" property is assigned its initial value (see the section on the cascade).
Example(s):
The multiple style rules of this example:
h1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; }may be rewritten with a single shorthand property:
h1 { font: bold 12pt/14pt Helvetica }In this example, 'font-variant', and 'font-style' take their initial values.
That is the proper “font shorthand”. All of the preceding errors should have used an appropriate property, e.g., “font-size”. Please note the order of the “font shorthand” in the example above: it is the required sequence.
7. Errant Comma Errors
- Line: 19 Context : body
- Invalid number : font Too many values or values are not recognized : normal 80%/15px 'Trebuchet MS' Helvetica,Arial,Geneva,sans-serif
The actual code,
h1 {
font: normal 80%/15px 'Trebuchet MS' Helvetica, Arial, Geneva, sans-serif;
line-height: 18px;
color: #007CB9;
padding-bottom: 0px;
margin: 0;
}
A comma is missing after 'Trebuchet MS' since “'Trebuchet MS' Arial” confuses things.
Missing commas were popular.
8. Errant Semi-Colon Errors
- Line: 57 Context : h2
- Invalid number : font attempt to find a semi-colon before the property name. add it
h3 {
font: normal 1em 'Trebuchet MS' Arial, 'Times New Roman', Serif
color: #222;
padding: 0;
}
Notice the first declaration; it’s missing an ending semi-colon.
Missing semi-colons were popular, too.
9. Legacy Errors
- Line: 604 Context : entry img.wp-smiley
- Invalid number : vertical-align absmiddle is not a vertical-align value : absmiddle
The actual source code,
.entry img.wp-smiley {
float: none;
margin: 0;
vertical-align: absmiddle;
}
Cascading Style Sheets, level 2, CSS2 Specification, 10 Visual formatting model details, 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties, 10.8.1 Leading and half-leading, 'vertical-align' offers,
- middle
- Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
Every legacy attribute was seen.
10. Underscore Hack Errors
- Line: 110 Context : .secondary
- Property _width doesn't exist : 28%
This is the underscore hack. [See The Underscore Hack as first published on November, 21 2003 by Wellstyled.]
Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification, 4 Syntax and basic data types, 4.1.1 Tokenization is often stated as allowing the underscore. It doesn’t.
4.1.2.1 Vendor-specific extensions states,
An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS.
And, if one reads further, 4.1.3 Characters and case states,
The following rules always hold:
- In CSS 2.1, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Only properties, values, units, pseudo-classes, pseudo-elements, and at-rules may start with a hyphen (-); other identifiers (e.g. element names, classes, or IDs) may not. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
11. None Errors
- Line: 216 Context : #grav-signup-holder label.evil-checkbox input
- Invalid number : background-color none is not a color value : none
The actual code,
#grav-signup-holder label.evil-checkbox input {
float: left;
background-color: none;
border: none;
}
- Line: 183 Context : #quickiesChoice
- Invalid number : font-weight none is not a font-weight value : none
- Line: 100 Context : #maincontent li
- Invalid number : padding none is not a padding-top value : none
- Line: 100 Context : #maincontent li
- Invalid number : margin none is not a margin-top value : none
Sample code,
#maincontent li {
padding: none;
margin: none;
}
The use of “none” was popular. It was used in conjunction with every possible attribute.
For values that require a number instead of “None” you must use numeral “0”; and, for background-colors, instead of “None” eliminate the use of “background-color” completely or use “Transparent”.
“display: none” works.
12. Cursor Hand Errors
- Line: 393 Context : #right .image:hover
- Invalid number : cursor hand is not a cursor value : hand
- Line: 21 Context : a:link, a:visited, a:active
- Invalid number : cursor hand is not a cursor value : hand
Cascading Style Sheets, level 2, CSS2 Specification, 18 User interface, 18.1 Cursors: the 'cursor' property offers
- auto
- The UA determines the cursor to display based on the currentcontext.
- crosshair
- A simple crosshair (e.g., short line segments resembling a "+" sign).
- default
- The platform-dependent default cursor. Often rendered as an arrow.
- pointer
- The cursor is a pointer that indicates a link.
but not “hand”.
13. Color Keyword Errors
- Line: 336 Context : a:hover
- Invalid number : color grey is not a color value : grey
The actual code,
a:hover {
text-decoration: underline;
color: grey;
font-weight: 700;
}
Cascading Style Sheets, level 2, CSS2 Specification, 4 CSS2 syntax and basic data types, 4.1.2 Keywords
Keywords have the form of identifiers. Keywords must not be placed between quotes ("..." or '...'). Thus,
redis a keyword, but
"red"is not. (It is a string.) Other illegal examples:
Illegal example(s):
width: "auto"; border: "none"; font-family: "serif"; background: "red";
And, 4 Syntax and basic data types, 4.1 Syntax, 4.3 Values, 4.3.6 Colors states,
A <color> is either a keyword or a numerical RGB specification.
The list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Grey is not included in the list of keyword color names. It failed. And, different color keyword names were used. They failed. And, a few actual color keywords between quotes. They failed.
14. Muddled Specification Error
- Line: 61 Context : h3
- Invalid number : line-height Parse Error - [empty string]
h3 {
line-height: 1;
}
This selector fails but it’s faulty W3C text. The specification offers clues.
Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification [W3C Working Draft 11 April 2006], 10 Visual formatting model detail, 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties, 10.8.1 Leading and half-leading offers,
- 'line-height'
Value: normal | <number> | <length> | <percentage> | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: refer to the font size of the element itself Media: visual Computed value: for <length> and <percentage> the absolute value; otherwise as specified On a block-level, table-cell, table-caption or inline-block element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the block's baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the block's font and line height properties (what TEX calls a "strut").
On an inline-level element, 'line-height' specifies the height that is used in the calculation of the line box height (except for inline replaced elements, where the height of the box is given by the 'height' property).
Values for this property have the following meanings:
- normal
- Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as <number>. We recommend a used value for 'normal' between 1.0 to 1.2. The computed value is 'normal'.
- <length>
- The specified length is used in the calculation of the line box height. Negative values are illegal.
- <number>
- The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.
- <percentage>
- The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal.
The three rules in the example below have the same resultant line height:
div { line-height: 1.2; font-size: 10pt } /* number */ div { line-height: 1.2em; font-size: 10pt } /* length */ div { line-height: 120%; font-size: 10pt } /* percentage */
The clues offered are as above. [Emphasis added.]
The integer “1” is incorrect; the number “1.0” is correct. The reason, as stated above, is that real numbers and integers must be specified in decimal notation as required by Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification, 4 Syntax and basic data types, 4.3 Values, 4.3.1 Integers and real numbers which states,
Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. [Elementary emphasis.] An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. [Elementary Note: That’s “decimal notation”. How does one interpret those preceding sentences. One states “only” whereas the next offers an either/or condition.] Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign.
Nevertheless, until the CSS Validator and it’s specifications are fixed, the ‘line-height’ value must be specified with decimal notation, e.g., “1.0” before validation occurs (even if this is the sole exception to CSS specifications, e.g., all commonly-used numbers should result in validation errors, e.g., font-sizes are not specified in decimal notation).
“The Underscore Hack” which by definition is considered to be vendor-specific by CSS v.2.1 cannot be corrected and, therefore, shall never pass validation. All remaining errors can and should be corrected. Why Validate Cascading Style Sheets? illustrates reasons for correcting errors for those who believe validation serves no purpose.
The W3C Markup Validation Service is exemplary in all aspects. The W3C CSS Tool’s lacking. Dismally.
Caveat
Do not use the default setting when validating CSS with the W3C CSS Validation Service. The default setting is CSS v.2!
Instead.
The Advanced Interfaces should be used, i.e.,
- Validate by URI with extra options in the Advanced Interface.
- Validate by File Upload with extra options in the Advanced File Upload Interface.
- Validate by Direct Input with extra options in the Advanced Direct Input Interface.
where CSS version 2.1 (or, CSS version 3) can be selected.
It’ll be simpler.
[CSS Vendor-Specific Extentions fail is the next article in this series.]
