Give Browser Specific CSS Files With PHP
Make every website display perfectly in every browser! A PHP script that provides a simple way to accomplish this feat without spending countless hours on one style sheet. The best way to do this is to deliver the user a style sheet that perfectly matches their browser.
If you are like me, you hate having to make one CSS stylesheet work for every browser. Of course its much easier to adjust the stylesheet to work for Opera, Firefox and Safari than it is for Internet Explorer, especially Internet Explorer 6.
The reason this is so difficult is because different browsers render web pages differently. Microsoft, the makers of the notorious Internet Explorer series, do not believe they have to comply with with the W3C. The W3C sets the standards for the web so that their is uniformity among web designers and developers.
Alright, so if you want to deliver a different CSS file for different users, their are two options. You can use Javascript or Serverscripting. Javascript works ok, as long as the user does not have javascript disabled. Most user do not, however some users do disable javascript for various reasons. With javascript disabled, the correct CSS file would not be delivered. Server scripting on the other hand, works every time. The user is not able to turn it off.
The server detects what browser the user is using. It looks in the css.php file and sends the correct version of the CSS file to the user’s browser, changing the header of the file to ‘css.css’.
I use a series of includes inside of the file to include the proper CSS file. You can however, just keep all of the CSS in the file without the includes if you don’t like switching back and forth between files, its just a personal preference.
In order to use the php file simply link to it like you would a CSS file in the head section:
I did not write this script, I found it open source somewhere on the web, and I have not been able to locate it again. If you know where the original is, please let me know so I can link to it.
}
Related posts:
- Web Design Trick: Javascript Column Heights This is a simple web design trick I use in...
- I Caught Digg With Their Hand In My Cookie Jar I was having problems with my phone system, so I...
You should sign up for my RSS feed here
This is great!! I develop themes for clients all the time and one of the biggest hassles I run into is getting a theme I am working on to be cross browser compliant.
As you mentioned, its not a problem to use on css file for FF, Safari, Opera or chrome. Its IE thats the pain in the butt. But if done correctly IE7 will fall in line with the main css file. IE6 on the other hand has a mind of its own….lol
This script looks great and I hope it will save me some time. Thanks for posting the code and If I find the original I will definitley let you know.
Thomas,
I hope you will find the script useful. I know I have.
Great post…thanks for sharing…:D
This is a great idea. I’ve never though about doing this, and I’ve always had trouble making on CSS file look good in all browsers. Thanks for sharing. I believe I’ve seen better code to detect browsers before though.
I wish that the major browsers would standardize their platforms so that we would not have to use custom code to make a website pull up correctly. Until then, I will use this code. Thanks for posting.
hi, i wasnt able to make the code get to work… i think i have a problem with the next sentence:
$version = preg_replace(‘/[^0-9,.]/’,”,$version);
can anyone help me?
thanks!
Yea Taxicala try using this line instead. all i’ve changed is the second argument from ” to ”
$version = preg_replace(‘/[^0-9,.]/’,”,$version)