Single File, Cross-Platform CSS

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Single File, Cross-Platform CSS

Post 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
}
}
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Single File, Cross-Platform CSS

Post 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)
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Single File, Cross-Platform CSS

Post 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 :)
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Single File, Cross-Platform CSS

Post 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?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Single File, Cross-Platform CSS

Post by kaszu »

CSS solution is what I was looking for. Using JS seems hacky
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Single File, Cross-Platform CSS

Post 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.
Post Reply