Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Conditional CSS targets any browser you like

Posted on by Clive Walker in CSS Web Design

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

As someone who is working with CSS all the time, you may have come across problems with different browsers [ahem]. Many of these differences are related to Internet Explorer and I think it’s fair to say that IE conditional comments are probably the best solution for these IE-specific differences. Now, Conditional-CSS extends that approach to other browsers by parsing your CSS file(s) on the server with some clever coding.

Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

This means that you can write simple If statements in your CSS file that target specific browsers or browser versions. For example, to target Gecko-based browsers like Firefox, put this in your style sheet:

Your selector here {
Normal style rule here;
[if Gecko] style rule goes here; }

The style sheets are parsed by the Conditional-CSS script and the appropriate CSS rules are presented to your web visitor depending on the browser they are using.

It would still be sensible to try and write good CSS without resorting to conditional If statements but Conditional-CSS looks like a great way of overcoming specific CSS rendering bugs. Hats off to Allan Jardine for the great method!

Technorati :

Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Comments

  • 07 Jan 2010 17:58:47

    Can we target ANY browser we like, or just a few, i.e. IE? I was under the impression that there is limited support for conditional CSS.

  • 07 Jan 2010 20:20:46

    Yes, any browser. The Conditional CSS website has more details but the method uses a specific compiler to generate a script that enables the usage of conditional statements in your style sheet. This is not part of the CSS specification but rather a clever method from a third party developer.

Comments are OFF for this post.

© 2024 Clive Walker