Page 1 of 1
Single File, Cross-Platform CSS
Posted: Fri Oct 24, 2008 6:30 pm
by volomike
For those of you who like single-file cross-platform CSS, I've come up with something that's good for IE6, IE7+, FF, Opera, & Safari (Mac or Windows).
Below, the #element is the thing you wish to update. But it could just as well been .class, too
CSS Browser Targeting
/* IE6-SPECIFIC (AND BELOW) */
#element {
_color: red;
}
/* IE-SPECIFIC */
* html body #element { /* the *<space>html<space>body<space> is very important! */
CSS goes here
}
/* FIREFOX-SPECIFIC */
@-moz-document url-prefix() {
#element {
CSS goes here
}
}
/* SAFARI-ONLY */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#element {
CSS goes here
}
}
/* OPERA-ONLY */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#element {
CSS goes here
}
}
Re: Single File, Cross-Platform CSS
Posted: Fri Oct 24, 2008 9:01 pm
by volomike
And for those who like their CSS in multiple files, here's a similar approach.
Code: Select all
<?php
<html>
<head>
<link media="all" type="text/css" rel="stylesheet" href="css/reset.css" />
<link media="all" type="text/css" rel="stylesheet" href="css/fonts.css" />
<link media="all" type="text/css" rel="stylesheet" href="css/colors.css" />
<link media="all" type="text/css" rel="stylesheet" href="css/default.css" />
<!--[if IE]>
<link media="all" type="text/css" rel="stylesheet" href="css/ie.css" /><![endif]-->
<!--[if lte IE 6]>
<link media="all" type="text/css" rel="stylesheet" href="css/ie6.css" /><![endif]-->
<style type="text/css">
@media screen and (-webkit-min-device-pixel-ratio:0){<? include 'css/safari.css'; ?>}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){<? include 'css/opera.css'; ?>}
</style>
</head>
...
reset.css -- this fixes browser problems to make them more consistent with each other
fonts.css -- this is a one-stop-shop area where you can change all your font settings in one fell-swoop.
colors.css -- one-stop-shop area to adjust all colors
default.css -- the master CSS that gets loaded in all browsers
ie.css -- the CSS that only gets loaded for IE browsers (this file is usually short)
ie6.css -- the CSS for only IE6, IE5.5, IE5, IE4, etc. previous browsers below IE7 (this file is usually short)
safari.css -- the CSS only for Safari (this file is usually short)
opera.css -- the CSS only for Opera (this file is usually short)
Re: Single File, Cross-Platform CSS
Posted: Sat Oct 25, 2008 2:29 am
by kaszu
Unfortunately it doesn't validate, but it's still awesome, thanks for sharing!
I had been looking for a way to target Opera for a long time

Re: Single File, Cross-Platform CSS
Posted: Sat Oct 25, 2008 11:27 am
by volomike
kaszu wrote:I had been looking for a way to target Opera for a long time
How does
if (window.opera) { Javascript work out for you?
Re: Single File, Cross-Platform CSS
Posted: Sat Oct 25, 2008 2:31 pm
by kaszu
CSS solution is what I was looking for. Using JS seems hacky
Re: Single File, Cross-Platform CSS
Posted: Sat Oct 25, 2008 7:05 pm
by volomike
kaszu wrote:CSS solution is what I was looking for. Using JS seems hacky
Well, unfortunately, the following doesn't exist yet.
Code: Select all
@Opera {
#element {
color: red;
}
}
But if you join the W3C as a charter member, submit your RFC and wait 15 years, you just might actually see it come true.
Actually, I hope that other browsers implement conditional comments like Microsoft introduced and just run with it. I mean they introduced AJAX and everyone jumped on board eventually, so why not conditional comments since they work so well? I hate to tip my hat at all to Microsoft, but on this one I think they got it right. But it needs to be a cross-browser thing from now on.