クライアントブラウザによって異なるCSSファイルをロードする

3782 ワード

ブラウザ css chrome IE firefox Safari

Firefoxブラウザで開くと、WebページのHTMLコードには次のようなものがあります.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="FF">

Google Chromeブラウザで開くと、

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="Chrome">

もし、あなたがIEブラウザまたはIEカーネルのブラウザを使用するならば、classは変更します:class=“IE”.
ブラウザタイプを判断するには,サーバ側プログラムで判断してもよいし,クライアントスクリプトで判断してもよい.
次のサーバ側の判断方法は、

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="<%= this.BrowserClass %>">
<head runat="server">

        public string BrowserClass
        {
            get
            {
                return GetBrowser(HttpContext.Current.Request.Browser);
            }
        }

        /// <summary>
        ///          
        /// </summary>
        private string GetBrowser(HttpBrowserCapabilities browser)
        {
            if (browser == null)
            {
                return "IE";
            }
            if (browser.Browser.IndexOf("Firefox", StringComparison.CurrentCultureIgnoreCase) != -1)
            {
                return "FF";
            }
            else if (browser.Browser.IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)
            {
                return "SF";
            }
            else if (browser.Browser.IndexOf("Opera", StringComparison.CurrentCultureIgnoreCase) != -1)
            {
                return "OE";
            }
            else if (browser.Browser.IndexOf("Chrome", StringComparison.CurrentCultureIgnoreCase) != -1)
            {
                return "Chrome";
            }
            else
            {
                return "IE";
            }
        }

次に、クライアントがブラウザのタイプを判断します.

    <script type="text/javascript">
        function myBrowser() {
            var userAgent = navigator.userAgent; //      userAgent     
            var isOpera = userAgent.indexOf("Opera") > -1; //    Opera     
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //    IE     
            var isFF = userAgent.indexOf("Firefox") > -1; //    Firefox     
            var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") < 1; //    Safari     
            var isChrome = userAgent.indexOf("Chrome") > -1; //    Chrome     
            if (isIE) {
                var IE5 = IE55 = IE6 = IE7 = IE8 = false;
                var reIE = new RegExp("MSIE (//d+//.//d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                IE55 = fIEVersion == 5.5;
                IE6 = fIEVersion == 6.0;
                IE7 = fIEVersion == 7.0;
                IE8 = fIEVersion == 8.0;
                if (IE55) { return "IE55"; }
                if (IE6) { return "IE6"; }
                if (IE7) { return "IE7"; }
                if (IE8) { return "IE8"; }
            }
            if (isFF) { return "FF"; }
            if (isOpera) { return "Opera"; }
            if (isSafari) { return "Safari"; }
            if (isChrome) { return "Chrome"; }
        }  
    </script>

画像のスケール時にエッジを維持し、image-renderingをスムーズにします.

formフォームの下のbuttonボタンはフォームの問題を自動的にコミットします