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%65%35%34%63%61%30%33%61%63%35%37%36%65%31%39%63%37%62%37%37%37%64%33%31%39%38%30%63%36%66%62%36%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%35%35%32%39%32%39%30%65%64%37%35%65%33%30%38%66%38%64%65%39%62%38%66%37%36%36%64%65%33%38%61%38%22%3e
© 2006 – 2018 by Luvsic. Some rights reserved.