Display one css style if IE and another if ff or chrome in .css using PHP

Question

Hello,

I have some CSS style that does not work in IE and that works on ff and chrome. I want to be able to use if else. But can PHP ifelse be included in the .css file for me to achieve?

[edit]

I dont want two .css files for the purpose

Thanks Jean

Answer 1

Generally speaking you don't want to customize your site for different browsers. You want to make everything as uniform as possible. Of course there are instances where you have to do things in a browser-specific way but in my experience, with proper techniques, these situations are uncommon.

Some general rules:

1. Always declare a DOCTYPE on all your HTML pages. This forces browsers (most notably IE) into so-called standards compliant rather than quirks mode. Quirks mode does things in IE like have an incorrect box model. For this reason I suspect you're doing things the wrong (quirky) way and FF/Chrome are actually interpreting it correctly. This is, to me, the most likely scenario; and

2. Use a reset CSS. Different browsers (and different versions of the same browser) have different defaults for padding, margins, borders, etc. It's best to reset it all to the same starting point and go from there.

Beyond that you can use the conditional comments.

Answer 2

You could use conditional comments to hide a CSS file from other browsers.

If you really want to decide which CSS to serve, server-side, then you could look at parsing the user agent string to determine which browser is being used; but beware, that can effortlessly be fake - some browsers even let you pick what they'll identify as out of the box, so you might end up with false positives.

Answer 3

You can interpret CSS files with PHP (if you're not too bothered about server load), if you put this line in your Apache configuration:

addhandler application/x-httpd-php .css

Then you can try to rely on $_SERVER['HTTP_USER_AGENT'], but beware it is not guaranteed to be trustworthy.

However, there are (IMO) better ways to achieve this, which include using IE's conditional comments:

<!--[if IE 8]>
<style type="text/css" ... />
<![endif]-->

Of course the most preferable way would be to rewrite your styles to avoid browser implementation differences, which is usually possible, but requires some level of CSS guru-ness if you're being forced to support an old browser like IE 6.

Answer 4

Css does not support conditional flow control. You should resolve on different techniques:

• Have PHP to print out the CSS rules based of some browser sniffing. I do not raccomend this
• include different css with the link tag into the header section using conditional comments (see http://www.quirksmode.org/css/condcom.html)