Note: This site might seem inactive… That’s because it is. Don’t worry though, I’m still coding webpages and stuff! If you’re interested, I suggest you get a translator and head over to Qiwi; or you could just check the latest site we’ve been working on: Apotheek Goethals – Debrabandere. Enjoy!
PHPSS™
Say what?
By combining PHP with CSS, there’s nothing that can’t be done. PHPSS is the only CSS hack you’ll ever need!
Why?
I never liked using all those CSS hacks in order to make designs look as they should on non-standards compliant browsers. So I decided to apply just one hack.
How?
Let’s get started. There’s two things we need to do before even rendering the CSS:
- Gzipping the CSS file;
- Check what sort of browser the person viewing the page is using.
So, we just put this code at the top of the CSS file.
<?php
ob_start('ob_gzhandler');
header('Content-type: text/css');
header('Cache-Control: must-revalidate');
$offset = 60 * 60;
$expstr = 'Expires: ' . gmdate('D, d M Y H:i:s', time() + $offset) . ' GMT';
header($expstr);
if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) $ie = 1;
?>Note: In this example we’re only going to check whether the browser is MSIE or not, but of course other browsers can be easily detected in a similar way. As far as I know, Internet Explorer is the only browser so crappy it’s actually worth using PHPSS.
What I use it for
My stylesheet is full of these values and attributes differing, depending on the browser. IE can’t even handle border-style: dotted; properly — it displays a dashed border instead. Because the difference between these two is huge in my humble opinion, I coded my PHPSS so that IE users will see an dotted image under their links. Here’s my code for styling links.
a, a:link {
color: #153160;
text-decoration: none;
border-bottom: 1px dotted #235299;
<?php if($ie) { ?>
border: 0;
padding-bottom: 1px;
background: url(/style/v4/underline.png) bottom right repeat-x;
<?php } ?>
}
a:hover {
<?php if($ie) { ?>
padding-bottom: 0;
<?php } ?>
border-bottom: 1px solid #f69600;
background: #feffad;
}
Real-world example
Let’s hack the Box Model Hack. Go see the original CSS code of div.content — it has four rules, of which only one is actually used in the design. Using PHPSS, the code looks much nicer and is smaller, because it only outputs the needed rule depending on the browser.
div.content {
<?php if($ie) { ?>
width: 400px;
<?php } else {
width: 300px;
<?php } ?>
}Comments (19)
Listed below are the responses for this entry.
Trackbacks & Pingbacks (5)
Listed below are resources on the web that mention this article.
-
- SeanW.com: PHP + CSS = PHPSS:
Cool huh? Entirely possible. Go check it out!
- Trackback made on October 21st, 2004 @ 7:48 pm
-
- Fiftyfoureleven Weblog: Applied CSS Management and Optimization:
Applied CSS Management and Optimization
[…] To help deal with managing hacks, we can use either CSS filters or browser detection. In the end, both of these methods hide styles from target browsers. […]- Trackback made on February 17th, 2005 @ 11:48 am
-
- Script School News: A PHP box model hack for CSS:
A PHP box model hack for CSS
While battling CSS, I found some nice linkage to a PHP hack around the IE box model problem. It’s a great alternative!- Trackback made on June 13th, 2005 @ 1:32 pm
-
- Uber Blah!: PHP to avoid browsers incompatibility:
PHP to avoid browsers incompatibility
Every web designer has to face the one truth: there’s no code that works the same on all browsers. […]- Trackback made on June 16th, 2005 @ 12:38 am
-
- Templaterie blog: Wählerisches CSS.PHP:
Wählerisches CSS.PHP
Der Sniffer-Weg prüft beim Benutzer, mit welchem Browser dieser unterwegs ist. Der Snifferweg scheint eine sichere Sache zu sein, wäre da nicht die Notwendigkeit für kleine Minoritäten-Browser zu lügen, um auf Seiten gelassen zu werden.- Trackback made on June 22nd, 2005 @ 12:35 am
Handy. I might need this…
No I don’t. I say fuck you to IE. I’m going to use PNG from now on and link to Firefox downloads if they can’t see the image correctly :P
Hmmm… I stopped caring for MSIE support whilst working on some of my pre-designs for a while, too — it all just got too much. But then again, 90% of all internet users on this planet are still on the bastard! Quite depressing… But that doesn’t mean I’m not proud of this site’s Crappy Browser Support!
I was thinking the other day about using the same method myself. Now I see you published it! This can indeed be handy. But of course using browser-sniffing has its limitations. You can have Opera or Mozilla (Firefox) lie about who they are, claiming that they are IE instead…
And another thing: maybe you can say fuck you to Internet Exploder, but as a web professional I find it impossible to ignore it, so I will apply accessibility and graceful degradation practices, and some hacks where needed.
Oh Ben, that’s just on my own blog. For clients, you can’t do that. And besides, it does work in IE. Just not perfectly. As a web professional, I say that only on my own blog.
Ben:
You know what they say; great minds think alike ;) And you’re right: whoever calls himself a web designer, but can’t be bothered to apply any IE support, has been labeling himself incorrectly.
Update: I only just noticed you actually wrote — that’s just hilarious, man.
Perfection is impossible. I kinda just make it look as close to what I want as possible but I’m not a designer.
A simple yet brilliant solution to avoid using hacks within your stylesheets. Good work.
Very cool, I would have to look into this for sure.
Damn!!! You are so smart!! This is the perfect thing that I need!! You are a godsend! Keep the great ideas coming!
Got an email from Phunk today…
Dear Phunk,
index.php, or whatever PHP file that renders the XHTML of your page, put this line on top:<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) $ie = 1; ?>.<link rel="stylesheet" media="all" href="/style.php" type="text/css" />.) Right after “style.php”, put the following PHP code:<?php if($ie) { ?>?browser=crap<?php } ?>">. After making this modification, the line should read something among the lines of<link rel="stylesheet" media="all" href="/style.php<?php if($ie) { ?>?browser=crap<?php } ?>" type="text/css" />.if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) $ie = 1;with$ie = $_GET['browser'];.Hope that clears out some misunderstandings regarding this new technique.
Whoops… excuse that TrackBack comment… not sure what happened there. Made a reference to this on my blog… cool stuff. =)
I do similar on lsblogs, not for browser specific workarounds, as I can’t stand those, but for other reasons.
About the Proxy (Caching of CSS files) problem:
How about a new header for this? (Per server-config or PHP
header())Vary: User-AgentSee: http://w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.44
You could indeed force the proxy to download a fresh version of the CSS each time, but that would suck a whole lotta bandwidth. Plus, CSS files are ment to be cached — they’re not half as
!importantas the content of a web page, so you can’t let users download a 10k file every time they visit a page on your site.I’ve been reading up on this box-model IE/FF thing somewhat and after reading somewhat the same things everywhere or related I must say that this all did one great thing, it gave us Firefox! Yay! Plus, a competitive market will surely be better when it comes to sticking to W3C guidelines. I never liked IE, at least not from the point where I got to know how M$ works their ways. It’s a good slap on their nose and even more they seem to have understand it also.
Guess for now we need to go with what we have, keeps people creative. And more and more working hacks float to the surface, it’s a matter of picking one that works for one.
I dislike IE as well, but to me and the viewing audience I just want to do stuff as good as possible although I understand Rob Mientjes by saying . It’s not how I act, but for sure how I feel.
Mathias — that Apple logo is truly stylish… is it illegal if I steal it? I want to put some PHP browser-hacks into my CSS, and display this as a background when the user is on a Mac (using an OS test, I think).
I had been toying with a similar idea to tailor presentation to screen resolution; I hate it when pages simply leave 25% of the screen vacant because they’re designed for 800×600 in a 1024×768 world; I don’t think the PHP logic to test for resolution would slow things down too much…
Geoffrey, you’re allowed to steal everything from this site, as long as you give credit where it is due.
As for the resolution checking, I’m afraid that’s not possible… By using only PHP, I mean. Screen resolution is a client-side setting, so you’ll need to use JavaScript to detect it.
Is it possible to do the PHP hack with jsp? Anybody who has tried this?
http://www.hedgerwow.com/360/dhtml/css_modern_hack.html