Results 1 to 5 of 5

Thread: Test for CSS3?

  1. #1
    Join Date
    Apr 2008
    Location
    San Diego, CA
    Posts
    352
    Thanks
    57
    Thanked 6 Times in 6 Posts

    Default Test for CSS3?

    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!

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

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

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,946
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 03-08-2009 at 01:43 PM. Reason: fix typo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    How is that quicker than clicking a button and waiting 20 seconds?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,946
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 03-08-2009 at 01:30 PM. Reason: validate example to Strict
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •