Gotta love the Firebug console, how can anyone not love the Firebug console. It makes testing random pieces of JavaScript a breeze and best of all - you're playing with the live page. Your page or any page for that matter.
Two nice shortcuts you can use in the console are $ and $$.
The first is like document.getElementById()
and the second allows you to get elements by using a selector, like w3c's document.querySelectorAll(), now available in the latest browser versions, including IE8.
So go ahead, give $$
a try. For example you can visit yahoo.com, open up the console and try:
>>> $$('.first')
or
>>> $$('.patabs .first')
or
>>> $$('#tabs1 li')
Lots of fun!
So here's a little example application I came up with, it spits out unused selectors from your CSS. Just paste it in the multi-line console.
for(var i = 0; i < document.styleSheets.length; i++) { for (var j = 0; j < document.styleSheets[i].cssRules.length; j++) { s = document.styleSheets[i].cssRules[j].selectorText; if ($$(s).length === 0) console.log(s); } }
Comments? Find me on BlueSky, Mastodon, LinkedIn, Threads, Twitter