HTML/JS - detecting Android software VERSION (and switching css file)

Question

I'm making an app with Phonegap build. Android 2.3 and below do not support css float, and android 3.0 and above do.

I need a different CSS file for each.

Is there a way to detect the Android SOFTWARE VERSION and change the css file depending on this?

Can I either do this with JavaScript or HTML?

I know you can detect IE with <!--[if IE]>, but is it possible to detect android versions?

Answer 1

Your technique is ok, but it's static and can lead to more problems in the future when referring to OS-types and system-types. It's better to check if the tag is supported in general. The best way to do this is with JavaScript, like this:

if('float' in document.body.style) {
    // jQuery?
    $('#myAwesomeDiv').css('float', 'left')
}

You can also make a short function for it to TRUE/FALSE it:

function propertyExist(property) {
    if(property in document.body.style) {
        return true;
    }
    else {
        return false;
    }
}

if (propertyExists('float')) {
        // Do nothing?
}
    else {
        // Change the style (use jQuery, jquery.com)
        $("link").attr("href","non_float.css");
        $("head").append("<link>");
    }