PDA

View Full Version : 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/ (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:


<!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>