[Skip to the Main Content]

CSS Validator-Induced Errors

Or, W3C Quality Assurance isn’t assured, is it

This article represents the final CSS Reboot Spring 2006 most common error types: CSS Validator-Induced errors.

The errors identified by the CSS Validator and noted below are not errors. They are valid code according to the Cascading Style Sheets (CSS) specifications; they are valid code according to which CSS Level one has chosen for validation processing. The W3C Quality Assurance (QA) Team has induced these noncompliances.

Validator-Induced Errors

Pseudo Errors

The following recurring pseudo errors were dependent on which CSS Level was used during validation. These selector validate; and, they don’t. If one uses that default setting during CSS Validation Service, they fail. The default setting is CSS Version 2. However, if one uses CSS Version 3, it passes. So, if you should use CSS3 pseudo-elements, Remember! to use the validator with the CSS3 setting!

1. Background Shorthand Errors

Line: 716 Context : blockquote
Invalid number : background Too many values or values are not recognized : url('images/quote.png') 10px top no-repeat

The actual code,

blockquote {
margin: 20px 0;
padding: 0 20px 0 50px;
background: url('images/quote.png') 10px top no-repeat;
border: none;
}

CSS2 does not allow for keywords and numbers mixed as stated in Cascading Style Sheets, level 2 CSS2 Specification [W3C Recommendation 12-May-1998], 14 Colors and Backgrounds, 14.2 The background, 14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background'

If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed, (e.g., '50% 2cm'). Negative positions are allowed. Keywords cannot be combined with percentage values or length values (all possible combinations are given above).

However. CSS2.1 does. And CSS3, too.

Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification [W3C Working Draft 11 April 2006], 14 Colors and Backgrounds, 14.2 The background, 14.2.1 Background properties:‘background-position’ states,

If only one percentage or length value is given, it sets the horizontal position only, and the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of keyword, length and percentage values are allowed, (e.g., '50% 2cm' or 'center 2cm' or 'center 10%'). For combinations of keyword and non-keyword values, 'left' and 'right' may only be used as the first value, and 'top' and 'bottom' may only be used as the second value. Negative positions are allowed.

Further, 'background' states,

The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet.

Given a valid declaration, the 'background' property first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration.

Example(s):

In the first rule of the following example, only a value for 'background-color' has been given and the other individual properties are set to their initial value. In the second rule, all individual properties have been specified.

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

The CSS Level 2 ‘background shorthand’ should be made obsolete, shouldn’t it.

And, whereas any mischmasch order of background properties may work, the CSS specification implies a specific order,

The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet.

And, note that 'background-position' has this,

If only one percentage or length value is given, it sets the horizontal position only, and the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of keyword, length and percentage values are allowed, (e.g., '50% 2cm' or 'center 2cm' or 'center 10%'). For combinations of keyword and non-keyword values, 'left' and 'right' may only be used as the first value, and 'top' and 'bottom' may only be used as the second value. Negative positions are allowed.

2. Color Keyword Errors

Line: 149 Context : .blue h3 a:hover
Invalid number : color Orange is not a color value : Orange

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,

red

is 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";

No. The source code was correctly written. And, the use of an uppercase “O” in “orange” isn’t the problem since all CSS style sheets are case-insensitive except for parts that are not under the control of CSS. [See 4.1.3 Characters and case for more information.] “Orange” is not an acceptable keyword color according to 4 CSS2 syntax and basic data types, 4.3 Values , 4.3.6 Colors which 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.

However, forget all that should you process validation with CSS Level 2 Revision 1 (or, CSS Level 3) which has included “orange”.

3. CSS 2.1 Pseudo Errors

Line: 102
The pseudo-element ::selection can't appear here in the context css2

The actual code,

::selection {
background: #C96;
color: #330000;
}

This works.

[Elementary note: See W3C CSS Validator Results for http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/tests/css3-modsel-40.html for a W3C failed page.]

Opacity Errors

[Note: The following error should not be confused with opacity=60 since that opacity type is Vendor-Specific. And, all Vendor-Specifics fail.]

Line: 147
Property opacity doesn't exist : 0.5

The actual code,

#circles #green {
opacity: 0.5;
}

CSS3 Color Module [W3C Candidate Recommendation 14 May 2003], 3. Color properties, 3.2. Transparency: the 'opacity' property offers,

<alphavalue>
Syntactically a <number>. The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) [Elementary note: Notice how the numbers are written with "decimal notation"!] will be clamped to this range. If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>.

The CSS3 Color Module does not illustrate proper use of Opacity. It offers examples for other selectors but not opacity. Further, there seems to be a contagious inconsistency with decimal notations in W3C documentation. 14.5 Object and group opacity: the 'opacity' property (found in Scalable Vector Graphics (SVG) 1.1 Specification [W3C Recommendation 14 January 2003])

<opacity-value>
The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. (See Clamping values which are restricted to a particular range.) [Elementary note: If you should bother reading that, you shall find this sentence: “Opacity values out-of-range are not in error and should be clamped to the range 0 to 1…” That’s not decimal notation, is it.] If the object is a container element such as a 'g', then the effect is as if the contents of the 'g' were blended against the current background using a mask where the value of each pixel of the mask is <opacity-value>. (See Simple alpha compositing. [Elementary note: I wouldn’t bother.])

