CSS browser detection for radial gradient? - css

Question

I'm using a radial gradient as the background for a website. It works great on Safari, Chrome, and Firefox 3.5+, but Opera and Internet Explorer have problems. So, I made a background image to show on those browsers to give the same look. Right now, I'm detecting the browser and version server-side from the user-agent, and then including the correct CSS file. However, I feel like there must be a better way than having to maintain two seperate CSS files to do essentially the same thing (the only difference between the CSS files is html and body).
For good browsers:
html, body {
width: 100%;
height: 100%;
}
html {
background-image: -ms-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
background-image: -moz-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
background-image: -o-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 480, color-stop(0, #23395D), color-stop(0.6, #122037), color-stop(1, #0A131F));
background-image: -webkit-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
background-image: radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
-moz-box-shadow:inset 0 0 100px #080f1a;
-webkit-box-shadow:inset 0 0 100px #080f1a;
box-shadow:inset 0 0 100px #080f1a;
background-attachment: fixed;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #fff;
line-height: 22px;
text-decoration: none;
background: url(/images/portal/checkered_bg.png) repeat;
}
For bad browsers:
html, body {
width: 100%;
height: 100%;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #fff;
line-height: 22px;
text-decoration: none;
background: #09101b url(/images/portal/big_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale')";
}

Answer 1

Sounds like a job for Modernizr.
Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

Answer 2

When you try to apply css that the browser doesn't recognize, it just reports nothing, so if you do...
//ommiting document ready for brevity
if ($("html").css("background-image").indexOf("radial") < 0) {
$("html").addClass("no-radial")
}
Then you can override the classes in CSS:
.no-radial body {
font-family: arial, sans-serif;
font-size: 14px;
color: #fff;
line-height: 22px;
text-decoration: none;
background: #09101b url(/images/portal/big_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale')";
}

Answer 3

Rather then browser detection, use feature detection, a JavaScript plugin such as Modernizr will do the job very neatly.
It adds class names to the root element so you can check for it like in your css.

Answer 4

Modernizr is your friend...