Test for CSS3?

**jlizarraga** · 03-08-2009, 07:27 AM

Hi all,

What's a quick way to test for certain CSS3 features? Like if I want to find out of the user agent supports selectors like input[type="text"], or :before and :after.

Thanks!

**Snookerman** · 03-08-2009, 07:52 AM

Here you go: http://www.css3.info/selectors-test/

Good luck!

**jscheuer1** · 03-08-2009, 12:39 PM

I think the question is how to do it quickly for a specific feature, not how to test your browser.

Off hand, I can't think of any quick way, except if you are using a library like jQuery which allows for the use of any valid css selectors to return an array of elements, or prototype, which - well I'm not sure what it uses for that. Otherwise, you would have to rewrite the code that does that, and I don't think it is too simple. Once you settle on a particular library you could use its selection process on a known element - if it is returned, the selector is presumably valid in that browser.

Oh, I just had a thought, you could setup these things that you want to test in a stylesheet, use them to set something really basic and unambiguous like a division's pixel width. Make up some markup with these divisions in it, position it absolute, visibility hidden, with negative left greater than the width you have chosen. Using ordinary javascript and getElementById, get each division's current style width (which is a little complicated as it varies by browser, perhaps the offsetWidth would be good enough, which is universal, but may vary from the exact pixels set via style in some browsers, though if you set no borders, margins or padding for these test division's, and they have no content, should not). If it matches the width set via your CSS 3 selector in the stylesheet, that selector is generally valid for that browser. This wouldn't be exhaustive, but would be quick, and should be a good enough indicator for most modern browsers. Some testing would be required to see if some browsers report erroneous results.

**Snookerman** · 03-08-2009, 01:08 PM

How is that quicker than clicking a button and waiting 20 seconds?

**jscheuer1** · 03-08-2009, 01:10 PM

You can use it in your own work - A very basic example of the concept:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.testDiv input[type='text'] {
 width: 25px!important;
}
.testDiv {
 visibility: hidden;
 position: absolute;
 left: -30px;
}
.testDiv #test {
 background-color: yellow;
 border: none;
 margin: 0;
 padding: 0;
 width: 10px;
}
</style>
<script type="text/javascript">
function hasSel(){
alert(document.getElementById('test').offsetWidth);
}
window.onload = hasSel;
</script>
</head>
<body>
<div class="testDiv">
<input type="text" id="test">
</div>
</body>
</html>

Thread: Test for CSS3?

Thread Tools

Search Thread

Test for CSS3?

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions