Home About Me

A One-Element Test for CSS3 Support

2026-02-15

To detect CSS3 support, you can use a small combination of HTML, CSS, and JavaScript. The test relies on an attribute selector: a marker element stays hidden by default, and a CSS rule changes its display value only when the browser recognizes the selector. JavaScript then reads the computed value.

Start with the marker element:

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

Next, set up the default and conditional styles. The element is hidden in the base rule and switched to display: block when the attribute selector matches. Its width and height remain zero so it does not take up space:

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

Place this detection script in the document head. It checks window.getComputedStyle first, falls back to currentStyle for older browsers, and compares the resulting display value with block:

<script type="text/javascript">
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) alert("CSS3 Supported.");
else alert("CSS3 not supported.");
</script>

If the computed display is block, the alert reports CSS3 support. If it is not, the alert reports that CSS3 is not supported. The zero-size element keeps the check out of the visible layout.

Related Posts