jQueryによるブラウザ判定

jQueryでブラウザ判定するコード
非推奨のjQuery.browserは使わない



サンプル

/*
 * jQuery addClass every browser.
 * Version 1.0  (31/01/2012) by Luvsic.
 * Version 1.1  (00/00/2012) by .
 *
 * Examples at: http://luvsic.net/item/154/
 * Copyright (c) Luvsic.
 */


jQuery(function(){
        if(jQuery.support.checkOn && jQuery.support.noCloneEvent && window.globalStorage) {
                $('html').addClass('ff');
        } else if(jQuery.support.checkOn  && jQuery.support.noCloneEvent && !jQuery.support.noCloneChecked && !jQuery.support.cors) {
                $('html').addClass('ie9');
        }
        else if(jQuery.support.checkOn && jQuery.support.noCloneEvent && !window.globalStorage && !jQuery.support.cors) {
                $('html').addClass('opera');
        }
        else if(jQuery.support.checkOn && jQuery.support.noCloneEvent && !window.globalStorage) {
                $('html').addClass('chrome');
        }
        else if(!jQuery.support.checkOn && jQuery.support.noCloneEvent) {
                $('html').addClass('safari');
        }
        else if(!jQuery.support.opacity) {
                if(!jQuery.support.style) {
                        if (typeof document.documentElement.style.maxHeight != 'undefined') {
                                $('html').addClass('ie7');
                        } else {
                                $('html').addClass('ie6');
                        }
                } else {
                        $('html').addClass('ie8');
                }
        } else {
                $('html').addClass('unknown-browser');
        }
});

IE以外のブラウザがバージョンアップによって判定できなくなる可能性がネックなので、IE判定部分だけ切り出して使うほうが良いのかもしれない、別適用するCSSを書く対象ブラウザによってちょっと考える必要がある。

IE6/7/8のみの判定

jQuery(function(){
        if(!jQuery.support.opacity) {
                if(!jQuery.support.style) {
                        if (typeof document.documentElement.style.maxHeight != 'undefined') {
                                $('html').addClass('ie7');
                        } else {
                                $('html').addClass('ie6');
                        }
                } else {
                        $('html').addClass('ie8');
                }
        }
});

オリジナルはjQuery.supportでのブラウザ判別 - W3G Blog Tools/Tipsでのnemonemo2010さんのコメントより。

Skooler Records

No comments yet

%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%38%31%61%34%35%61%37%38%39%64%35%64%35%32%30%62%39%35%37%61%62%39%64%61%62%62%64%66%65%34%66%30%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%66%36%37%61%32%39%38%37%62%66%31%66%38%38%33%38%36%33%36%66%39%37%61%33%65%66%30%32%61%39%34%62%22%3e
© 2006 – 2014 by Luvsic. Some rights reserved.