meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

CSS3 Tests

Over the past couple of months, I’ve been hacking together some CSS3 tests.  I did this to try to figure out what should be included in the upcoming fourth edition of the CSS Pocket Reference (and thereafter CSS: The Definitive Guide) and didn’t plan to do anything public with them, but at this point, I figure what the heck.  Maybe they’ll be of interest to others.

I was especially interested by the results for list-style-type, where I found some small spots of support for various types in various browsers.  In contrast, WebKit supports most of the CSS3 types, so far as I can tell, though in my install several types were apparently mangled by a lack of appropriate fonts.

If you dig in, you’ll discover that the individual tests are all poured through some PHP.  The reason for this is that the base test pages (which are straight HTML; see for example the list-style-type base) include neither navigation links nor vendor prefixes.  That’s what the PHP handles.  It’s a bit clumsy, URL-wise, and that’s why the index page of the tests warns that the tests’ URLs could change in the future.  Not the index page: that will remain cool for as long as I have anything to say about it.  I just can’t swear off tinkering with the URLs of the tests for the time being.  It’s entirely possible that at some point in the future I’ll ice them down, but no guarantees.

I’m tossing these into the public sphere for three reasons.  The first is that they might be useful to other people, and I’m always in favor of sharing stuff that might be useful.  The second is that I may have committed grievous errors of fact, and many eyes make errors obvious.  If you find an error, please let me know.  I prefer that such reports be left as comments here since it lets many eyes evaluate the error reports too, but I’ll accept private mail as well.

The third is that it represents another turn of the wheel.  I started my CSS career building tests to see what browsers got right and wrong, and every so often I come back to that same fundamental act.  The other times I’ve done so, I’ve published what resulted.  This time, I’m publishing a little earlier and little more in the raw, so to speak, but it’s still the same impulse—and by now, it’s Tradition.

So I hope you enjoy, or at least find useful, these tests and whatever other tests get built in the future!

15 Responses»

    • #1
    • Comment
    • Fri 11 Feb 2011
    • 1339
    Paul Irish wrote in to say...

    Very useful, yeah. I’m working on a test page (with Alexis of caniuse.com) for all sorts of CSS3/HTML5 goodness that combines feature tests and visual ref tests for comprehensiveness. This’ll help. Thx.

    • #2
    • Comment
    • Fri 11 Feb 2011
    • 1857
    Palle Zingmark wrote in to say...

    This is actually just what I was looking for. :)
    I’m currently working on a “Coding guideline/Best practices” document for our dev team and I’m searching for some good references to CSS test cases to toss in there, so thank you for sharing Eric.

    • #3
    • Comment
    • Sat 12 Feb 2011
    • 1009
    Ludvig Lindblom wrote in to say...

    Very nice, and it’ll come in quite handy.
    And Palle, I look forward to reading the guidelines at the office. :)

    • #4
    • Comment
    • Sat 12 Feb 2011
    • 1616
    steve wrote in to say...

    Eric,

    you probably want to do something about this:

    http://meyerweb.com/eric/css/tests/css3/show.php?p=hanging-punctuation&-=%3Cscript%3Ealert();%3C/script%3E

    best wishes,

    steve

    • #5
    • Comment
    • Sat 12 Feb 2011
    • 1703
    Eric Meyer wrote in to say...

    Do what about it, Steve? In my browser all I see is that string in the URL and nothing else happens. It does end up in the source but, as I say, there’s no apparent effect.

    • #6
    • Pingback
    • Tue 15 Feb 2011
    • 0751
    Received from Links to Snydersoft 02/15/2011 | snydersoft.com

    […] Eric’s Archived Thoughts: CSS3 Tests […]

    • #7
    • Comment
    • Tue 15 Feb 2011
    • 1343
    steve wrote in to say...

    You’re quite right.

    When I tried before posting that the script tags were output to the browser and the script was run, it looks like the tags themselves are now removed.

    At any rate my suggestion was going to be to do that kind of output filtering, looks like you don’t need to.

    Steve

    • #8
    • Comment
    • Tue 15 Feb 2011
    • 1433
    Eric Meyer wrote in to say...

    Actually, Steve, tags were being passed through unstripped before. My point was that when I tested your link I still didn’t have anything untoward happen (for example, no actual JS alerts occurred) even though there were elements jammed into the page. I decided this morning to strip tags for the heck of it, but I’m still not exactly sure what you were trying to tell me.

    • #9
    • Comment
    • Tue 15 Feb 2011
    • 2333
    John wrote in to say...

    What’re your thoughts on putting these on w3c.org? I’ll help if you want :-)

    • #10
    • Comment
    • Thu 17 Feb 2011
    • 0128
    steve wrote in to say...

    My point was that when I tested your link I still didn’t have anything untoward happen

    This was not my experience, the link above generated 2 alerts on page load, which was my cause for concern.

    • #11
    • Pingback
    • Fri 18 Feb 2011
    • 0845
    Received from Friday Focus 02/18/11: On the Map | Devlounge

    […] CSS – CSS3 Tests […]

    • #12
    • Comment
    • Wed 23 Feb 2011
    • 0842
    Gaurav Mishra wrote in to say...

    Very handy! just reached here via @smashingmag tweet
    Thank you!

    • #13
    • Comment
    • Wed 23 Feb 2011
    • 0847
    Theresa wrote in to say...

    I noticed on the word-wrap test you have text-wrap set to ‘suppress’. It looks like ‘suppress’ has been changed to ‘avoid’ in the specs. Is this an error or is there a reason you’re still using ‘suppress’?

    • #14
    • Comment
    • Wed 23 Feb 2011
    • 1431
    Eric Meyer wrote in to say...

    Theresa, I’m using ‘suppress’ because when I wrote the test, that’s what the spec said. It was changed eight days ago (as of this writing) and I hadn’t noticed the change. So that’s the reason. Thanks for the pointer.

    • #15
    • Comment
    • Fri 25 Feb 2011
    • 1049
    Theresa wrote in to say...

    Thanks for the response, Eric. I figured it was just that you hadn’t had a chance to update it, but I wanted to check in case there was some secret awesome reason ‘suppress’ was a better option :)

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


February 2011
SMTWTFS
January March
 12345
6789101112
13141516171819
20212223242526
2728  

Sidestep

Feeds

Extras