CSS3 Tests: Basic CSS3 Detection

How to check if at least some of CSS3 is supported.

The Code

For this script you'll need some special HTML, CSS, and Javascript.

The HTML

All the HTML you need is below:

<span id="check" rel="Detect"></span>

The CSS

Add this to a style block:

#check {
display: none;
width: 0;
height: 0;
}
#check[rel^="D"] {
display: block;
width: 0;
height: 0;
}

Finally...

The Javascript

The most important part is the Javascript. It sees if the special span (id="check") has display block (CSS3 supported) or none (not supported). Make sure the script is placed in the head, and keep the defer attribute; the script won't work without it.

<script type="text/javascript" defer="defer">
var obj = document.getElementById("check"); 
var file="special.css";
if (window.getComputedStyle) 
var stat = window.getComputedStyle(obj,null).getPropertyValue("display"); 
else if (obj.currentStyle) 
var stat = obj.currentStyle.display; 
var css3 = (stat == "block");
if (css3) { 
document.write('<style>'); 
document.write('@import "'+file+'"'); 
document.write('</style>'); 
}
</script>

The variable css3 is true if CSS3 is supported and false if not. Change file to the CSS file that contains CSS3 code.

Example

So, does your browser support at least some CSS3? Click the button below to find out.

Feedback

I will gladly welcome questions and comments about this script. To reach me send an email to pianoman@reno.com.