What are the list of items that entering jQuery $.support into FireBug console return?

Question

Hi,

I was watching the Lullabot jQuery video and in it one of the teachers advises to use $.support command to check all of the available features that the current browser supports. So when I enter

$.support

into console I get this link

Object { leadingWhitespace=true,  more...}

and when I click it FireBug opens up the DOM tab and shows this list

I recognize some of the Objects listed like style and opacity. I use these when writing CSS.

• Other familiar names I see are boxModel and cssFloat but how come they are written in this 'lowercase followed by uppercase' fashion?
• What do all these mean?
• Are they Javascript terms?
• Where might I learn more about the meaning of these listed elements?

Thanks,
Adam

Answer 1

Because camelCase is a widely accepted naming convention in JavaScript - thus the jQuery devs use it.

Answer 2

The camelCase with initial lowercase capitalization is javascript naming convention. Native js functions are named in the same manner: getElementById

That list of items is simply a list of standards that a browser either does or doesn't comply with. The entire list, with descriptions, is available in the docs - jQuery.support

Answer 3

I cannot say what they all mean, but there is nothing special about the formatting (ok it is CamelCase) and the terms. These are just properties of the support object and jQuery uses these to determine the capabilities of the browser.

For example if opacity is set to false, fadeOut() will just make an element disappear and not fading out.

So this is just for jQuery to determine behavior at runtime.

Answer 4

camelCase is an extremely popular naming convention among javascript libraries: http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml#Naming

The features are to do with Javascript, HTML, CSS support in browsers, as different browsers support different things.

You can find the documentation here with explains the jQuery side of things: http://api.jquery.com/jQuery.support/

You can also find more information in a similar project with more of a aim on HTML5 support: http://www.modernizr.com/docs/

Whether or not you should care on the support status entirely depends on who your userbase is! I use google analytics with modernizr to track the status of features I care about, so I can develop for my users taking into account their support accordingly.

You can see the code to do the tracking right at the bottom of the view source of http://www.balupton.com/sandbox/jquery-lightbox/demo/ but here it is:

<!-- Google Analytics --> 
<script type="text/javascript"> 
    //<![CDATA[
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    //]]>
</script>
<script type="text/javascript" src="./scripts/modernizr-1.5.min.js"></script> 
<script type="text/javascript"> 
    //<![CDATA[
    try {
        var pageTracker = _gat._getTracker("UA-4446117-1");
        pageTracker._initData();
        pageTracker._setCustomVar(1, "html5.boxshadow", Modernizr.boxshadow ? "yes" : "no" , 2 );
        pageTracker._setCustomVar(2, "html5.multiplebgs", Modernizr.multiplebgs ? "yes" : "no", 2 );
        pageTracker._setCustomVar(3, "html5.fontface", Modernizr.fontface ? "yes" : "no", 2 );
        pageTracker._setCustomVar(4, "html5.csstransitions", Modernizr.csstransitions ? "yes" : "no", 2 );
        pageTracker._setCustomVar(5, "html5.borderradius", Modernizr.borderradius ? "yes" : "no", 2 );
        pageTracker._trackPageview();
    } catch(err) {}
    //]]>
</script>

You can also see the global browser implementation status here: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)

jQuery implements $.support, as say for example it can detect if the browser supports getElementsByClassName which is a lot faster than performing the search manually.

Hope that helps mate!