[Skip to the Main Content]

CSS Vendor-Specific Extensions fail

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 name

For 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-accesskey

An 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:

prefixorganization
-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.]


Sean Fraser posted this on July 10, 2006 06:51 PM.

  • Add to Technorati Favorites
  • de.licio.us: http://www.elementary-group-standards.com/css/css-vendorspecific-extensions-fail.html
  • furl: http://www.elementary-group-standards.com/css/css-vendorspecific-extensions-fail.html
  • reddit: http://www.elementary-group-standards.com/css/css-vendorspecific-extensions-fail.html

Comments

Klaus Hartl wrote this at September 13, 2006 01:14 PM

Sean, you did some terrific work here, so I assume it simply slipped out of your sight that when you talk about selectors you actually mean properties ("Scrollbar Selectors", "Mozilla Selectors").

Thanks for your efforts anyway!


Comment Author Gravatar
Sean Fraser wrote this at September 13, 2006 01:36 PM

Klaus: Thank you for the compliment and observation.

And, I like the DNA on your site. I made one in blue; I made one in black.


Naveen wrote this at October 28, 2006 05:46 AM

Good


Comments are closed.

The Elementary Standards: A Compendium of Web Standards, CSS, Linguistics and Search Engine Optimization methodology Copyright ©2005-2007 Sean Fraser. All work is published under a Creative Commons License. All Rights Reserved.

Palm trees on a grassy field in Hawai’i

Main Content Returns thus