Wednesday, January 21st, 2009

CSS Selector Shell: See what the browsers see

Category: CSS, Utility

Lindsey Simon was always a great guy to chat with at Google. He always had an idea and something cool that he was working on. His latest little tool is fun to play with. It is called CSS Selector Shell and it “is a browser-based tool for testing what CSS becomes in different browsers. It works by taking some raw text, inserting a dynamic STYLE element into the HEAD with that raw text as its content, and then reading the CSSOM to see what the browser has parsed it into. It is written in Javascript.”

The example above is WebKit nightly. When running in Firefox you get very different results. Even for small things like saying: “What will this do?”

  1. /* Combined selector. */
  2. .class1.class2 {
  3.   color: blue;
  4.   color: orange;
  5. }

and seeing “color: orange;” come out is nice. A very useful little tool Lindsey!

Posted by Dion Almaer at 7:55 am
1 Comment

3.9 rating from 39 votes

1 Comment »

Comments feed TrackBack URI

I suppose this will come in handy for some of the harder cascade questions that I’m guilty of sometimes answering coarsely with “!important”

Comment by tmallen — January 21, 2009

Leave a comment

You must be logged in to post a comment.