Let's use the W3C's CSS validator service to check that. Again, the process for validating our code is different, depending on whether you're working locally or remotely. First, the process for working remotely:
- Go to http://jigsaw.w3.org/css-validator/.
- Type in the URL of the site running your theme—in the case of my site, it's http://rachelmccollin.co.uk/opensourcemagazine/.
- Click on the Check button.
Next, the process if you're working locally:
- Save a static HTML file with the markup that WordPress outputs from your theme. To do this, in your browser, click on Save Page As and save as an HTML file.
- Go to http://jigsaw.w3.org/css-validator/.
- Click on the Validate by File Upload tab.
- Upload your file.
- Click on the Check button.
Here you'll want to see another screen with a green bar that says Congratulations! No Error Found.
However, for our theme, we won't get this screen! We're using several new CSS3 properties, that haven't made it officially into the specification, yet browsers are implementing them by adding their own, specific browser prefixes. This means our rounded corner and gradient properties fail, as shown in the following screenshot:
You'll simply need to be aware of which CSS3 properties you're using, and if you don't get the green bar, the validator will display the offending error and again offer suggestions on how to fix it. The CSS validator will also show you the line the offending code is on. This is handy, as your stylesheet is not affected by WordPress output, so you can go directly to the line in your stylesheet file and make the suggested fix.