2

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

6
  • What CSS works in IE but not Chrome/FF?
    – cletus
    Apr 15, 2010 at 9:22
  • Re: your edit ("I dont want two .css files for the purpose"): Why?
    – pinkgothic
    Apr 15, 2010 at 9:32
  • 3
    A lot actually - all the proprietary IE filters for instance. Apr 15, 2010 at 9:32
  • 1
    @Jean: You have to manage the code regardless of whether you split it into two files, though. Same time and effort, excepting the second it takes to load the other file from disk additionally into your editor of choice. Meanwhile, the benefit of having two files is, as alluded to below, less overhead, more reliability, etc.
    – pinkgothic
    Apr 15, 2010 at 9:44
  • 2
    @Jean but IE doesn't break with those properties. It just doesn't support them. Why complicate it by having two CSS files?
    – cletus
    Apr 15, 2010 at 10:08

4 Answers 4

4

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.

3

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.

1
  • 1
    Very true @ not browser sniffing. I like to link to quirksmode.org/js/support.html to explain the true horrors of user agent sniffing and what it's done so far - even if that's heavily JS-centric write-up, the core points remain the same.
    – pinkgothic
    Apr 15, 2010 at 9:28
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.

2
  • 1
    Agreed, you'll find performance issues if every CSS request has to be run through the PHP interpreter. Much better to use conditional comments to override the necessary bits of CSS for IE.
    – Paolo
    Apr 15, 2010 at 9:26
  • I should be able to select styles without altering the httpd.conf
    – X10nD
    Apr 15, 2010 at 9:46
2

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.