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