Tarayıcı tutarsızlığında adım adım son çare

Yaşadığım tarayıcı sorunları karşısında, nasıl bir yol izlediğimi anlatacağım. İlk önce kaynaklanan sorunun genel tarayıcılarda olup olmadığını kontrol ediyorum. Sorun genel tüm tarayıcılarda birbirinden tutarsız gözüküyor ise reset veya normalize stil dosyalarını kontrol ediyorum.

Eğer sorun belirli bir tarayıcıya ait ise, aşağıdaki gibi hatanın olduğu tarayıcıyı hedefliyorum. Ama bazen belirli bir platformda, belirli bir tarayıcıda, belirli bir tarayıcının sürüm ve versiyon numarasında çok komplike bir hatayla karşılaşa bilirsiniz.

Mesela linux de safarinin belirli bir tarayıcı sürümünde viewportların çalışmadığını gördüm. O zaman yapmanız gereken sorunun oluştuğu cihazın platformunu, versiyonu gibi durumları javascript ile algılayıp, html veya ilgili alana class attırmamız lazımdır.

Bu kadar çok tarayıcı, işletim sistemi, sürüm ve versiyonlar oldukça en kesin ve hızlı çözüm bu gözüküyor. Artık bu yöntemlerde işinizi çözmüyor ise, en aşağıdaki kodu kullanın ve kurtulun..

Style dosyasından tarayıcı hedefleme.

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }


/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

/* IE9, IE10 */
@media screen and (min-width:0\0) {
    #veintidos { color: red}
}

/* Property prefix hacks */

/* IE6 only - any combination of these characters */
_ - £ ¬ ¦

/* IE6/7 only - any combination of these characters */
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

/* @media hacks */

/* IE6/7 only (via Keith Clarke) */
@media screen\9 { }

/* IE6/7/8 (via Keith Clarke) */
@media \0screen\,screen\9 {}

/* IE8 (via Keith Clarke) */
@media \0screen { }

/* IE8/9 */
@media screen\0 { }

Javascript ile tarayıcı, platform, versiyon algılama ve class basma.

new function() {
    var Public = {
        'browser': function() {
            return Private.browser
        },
        'version': {
            'number': function() {
                return Private.version.number
            },
            'string': function() {
                return Private.version.string
            }
        },
        'OS': function() {
            return Private.OS
        },
        'aol': function() {
            return Private.aol
        },
        'camino': function() {
            return Private.camino
        },
        'firefox': function() {
            return Private.firefox
        },
        'flock': function() {
            return Private.flock
        },
        'icab': function() {
            return Private.icab
        },
        'konqueror': function() {
            return Private.konqueror
        },
        'mozilla': function() {
            return Private.mozilla
        },
        'msie': function() {
            return Private.msie
        },
        'netscape': function() {
            return Private.netscape
        },
        'opera': function() {
            return Private.opera
        },
        'safari': function() {
            return Private.safari
        },
        'linux': function() {
            return Private.linux
        },
        'mac': function() {
            return Private.mac
        },
        'win': function() {
            return Private.win
        }
    };
    $.browser = Public;
    var Private = {
        'browser': 'Unknown',
        'version': {
            'number': undefined,
            'string': 'Unknown'
        },
        'OS': 'Unknown',
        'aol': false,
        'camino': false,
        'firefox': false,
        'flock': false,
        'icab': false,
        'konqueror': false,
        'mozilla': false,
        'msie': false,
        'netscape': false,
        'opera': false,
        'safari': false,
        'linux': false,
        'mac': false,
        'win': false
    };
    for (var i = 0, ua = navigator.userAgent, ve = navigator.vendor, data = [{
            'name': 'Safari',
            'browser': function() {
                return /Apple/.test(ve)
            }
        }, {
            'name': 'Opera',
            'browser': function() {
                return window.opera != undefined
            }
        }, {
            'name': 'iCab',
            'browser': function() {
                return /iCab/.test(ve)
            }
        }, {
            'name': 'Konqueror',
            'browser': function() {
                return /KDE/.test(ve)
            }
        }, {
            'identifier': 'aol',
            'name': 'AOL Explorer',
            'browser': function() {
                return /America Online Browser/.test(ua)
            },
            'version': function() {
                return ua.match(/rev(\d+(?:\.\d+)+)/)
            }
        }, {
            'name': 'Flock',
            'browser': function() {
                return /Flock/.test(ua)
            }
        }, {
            'name': 'Camino',
            'browser': function() {
                return /Camino/.test(ve)
            }
        }, {
            'name': 'Firefox',
            'browser': function() {
                return /Firefox/.test(ua)
            }
        }, {
            'name': 'Netscape',
            'browser': function() {
                return /Netscape/.test(ua)
            }
        }, {
            'identifier': 'msie',
            'name': 'Internet Explorer',
            'browser': function() {
                return /MSIE/.test(ua)
            },
            'version': function() {
                return ua.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/)
            }
        }, {
            'name': 'Mozilla',
            'browser': function() {
                return /Gecko|Mozilla/.test(ua)
            },
            'version': function() {
                return ua.match(/rv:(\d+(?:\.\d+)+)/)
            }
        }]; i < data.length; i++) {
        if (data[i].browser()) {
            var identifier = data[i].identifier ? data[i].identifier : data[i].name.toLowerCase();
            Private[identifier] = true;
            Private.browser = data[i].name;
            var result;
            if (data[i].version != undefined && (result = data[i].version())) {
                Private.version.string = result[1];
                Private.version.number = parseFloat(result[1])
            } else {
                var re = new RegExp(data[i].name + '(?:\\s|\\/)(\\d+(?:\\.\\d+)+(?:(?:a|b)\\d*)?)');
                result = ua.match(re);
                if (result != undefined) {
                    Private.version.string = result[1];
                    Private.version.number = parseFloat(result[1])
                }
            }
            break
        }
    };
    for (var i = 0, pl = navigator.platform, data = [{
            'identifier': 'win',
            'name': 'Windows',
            'OS': function() {
                return /Win/.test(pl)
            }
        }, {
            'name': 'Mac',
            'OS': function() {
                return /Mac/.test(pl)
            }
        }, {
            'name': 'Linux',
            'OS': function() {
                return /Linux/.test(pl)
            }
        }]; i < data.length; i++) {
        if (data[i].OS()) {
            var identifier = data[i].identifier ? data[i].identifier : data[i].name.toLowerCase();
            Private[identifier] = true;
            Private.OS = data[i].name;
            break
        }
    }
}();

