Feature detection for parallax / background-position

Question

Ok, so I've created my own parallaxing jQuery/JS script, but I just don't know how to target browsers that will support the following (needs the following):

• Supports transition for background-position

The site (preview) I'm trying this at is: My Test Site

How can I detect whether a browser will support this though? Can I run media queries bases on window width? Do I have to browser sniff? I can't see anything on the WWW that gives me clues as to how I can feature-detect for this.

Any help would be greatly appreciated.

My JS code is here: (please feel free to use it if you like it)

var goTop = 0;
var thisGoTop = 0;
var thisHeight = 0;
var thisWinH = 0;
var bottomIntrusion = 0;
var thisMax = 0;
var bgPos = 0;

function parallax(){

    goTop = $(window).scrollTop();
    thisWinH = $(window).height();

    $('div.para').each(function(){

        thisGoTop = $(this).offset().top;
        thisHeight = $(this).height();
        thisMax = Math.floor(thisHeight * 0.3);
        bottomIntrusion = (thisGoTop + (thisHeight / 2) - goTop) / thisWinH;

        if (bottomIntrusion > 0) {
            bgPos = 0 - (Math.floor(thisMax * bottomIntrusion));
            $(this).css('background-position','center ' + bgPos + 'px');
        }

    });

}

parallax();

$(window).scroll(function(){

    parallax();

});

Edit: I've looked into the Modernizr library, and I haven't found anything that gives me clues about background-position transform support for CSS3. I'm getting real close to brower sniffing at this point, and I'd hate to go there.

Answer 1

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $( document ).ready( function() {
            var Compatibility = function()
            {
                var context = this;

                context.TestObject = function( id )
                {
                    function CreateObject( id )
                    {
                        $('body').prepend('<div id="CompatibilityTestObject_' + id + '"></div>');
                    }

                    // Constructor
                    CreateObject( id );

                    return {
                        GetObject: function( id )
                        {
                            try
                            {
                                // Fetch with raw Javascript so if the javascript method does not exist it will throw an error
                                var fetchedDomElement = document.getElementById( "CompatibilityTestObject_" + id );
                                return fetchedDomElement;
                            }
                            catch( e )
                            {
                                // Failed to fetch DOM Element
                                return false;
                            }
                        },
                        DeleteObject: function( id )
                        {
                            try
                            {
                                $( "#CompatibilityTestObject_" + id ).remove();
                                return true;
                            }
                            catch( e )
                            {
                                // Failed to remove object
                                return false;
                            }
                        }
                    }
                }

                context.Factory = function()
                {
                    return {
                        CreateTestObject: function( id )
                        {
                            var m_TestObject = new context.TestObject( id );
                            return m_TestObject.GetObject( id );
                        },
                        DeleteTestObject: function( id )
                        {
                            return context.DeleteObject( id );
                        }
                    }
                }();

                var CSS = function()
                {
                    return {
                        BackgroundPosition: function()
                        {
                            var testObject = context.Factory.CreateTestObject( "BackgroundPosition" );

                            try
                            {
                                // My first try at testing for background positioning
                                testObject.style.backgroundPosition = "center";
                                return true;
                            }
                            catch( e )
                            {
                                // Implement the handling of this error
                                //alert( "Does not support backgroundPosition: " + e.message );
                                return false;
                            }                                                              
                        }
                    }
                }();

                return {
                    CheckCSS: CSS
                }
            }();
        } );
    </script>

Take a copy of the above script... place it in your code there, then call upon it like so:

if( Compatibility.CheckCSS.BackgroundPostion() )
{
   // Compatible browser
}
else 
{
   // Not compatible
}