Validating your css

I’m knee deep in the redesign of a multi page website for a nearest and dearest, trying to make it accessible, validate, blah, blah, blah when I suddenly came across a great tip for validating your css even when your (x)html isn’t yet ready for validation. Ever seen this message from the W3C validator?

“Please, validate your XML document first!”

Frustrated, I googled for that phrase and came across an excellent article by Zoe Gillenwater in Making it Legal: Validating Your (X)HTML and CSS. Here’s an excerpt:

The CSS Validator accepts more than just .css files, which is handy if your styles are embedded or inline, instead of linked or imported. Just put in the URL to your (X)HTML page (or CFM page, etc.), and the validator will find the styles in it and validate them. It can also find and review linked or imported style sheets this way, but it is recommended that you validate external style sheets directly, not by submitting their parent pages to the CSS Validator. This is because if the XHTML page has errors or warnings itself, trying to validate its external style sheet can result in the error “Please, validate your XML document first!”. To avoid this, simply validate all external style sheets directly, rather than through the page they are linked or imported from.

I was going to point you to the error message for this site but blow me down, now my css validates (unlike the code and don’t get me started on the now borked archive page) but here’s a quick summary of what you need to do to validate the css independently of the (x)html:

  1. You’re using Firefox, right?
  2. With Chris Pederick’s Web Developer extension for Firefox, click on View CSS and your style sheet(s) will open in a new tab or page.
  3. Click on the hyperlink to the page(s) containing the css For example, the css for this site which will in turn open in a new page or tab.
  4. Click on Tools > Validate CSS to automatically use the W3C Validator.

If you like the Web Developer extension for Firefox you might also want to get the the Web Accessibility Tools Consortium Web Accessibility Toolbar for Internet Explorer and the (still in beta but very useful) Microsoft Developer Toolbar.

Validation using the above method doesn’t seem possible at first glance (no time to delve right now) but there are plenty of other tools to make it very worthwhile downloading.

Right, I’m off to make a pot of tea, find some good coding music at Pandora or Last.fm and wait for the phone to ring…

Leave a Reply

For added zing, you can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

But you can also just type in the box and hit the Submit button. Easy peasy lemon squeezy.

Your email address is not displayed and will NEVER, EVER be shared with any other party. We hate spam mail as much as you do.

Spotlight on...

Delicious links

These links are updated frequently thoroughout the day. Should you miss any they're all stored on my Delicious pages.

What I'm listening to