On the date this article was published, this site was, according to the W3C CSS Validation Service, using Invalid CSS. Or was it? Read on...
Using the Firefox Web Developer Plugin "Validate CSS" tool, the CSS did not validate -- the following error message was generated:
Sorry! We found the following errors
43 .clear-block Value Error : display inline-block is not a display value : inline-block
But is this really an error? The W3C CSS Validator did the validation against the CSS2 Specification since the Firefox "Validate CSS" tool default is CSS2. However, display:inline-block was not included in the W3C Specification until CSS2.1. Running the W3C CSS Validator directly and telling it to validate against the CSS2.1 Specification produced the following results:
Congratulations! No Error Found
Valid CSS! This document validates as CSS!
So how do we keep the convenience of using the Firefox Validate CSS tool and preventing false positives when validating the CSS? Here's how:
- On the Firefox top menu, go to Tools > Web Developer > Options > Options
- In the Web Developer Options Window, select the Tools entry in the left menu
- In the list of URLs on the right edit this URL:
And if you are really leaping along the leading edge, change it to css3!
This all may be old hat to grizzled Firefox veterans, but hopefully, this will be of value to some who happen by here.
And, of course you have to have the Web Developer Plugin installed! ;-)