browser-specific Cascading Stylesheets using PHP
Summary: Amateur noodling with CSS and PHP. With code examples.
Disclaimer: what follows is an idea I’ve been playing around with. I don’t think it would be useful, desired, nor considered a “good practice,” but I post it nonetheless in the event it might help someone somewhere. My apologies if this is obvious/simplified.
If you have ever dabbled with CSS design and tried designing for Microsoft Internet Explorer, you know that you don’t always get cross-browser consistency. Most other browsers (Opera, Mozilla, etc.) seem to have no trouble interpreting valid CSS-based designs, but dear IE often surprises with its unexpected behaviors.
In IE, CSS forms behave undesirably, dotted lines look dashed, things like the CSS hover pseudo-class don’t work, floated elements don’t float quite right, etc.
To address this, you could customize a CSS file so that style definitions were handed out using a simple script. You’d give your visitors a different stylesheet if they happened to be using Internet Explorer, and give visitors different site style based on browser type.
Here’s one way to do it. Instead of your usual:
`
`
Use a PHP include, like this:
<style type="text/css">
<?php include "http://path.to-website.com/css.php" ?>
</style>
Note that the target file is *css.php* , not your usual .css file, and that you’d have to do this throughout every page on your site (usually not a big deal if you are using any kind of publishing tool).
Once you have the instructions on each of your pages to include file *css.php*, you need to create file *css.php* and give it some PHP logic. Here’s an example of what you could put in css.php:
<?php if (strstr($_SERVER["HTTP_USER_AGENT"], "MSIE")) {?>
/*STYLE FOR MICROSOFT IE ONLY */
.classname{
background-color: #00F;
}
<?php
} else {
?>
/* STYLE FOR EVERYTHING ELSE */
.classname{
background-color: #F00;
}
<?php
}
?>
/* STYLE ALL BROWSERS */
.classname{
color: #FFF;
padding: 10px;
border: 1px solid #000;
}
What’s happening: instead of putting your style definitions in an external CSS file, style definitions are determined at run-time and included in the head of each page based on browser type.
You’ll note that I used up some space at the bottom of this file for any CSS info that applies to all browsers including IE. Not necessary, but worth noting.
The PHP part of it works by using the $_SERVER environmental variable built into PHP to determine your visitor’s browser type. In this example, it simply determines whether the visitor is using Internet Explorer, or not using Internet Explorer. You could make it as complex as you’d like, and create separate stylesheets for every possible brower. Unnecessarily complicated, perhaps, but possible.
Some possible uses for this:
- CSS error-correcting for IE
- To specify fonts based on assumptions made regarding visitor’s platform (e.g.if browser is Safari, assume user is on a Mac and use system-specific fonts)
- Customizing design for specialty browsers. Eliminating pictures for known text-only browsers.
- To knowingly exclude or alter the web experience for visitors based on brower type (e.g. place white text on white background for browser Brand A).
Example here ([source](http://www.trainque.com/computing/phpcssindex.txt))
A limitation: Some browsers (e.g. Opera) allow you to identify your browser as something it is not. Since this only detects browsers based on what is being reported by the browser, lying browsers would get the wrong stylesheet.
Fun additional considerations: Use environmental variables other than $_SERVER[”HTTP_USER_AGENT”] to determine style used. Impose ads/reduce ads to visitors who use unfavorable/favorable technology. Restrict access or vary content to a certain tech demographic.
Do with this what you will.
9 Comments
RSS feed for comments on this post.
Love the faq here. Looked for a simplistic way to do this for a while now, and yours is the best answer I found out there. Thank you very much.
Dave
A question: It is correct this code:
/*STYLE FOR MICROSOFT IE4*/
…
/*STYLE FOR MICROSOFT IE5*/
…
/*STYLE FOR MICROSOFT IE6*/
…
Thanks
Excuse me, I’m wrong write, now I retry.
How can I do the php for multiple css, I’m not understand the complex script you have linked.
I have try with this:
/*STYLE FOR MICROSOFT IE4*/
…
}
/*STYLE FOR MICROSOFT IE5*/
…
}
/*STYLE FOR MICROSOFT IE6*/
…
}
but it is wrong.
Please help me.
p.s. excuse me, but I’m not good in php
Excuse me another time, but it is impossible to post the code, how can do this?
Dante: First, all the stuff between the slashes and asterisk is CSS comments:
`\* this is a comment that PHP doesn’t execute *\`
So you don’t have to worry about that.
Here is the [source](http://www.trainque.com/computing/phpcssindex.txt) for you to examine.
Another question: it is possible to link the css with php?
Plase can you post a complex example with css?
You should be able to use this in your HTML header style for as many browser types as you want (and make it as complex as you want):
`< ? php if (strstr($_SERVER["HTTP_USER_AGENT"], "BROWSERTYPEONE")) {?> `
`.class1{`
`background-color: 00F;`
`}`
`< ?php } ?>`
`< ?php if (strstr($_SERVER["HTTP_USER_AGENT"], "BROWSERTYPETWO")) {?>`
`.class1{`
`background-color: 00F;`
`}`
`< ?php } ?>`
`< ?php if (strstr($_SERVER["HTTP_USER_AGENT"], "BROWSERTYPETHREE")) {?>`
`.class1{`
`background-color: 00F;`
`}`
`< ?php } ?>`
replacing BROWSERTYPEONE, BROWSERTYPETWO, BROWSERTYPETHREE with actual browser names. Get it?
Link given in this article complex
is moved here
Please edit and correct.
Thank you.