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. The Most Common CSS Markup Errors qualified the most popular author-generated errors found in the CSS of sites found during validation process using The W3C CSS Validation Service Tool. This article addresses vendor-specific extensions errors. Vendor-specific extensions are—Astoundingly—simple. And, validation they will forever fail.
“An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS.”
So. Those types, by inference, when written with an initial dash or underscore shall continously cause Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification [W3C Working Draft 11 April 2006] and CSS3 Cascading Style Sheets Under Construction validation failures. Microsoft filters and selectors are oblique.
The actual, offending source code has been included when necessary for understanding the CSS Validator's error statement. The applicable CSS specification verbiage when necessary, too.
Vendor-Specific Errors
MS Filters
- 1. Line: 146
- Parse Error - : opacity=60)
The actual code,
#overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
MS Opacity is vendor-specific; it doesn’t validate. [See MSDN Library, Introduction to Filters and Transitions. (Date unknown)] However, it failed for improper syntax, i.e., “=” since the CSS Validator does not identify vendor-specific errors precisely.
- 2. Line: 215 Context : .topTear
- attempt to find a semi-colon before the property name. add it
The actual code,
.topTear {
margin: -20px -20px 15px -20px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader »
(src='../wp-content/themes/durable/images/body_tear.png', »
sizingMethod=crop );
}
Microsoft filters are vendor-specific and won’t validate. However, note that the validator does not identify this selector as vendor-specific: it failed for a missing semi-colon.
Mozilla Properties
- Line: 240 Context : body div#toolTip
- Parse error - Unrecognized : }
The actual code,
body div#toolTip {
position: absolute;
z-index: 1000;
width: 220px;
background: #000;
border: 2px double #fff;
text-align: left;
padding: 10px;
min-height: 1em;
-moz-border-radius: 5px;
}
Mozilla CSS extensions [Note: See Netscape CSS Extensions by Brian Wilson [circa 2002] are vendor-specific properties with their “-moz-” prefix; they don’t validate.
Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification, 4 Syntax and basic data types, 4.1.2.1 Vendor-specific extensions states,
In CSS 2.1, identifiers may begin with '-' (dash) or '_' (underscore). Keywords and property names, beginning with -' or '_' are reserved for vendor-specific extensions. Such vendor-specific extensions should have one of the following formats:
'-' + vendor identifier + '-' + meaningful name '_' + vendor identifier + '-' + meaningful nameFor example, if XYZ organization added a property to describe the color of the border on the East side of the display, they might call it -xyz-border-east-color.
Other known examples:
-moz-box-sizing -moz-border-radius -wap-accesskeyAn initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS. Thus typical CSS implementations may not recognize such properties and may ignore them according to the rules for handling parsing errors. However, because the initial dash or underscore is part of the grammar, CSS 2.1 implementers should always be able to use a CSS-conforming parser, whether or not they support any vendor-specific extensions.
And, 4.1.2.2 Informative Historical Notes
This section is informative.
At the time of writing, the following prefixes are known to exist:
prefix organization -ms-Microsoft Corporation -moz-The Mozilla Organization -o-Opera Software -atsc-Advanced Television Standards Committee -wap-The WAP Forum Vendor/organization specific extensions should be avoided.
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".
And, for those sites which used CSS photo gallery by John Oxton, I would—Instead—suggest Hoverbox Image Gallery by Nathan Smith. It validates.
Scrollbar Properties
All scrollbar selectors of which there were few failed. Scrollbar properties are not recognized by W3C. [See Web Style Sheets CSS tips & tricks Un-colored scrollbars which states,
“Some browsers (IE, Konqueror) have recently started supporting the non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-"). But luckily you can easily disable them.”
You get a Parse error - Unrecognized : } error message. The offending code,
{scrollbar-3dlight-color: [Value];
scrollbar-arrow-color: [Value];
scrollbar-base-color: [Value];
scrollbar-darkshadow-color: [Value];
scrollbar-face-color: [Value];
scrollbar-highlight-color: [Value];
scrollbar-shadow-color: [Value];}
All vendor-specific errors failed. They were not failed as “Vendor-Specific Extension” They were failed for syntax errors. Still, it would be nice if that validation tool were more specific, e.g.,
- 1.Line: 33 Context : body div#kingMenehuneTitle
- Parse error - : vendor-specific selector used }
Vendor-specific extensions errors are simple but they are not presented in a user-friendly manner are they.
[CSS Validator-Induced Errors is the next article in this series.]