Example opacity01, illustrates various usage of the 'opacity' property on elements and groups.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="12cm" height="3.5cm" viewBox="0 0 1200 350"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example opacity01 - opacity property</desc>
  <rect x="1" y="1" width="1198" height="348"
        fill="none" stroke="blue" />
  <!-- Background blue rectangle -->
  <rect x="100" y="100" width="1000" height="150" fill="#0000ff"  />
  <!-- Red circles going from opaque to nearly transparent -->
  <circle cx="200" cy="100" r="50" fill="red" opacity="1"  />
  <circle cx="400" cy="100" r="50" fill="red" opacity=".8"  />
  <circle cx="600" cy="100" r="50" fill="red" opacity=".6"  />
  <circle cx="800" cy="100" r="50" fill="red" opacity=".4"  />
  <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"  />
  <!-- Opaque group, opaque circles -->
  <g opacity="1" >
    <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"  />
    <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"  />
  </g>
  <!-- Group opacity: .5, opacity circles -->
  <g opacity=".5" >
    <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"  />
    <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"  />
  </g>
  <!-- Opaque group, semi-transparent green over red -->
  <g opacity="1" >
    <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"  />
    <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"  />
  </g>
  <!-- Opaque group, semi-transparent red over green -->
  <g opacity="1" >
    <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"  />
    <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"  />
  </g>
  <!-- Group opacity .5, semi-transparent green over red -->
  <g opacity=".5" >
    <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"  />
    <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"  />
  </g>
</svg>

Full opacity is noted as “1”. Odd, isn’t it. That the W3C would compose code which fails validation.

Inline-Block Errors

Line: 694 Context : #h_links
Invalid number : display inline-block is not a display value : inline-block

The actual code,

* html>body .clearfix {
display: inline-block; 
width: 100%;
}

This code snippet is correct, if one is to believe Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification [W3C Working Draft 11 April 2006], 9 Visual formatting model, 9.2 Controlling box generation, 9.2.4 The 'display' property which states,

inline-block
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.

HTC Errors

Line: 67 Context : img
Property behavior doesn't exist : url("/pngbehavior.htc")

The actual code,

img {
border: none;
behavior: url("/pngbehavior.htc");
}

Behavioral Extensions to CSS [W3C Working Draft 04 Aug 1999], Additions to CSS, The behavior property offers,

Example:

<STYLE>
/* Link all DIVs with a CLASS of "fly" to the "flyin" component */
DIV.fly { behavior: url("flyin.htc"); }
</STYLE>

This property links an element to a component that may handle or cause dynamic behavior by accessing the element’s object model, or may provide its own properties, methods and events exposed on the element. The value of the property is a URI, which links to an HTML Component (HTC). The ‘none’ value allows to override an already defined behavior.

Media Import Errors

This error type occurred—Very Infrequent—in CSS Reboot web developers style sheets because two media types were used infrequently. However, it has been included here after correspondence. Sites which displayed this multiple media types underwent validation manually, e.g., URI + /css/main.css. All results were identical using CSS v.2 or CSS v.3.

[Note: This error was originally noted CSS Validator Changes the Rules is Broken by Jeffrey Zeldman (February 5, 2004).]

Line: -1
unrecognized media screen,projection

The actual code,

<style type="text/css " media="screen, projection">
@import '/css/main.css';
</style>

The above code failed. The following code was written and tested in an effort to identify failure mechanisms.

Perhaps, it was the use of a relative URL in the original error. So, an absolute URL was tested.

Line: -1
unrecognized media screen,projection
No style sheet found

The actual code,

<style type="text/css" media="screen, projection">
@import "http://www.menehune-foundry.com/css/striptease.css";
</style>

No. An absolute URL fails, too.

Perhaps, “projection” was neglected for inclusion by The Validator Team. So, it was tested, individually.

W3C CSS Congratulations

This document validates as CSS!

The actual code,

<style type="text/css" media="projection">
@import "/css/striptease.css";
</style>

No. That worked.

Please note that the @import rule passed validation with a single media type (including, “all”). @import fails validation with multiple media types. And, consequently, given W3C Parser Error Handling edicts , it remains a mystery how user agents, i.e., browsers, render subsequent media types. Still. What code syntax for multiple media types passed validation?

W3C CSS Congratulations

This document validates as CSS!

The actual code,

<link rel="stylesheet" type="text/css" »
          href="/css/striptease.css" media="screen, projection" />

That worked. Two media types are valid but not with @import. However, 4 Syntax and basic data types, At Rules states,

At-rules start with an at-keyword, an '@' character followed immediately by an identifier (for example, '@import', '@page').

An at-rule consists of everything up to and including the next semicolon (;) or the next block, whichever comes first. [Note: Elementary emphasis.]

CSS 2.1 user agents must ignore any '@import' rule that occurs inside a block or after any valid rule other than an @charset or an @import rule.

The “Pseudo Errors” fail validation when the default Validator setting’s used. Therefore, use advanced settings, e.g., Level 2.1. The last four error types are valid but fail validation. They shall not pass validation until the W3C QA Team addresses inconsistencies with the validation service and it’s very own specifications. And, that may not ever happen, if Jeffrey Zeldman's article is any indication.

Lastly.

After, validation with CSS v.3, have your ever peered at the actual code? for the referenced page link? It's “<a href="http://www.w3.org/TR/REC-CSS2/">” [Elementary emphasis!] CSS Level 2! We know that validation can performs Level 3 analysis; or, Else, that CSS version 3 button selection’s a shill.

W3C CSS Congratulations

[CSS Reboot Errors Afterword is the next article in this series.]


Sean Fraser posted this on July 18, 2006 11:14 AM.

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

Comments

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