Errors

Rules for handling parsing errors

All levels of CSS -- level 1, level 2, and any future levels -- use the same core syntax. This allows UAs to parse (though not completely understand) style sheets written in levels of CSS that didn't exist at the time the UAs were created. Designers can use this feature to create style sheets that work with older user agents, while also exercising the possibilities of the latest levels of CSS.

Keywords

Blocks

A rule set (also called "rule") consists of a selector followed by a declaration block.
A declaration-block (also called a {}-block in the following text) starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there must be a list of zero or more semicolon-separated (;) declarations.
The selector consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS2), it must ignore the {}-block as well.

Invalid name or value

A user agent must ignore a declaration with an invalid property name or an invalid value. Every CSS2 property has its own syntactic and semantic restrictions on the values it accepts.
For example, assume a CSS2 parser encounters this style sheet:

H1 { color: red; font-style: 12pt }  /* Invalid value: 12pt */
P { color: blue;  font-vendor: any;  /* Invalid prop.: font-vendor */
    font-variant: small-caps }
H3, H4 & H5 {color: red }  /* Invalid "&" is not a valid token */
EM { font-style: normal }

The second declaration on the first line has an invalid value '12pt'. The second declaration on the second line contains an undefined property 'font-vendor'. The CSS2 parser will ignore these declarations, effectively reducing the style sheet to:

H1 { color: red; }
P { color: blue;  font-variant: small-caps }
EM { font-style: normal }

In some cases, user agents must ignore part of an illegal style sheet. This specification defines 'ignore' to mean that the user agent parses the illegal part (in order to find its beginning and end), but otherwise acts as if it had not been there.

Safety Net for future changes

To ensure that new properties and new values for existing properties can be added in the future, user agents are required to obey the following rules when they encounter the following scenarios:

• Unknown properties. User agents must ignore a declaration with an unknown property. For example, if the style sheet is:

  H1 { color: red; rotation: 70minutes }
  

  the user agent will treat this as if the style sheet had been

  H1 { color: red }
  

• Illegal values. User agents must ignore the declaration. For example:

  IMG { float: left }       /* correct CSS2 */
  IMG { float: left here }  /* "here" is not a value of 'float' */
  IMG { background: "red" } /* keywords cannot be quoted in CSS2 */
  IMG { border-width: 3 }   
  	/* a unit must be specified for length values */
  

  A CSS2 parser would honour the first rule and ignore the rest, as if the style sheet had been:

  IMG { float: left }
  IMG { }
  IMG { }
  IMG { }
  

  A user agent conforming to a future CSS specification may accept one or more of the other rules as well.

• Invalid at-keywords. User agents must ignore an invalid at-keyword together with everything following it, up to and including the next semicolon (;) or block ({...}), whichever comes first. For example, consider the following:

  @three-dee {
    @background-lighting {
      azimuth: 30deg;
      elevation: 190deg;
    }
    H1 { color: red }
  }
  H1 { color: blue }
  

  The '@three-dee' at-rule is not part of CSS2. Therefore, the whole at-rule (up to, and including, the third right curly brace) is ignored. A CSS2 user agent ignores it, effectively reducing the style sheet to:

  H1 { color: blue }