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
}
}
Single File, Cross-Platform CSS
Moderator: General Moderators
- 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
And for those who like their CSS in multiple files, here's a similar approach.
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)
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>
...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
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
I had been looking for a way to target Opera for a long time
- 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
How does if (window.opera) { Javascript work out for you?kaszu wrote:I had been looking for a way to target Opera for a long time
Re: Single File, Cross-Platform CSS
CSS solution is what I was looking for. Using JS seems hacky
- 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
Well, unfortunately, the following doesn't exist yet.kaszu wrote:CSS solution is what I was looking for. Using JS seems hacky
Code: Select all
@Opera {
#element {
color: red;
}
}
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.