/* ----------------------------------------------------------------- */

var aol = $.browser.aol(); // AOL Explorer
var camino = $.browser.camino(); // Camino
var firefox = $.browser.firefox(); // Firefox
var flock = $.browser.flock(); // Flock
var icab = $.browser.icab(); // iCab
var konqueror = $.browser.konqueror(); // Konqueror
var mozilla = $.browser.mozilla(); // Mozilla
var msie = $.browser.msie(); // Internet Explorer Win / Mac
var netscape = $.browser.netscape(); // Netscape
var opera = $.browser.opera(); // Opera
var safari = $.browser.safari(); // Safari

var userbrowser = $.browser.browser(); //detected user browser

//operating systems

var linux = $.browser.linux(); // Linux
var mac = $.browser.mac(); // Mac OS
var win = $.browser.win(); // Microsoft Windows

//version

var userversion = $.browser.version.number();

/* ----------------------------------------------------------------- */

if (mac == true) {

    $("html").addClass("mac");


} else if (linux == true) {

    $("html").addClass("linux");

} else if (win == true) {

    $("html").addClass("windows");

}

/* ----------------------------------------------------------------- */

if (userbrowser == "Safari") {

    $("html").addClass("safari");

} else if (userbrowser == "Firefox") {

    $("html").addClass("firefox");

} else if (userbrowser == "Camino") {

    $("html").addClass("camino");

} else if (userbrowser == "AOL Explorer") {

    $("html").addClass("aol");

} else if (userbrowser == "Flock") {

    $("html").addClass("flock");

} else if (userbrowser == "iCab") {

    $("html").addClass("icab");

} else if (userbrowser == "Konqueror") {

    $("html").addClass("konqueror");

} else if (userbrowser == "Mozilla") {

    $("html").addClass("mozilla");

} else if (userbrowser == "Netscape") {

    $("html").addClass("netscape");

} else if (userbrowser == "Opera") {

    $("html").addClass("opera");

} else if (userbrowser == "Internet Explorer") {

    $("html").addClass("ie");

} else {}

$("html").addClass("" + userversion + "");

Son çare kesin çözüm.

* {display:none!important}
Kategori
Front-end
Kaynak
jQBrowser Browser CSS Hacks
Etiket
Daha Fazla Göster

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir