«
»

>>> $$(selector)

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);
  }
}

This entry was posted on Friday, January 30th, 2009 and is filed under CSS, firebug, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.


Get notification for future posts: follow me on Twitter or subscribe to my RSS feed

7 Responses to “>>> $$(selector)”

  1. Tuzemec Says:
    January 30th, 2009 at 4:00 am

    Heh… a cool css trick. I didn’t know that you can access the stylesheets like this.

    It will work on a jQuery powered sites with a little modification:

    if ($(s)[0] === 0) console.log(s);

    And using the jQuery $.each function it can be even shorter:

    $.each( document.styleSheets, function(i, s) {
    $.each( s.cssRules, function (si, ss) {
    if (!$(ss.selectorText)[0]) console.log ( ss.selectorText );
    });
    });

    Neat :-)

  2. Stoyan Says:
    January 30th, 2009 at 4:43 am

    Nice, thanks for the comment and the code. jQuery is so cool, eh? Makes everything nicely shorter and less verbose :)

  3. Radoslav Stankov Says:
    January 30th, 2009 at 7:37 am

    And one geeky prototype version(little slow because of all loops), but for the fun:

    $A(document.styleSheets).pluck(‘cssRules’).map($A).flatten().pluck(‘selectorText’).each(function(s){
    if ($$(s).length === 0) console.log(s);
    });

  4. Tuzemec Says:
    January 30th, 2009 at 11:01 am

    Yeah, jQuery is my thing :-)

    But when I think about it, this little script can become a nice tool helping to refine the stylesheets of a site.
    Maybe as a greasemonkey script, a bookmarklet or a firebug extension.

    The only problem that I see is that some of the styles can be dynamical (e.i. :hover). And while it’s not hard to identify “:hover” and “:active” selectors – it’s hard (or impossible?) to predict which styles are user-triggered.

    Anyway… just some thoughts at the end of the work week :-)

  5. Stoyan Says:
    January 30th, 2009 at 12:07 pm

    there is a tool already to find unused styles – called Dust-Me Selectors. A problem I found with it is that it wasn’t counting the in-page <style>s

  6. Stoyan Says:
    January 30th, 2009 at 5:15 pm

    @Radoslav – whoa, good one! Nothing like a nice all-powerful one-liner :)

  7. Iouri Goussev Says:
    February 12th, 2011 at 7:56 pm

    You can also install http://firequery.binaryage.com/ to enable jquery on any page.

Leave a Reply