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