Разделение работы с разными браузерами
Библиотека jQuery обладает возможностью определять тип и версию используемого браузера. Эта информация хранится $.browser. Воспользовавшись ей, можно организовать разделение css-указаний для отдельных браузеров, установив элементу html соответствующий класс:
var browser = "unknown"; if($.browser.msie) browser = "msie"; else if($.browser.mozilla) browser = "mozilla"; else if($.browser.safari) browser = "safari"; else if($.browser.opera) browser = "opera"; else if($.browser.webkit) // Chrome browser = "webkit"; $("html") .addClass(browser) .addClass(browser+"-"+$.browser.version.split(".")[0]); // например, в браузере Opera, версии 9.51, класс // элемента html будет равен "opera opera-9"
После этого, для различных типов браузеров можно будет указывать отдельные css-правила. Например для IE-6:
html.msie-6 .someElement{...}
Используемые методы jQuery
Больше браузеров + тип операционной системы
На сайте quirksmode.org предложен скрипт, для распознавания большого количества браузеров, их версий, а так же типа операционной системы. Добавив этот скрипт на страницу, вы сможете узнавать упомянутую информацию следующим образом: переменная BrowserDetect.browser будет содержать тип браузера, BrowserDetect.version версию браузера, а BrowserDetect.OS тип операционной системы.
Весь текст скрипта для распознавания браузеров и ОС представлен ниже:
var BrowserDetect = { init: function() { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version"; this.OS = this.searchString(this.dataOS) || "an unknown OS"; }, searchString: function (data) { for (var i=0;i<data.length;i++) { var dataString = data[i].string; var dataProp = data[i].prop; this.versionSearchString = data[i].versionSearch || data[i].identity; if (dataString) { if (dataString.indexOf(data[i].subString) != -1) return data[i].identity; } else if (dataProp) return data[i].identity; } }, searchVersion: function (dataString) { var index = dataString.indexOf(this.versionSearchString); if (index == -1) return; return parseFloat(dataString.substring(index+this.versionSearchString.length+1)); }, dataBrowser: [ { string: navigator.userAgent, subString: "Chrome", identity: "Chrome" }, { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb" }, { string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" }, { prop: window.opera, identity: "Opera" }, { string: navigator.vendor, subString: "iCab", identity: "iCab" }, { string: navigator.vendor, subString: "KDE", identity: "Konqueror" }, { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" }, { string: navigator.vendor, subString: "Camino", identity: "Camino" }, { // for newer Netscapes (6+) string: navigator.userAgent, subString: "Netscape", identity: "Netscape" }, { string: navigator.userAgent, subString: "MSIE", identity: "Explorer", versionSearch: "MSIE" }, { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla", versionSearch: "rv" }, { // for older Netscapes (4-) string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla" } ], dataOS : [ { string: navigator.platform, subString: "Win", identity: "Windows" }, { string: navigator.platform, subString: "Mac", identity: "Mac" }, { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" }, { string: navigator.platform, subString: "Linux", identity: "Linux" } ] }; BrowserDetect.init();
Распознаваемые браузеры:
- Explorer
- Opera
- Firefox
- Mozilla
- Safari
- Chrome
- Netscape
- OmniWeb
- iCab
- Konqueror
- Camino
Операционные системы:
- Windows
- Linux
- Mac
- iPhone/iPod