There seems to be a breaking (i.e. backwards-incompatible) change in the CSS Syntax Module Level 3 specification upcoming draft: trailing semicolon after the last declaration in a block is now perhaps required.
Compare the old wording (W3C Working Draft 13 August 2003):
4.8. Rule sets, declaration blocks, and selectors 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.
with the new one (Editor's Draft 14 June 2012):
2. Description of CSS's Syntax A rule starts with a selector (defined by the Selectors specification), then has a {}-wrapped block containing a sequence of declarations. The selector specifies which elements the declarations will apply to. Each declaration has a property name, followed by a colon and the property value, and finished with a semicolon.
(emphasis mine).
So that nifty short forms, e.g.:
em { color: lime }
(this is currently given as valid example in the CSS Color Module Level 3 recommendation) will no longer validate.
Could someone more knowledgeable about the whole Level 3 drafts collection please verify? To future-proof stylesheets, do we really have to overhaul existing CSS files (and insert semicolons if missing) before the specification gets finalized or did I misunderstand something?
No, semicolons are only required to separate rules in CSS blocks. Semicolons are delimiters, not terminators.
Semicolons are optional, in general -- but without them, the compiler will try to guess what two lines mean in succession, and won't always guess correctly. In this case, its seeing the (...) on line 4 as a function parameter list, and compiling as though the previous {...} is a function being called.
They are required by the XHTML standard. (Semicolons is optional in the ECMA standard) 2. They give structure to your code, they says something about where the tags end.
In CSS, the colon separates syntax, and the semicolon denotes that that particular styling is over. For example: position : relative ; The statement above is saying that you want the CSS to be looking at the position attribute, and you want it to be of a relative nature.
Looks like there currently is an ambiguity in the spec.
You correctly pointed out that 2. Syntax Description section prescribes ending every rule with a semicolon:
Each declaration has a property name, followed by a colon and the property value, and finished with a semicolon.
And at the same time, description of the parsing automaton in section 3.6.8. Declaration-value mode reads that a closing brace without a semicolon correctly ends a declaration and current rule at the same time:
} token
Append the current declaration to the value of the current rule. Pop the current rule from the stack of open rules, and append it to the value of the new current rule. Switch to the current rule's content mode.
So according to 3.6.8 trailing semicolon is optional.
I can't say about actual intention of the specification authors. But current situation should probably be reported and fixed. Most certainly they don't have intention of breaking the compatibility with CSS 2.1 and will reword their Syntax Description section in the final version.
I think that it's just a mistake when writing the specifications, and that the real intention was to have it as a separator, just as in previous versions. I expect this to be adjusted in later drafts.
The W3C validation service says that the example without the trailing semicolon is valid CSS level 3.
I will however, as I have always done, end each declaration with a semicolon. This is a good practice, so that you don't forget the separator when you add more declarations.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With