CSS Selector Shell: See what the browsers see

>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?"

PLAIN TEXT

CSS:

/* Combined selector. */
.class1.class2 {
color: blue;
color: orange;
}

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

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

Ajax Questions and Answers

Caching and dynamic views
My client does not want to change his cache settings on IE and I'm trying to figure out a way to dynamically update a view each time it is visited. I...

IE 8 Crashing Problem
Hello Everyone, Here\'s the situation: two iSeries boxes - Dev and Prod both V5R4M0 We\'re using AJAX to dynamically load content using a tabbed...

JQuery Function Not Defined?
[div]Hi there,[/div] [div][/div] [div]I\'m trying to set a php session variable from a radio button. The idea is that a jquery function is called...