Похоже, что уже почти весь мир отказался от IE6. Ну, может какие-то 5% пользователей еще используют его, но ведь не веб-разработчики виноваты в том, что они используют устаревшее ПО.

Если вы занимаетесь разработкой веб-сайтов и приложений, то наверняка знаете, что процент пользователей IE6 уже очень мал. Например, если судить по статистике нашего веб-сайта, то всего 0.5% наших посетителей используют IE6 (статистика за последние 30 дней). Вероятно, ваша статистика показывает приблизительно такие же данные.

По этой причине, веб-дизайнерам и разработчикам теперь осталось уделять время лишь хакам для IE7 и IE8. Сначала важно отметить тот факт, что если вы следуете определенным принципам разработки CSS-кода, то вам вообще не понадобятся хаки.

Тем не менее, многим начинающим разработчикам зачастую требуется определять IE7 или IE8. Давайте ознакомимся с наилучшими способами решения данной задачи.

Условные классы от Пола Айриша

Лучший метод заключается в указании , и он был разработан Полом Айришом. Делаем следующим образом:

Данный код использует для определения конкретных версий IE, а HTML-элемент получает отдельное имя класса для каждой версии IE, и не получает класса вообще, если браузер пользователя не IE.

Element {
margin-bottom: 20px;
}

Ie7 .element {
margin-bottom: 10px;
}

Ie8 .element {
margin-bottom: 15px;
}
В каждом браузере будет нижнее поле в 20 пикселей, но в браузерах IE7 и 8 она будет составлять 10 и 15 пикселей соответственно.

Здесь важно отметить то, что определение IE временами очень важно, но я бы рекомендовал вам максимально постараться найти лучшее решение по обходу несоответствия между браузерами. Старайтесь избегать использования условных классов и последующих хаков, о которых дальше пойдет речь. Порой легче и правильнее будет просто по-другому структурировать код CSS.

CSS-хаки

Теперь давайте рассмотрим способы определения IE7-8 посредством хаков. Сперва мы научимся определять только IE7. Здесь, вероятно, существует более 2-х методов, но мы расскажем вам лишь о 2 (больше которых вам ничего и не понадобится):

* + html .element {
margin-bottom: 10px;
}
Хак – это часть селектора, которая расположена перед.element. Ни один другой браузер не распознает данный селектор, так что 10-пиксельное поле будет существовать только в браузере IE7.

И еще один менее понятный способ:

*:first-child+html .element {
margin-bottom: 10px;
}
Далее можно определить IE7 следующим образом:

Element {
margin-bottom: 20px;
*margin-bottom: 10px;
}
«Хак» представляет собой звездочку (* ) в начале строки кода CSS, который мы хотим применить к браузеру IE7. Единственная проблема заключается в том, что это также распространяется и на 6 версию браузера. Так что, вам следует использовать данный метод только если вы уверены в важности применения данного кода в обеих версиях браузера. Либо, если вас совсем не волнует то, как это будет отображено в IE6.

По моим личным наблюдениям, данный метод не подходит для того, чтобы определять только IE8 (и при этом не охватывать IE6-7, 9 и так далее). Остается лишь использовать условный комментарий.

Тем не менее, если вы отказались от поддержки IE7, то вы можете использовать следующий вариант:

Element {
margin-bottom: 20px;
margin-bottom: 10px9;
}
«Хак» заключается в указании «\9 » в конце значения, перед заключительной точкой с запятой. Это позволит вам определить IE8 и ниже, так что вы можете использовать данный хак для определения только 8 версии браузера, если вы уже отказались от поддержки 7 и 6 версий.

Условные комментарии

Наконец, мы можете разделить ваш CSS-код для IE7 и для IE8 в отдельные файлы. Это можно сделать, воспользовавшись условными комментариями:

Но лично я не рекомендую вам использовать данный метод. Здесь есть 2 основные проблемы: первая – это разделяет ваш CSS-файл на 3 отдельных файла, что приводит к сложности синхронизации. А вторая – вы создаете дополнительные запросы HTTP в двух самых медленных браузерах, что значительно растягивает процесс загрузки вашего веб-сайта.

Лично я советую вам использовать либо условные классы, либо простые хаки для определения IE7-8.

Вопросы?

Данное руководство не претендует на звание лучшего пособия по данному предмету. Это скорее подсказка для новичков .

Я уже как-то писал статью про , но сегодня я столкнулся с другой проблемой — как определить конкретную версию Internet Explorer. Как всем известно этот браузер постоянно преподносит нам сюрпризы, и каждая его версия практически живет свое жизнью. Бывают такие ситуации, что код адекватно работает в 9-й версии, но не работает в 8-й, и наоборот. И такие моменты встречаются при работе с каждой версией. Поэтому рано или поздно вам придется столкнуться с проблемой определения конкретной версии IE.

Как оказалось определить версию IE не составляет особого труда. При определении версии можно воспользоваться интересной особенностью Internet Explorer — у каждой версии этого «браузера» имеются уникальные глобальные объекты. Например, в IE9 существует глобальный объект document.addEventListener, и такой объект используется только в версиях старше IE9(включительно). Или же объект document.querySelector — он появился только в версии IE8 и используется в более новых версиях. Такие объекты есть в каждой версии, опираясь на них(проверяя их существование) можно легко составлять условия для конкретных версий Internet Explorer.
Какие объекты присутствуют в различных версиях я приведу в ниже:
IE10+ — window.atob
IE9+ — document.addEventListener
IE8+ — document.querySelector
IE7+ — window.XMLHttpRequest
IE6+ — document.compatMode
Еще один глобальный объект document.all существует во всех версиях IE, но не используется ни в каких других браузерах, основываясь на нем можно отличить IE от других браузеров.

Как определить версию Internet Explorer в javascript. Код

Теперь у нас есть все необходимые составляющие: объект, который есть во всех версиях IE и только в нем — это позволит отличать его от других браузеров. А также у нас есть объекты, которые помогут отличать конкретные версии IE. Ниже приведу несколько примеров, которые наглядно покажут, как на практике можно использовать глобальные объекты IE.

If(document.all){ // код для всех версий IE. В других браузерах выполняться не будет } if(document.all && !window.atob){ // код для IE9 и ниже } if(document.all && !document.addEventListener){ // код для IE8 и ниже } if(document.all && !document.querySelector){ // код для IE7 и ниже } if(document.all && !window.XMLHttpRequest){ // код для IE6 и ниже } if(document.all && window.atob){ // код для IE10 и выше } if(document.all && document.addEventListener){ // код для IE9 и выше } if(document.all && document.querySelector){ // код для IE8 и выше } if(document.all && window.XMLHttpRequest){ // код для IE7 и выше } if(document.all && document.querySelector && !document.addEventListener){ // код только для IE8 }

Хорошо если ваш сайт работает во всех, или почти во всех браузерах так, как вы того хотите. Все меняется, выходят новые версии, появляются новые возможности, и глупо их не использовать, в угоду «старичкам». Года 1,5 назад IE 6.0 (судя по статистике посещений одного из моих сайтов) был на каждом третьем компьютере, использующем IE. Приходилось с ним считаться, т.к. IE доминировал на компьютерах — более 40% посетителей пользовались IE. Я связываю такое распространение IE 6.0 (не смотря на то, что уже вышла 8я версия), в первую очередь, с широким распространением старых пиратских версий Windows XP в России, которые не подключаются к серверу обновлений.

Сейчас активно устанавливают и более свежие версии XP (тоже почти везде пиратские), где уже в комплекте идет 7-я версия IE, и Windows 7, поставляемая с MSIE 8.0. Кроме того, IE пришлось потесниться, а на первое место вышла Opera (29,8% посетителей), а IE, потеряв более 10%, занимает 2-е место, набрав 28.8% от общего объема посетителей. При этом доля IE 6.0 в общем объеме пользователей IE сократилась с 34% до 15%. Замыкает тройку лидеров — FireFox.

Так образом, IE 6.0 сейчас пользуется каждый 20й пользователь (около 5%). С ними все ещё приходится считаться.

Это долгое вступление призвано показать, что вопрос о том поддерживать какие то версии браузеров или нет — серьёзный, требует периодических исследований, чтобы понимать какова текущая ситуация. Она будет разной для разных регионов, возможно даже будет зависеть от тематики сайта. Рано или поздно возникает идея сообщить пользователю, что мол, есть уже новые браузеры (пора ими начать пользоваться, дружок!).

Определить версию программы браузера, его семейство и предпринять какие то действия, вы можете как на стороне сервера, так и на стороне клиента. Для примера кусочек кода на javascript, позволяющий определить, что пользователь использует IE версии ниже чем 7.0

... function check_version() { //после загрузки документа, будет выполнена проверка версии браузера //и предприняты какие то действия ...

. . . function check_version () { < ! -- var str = navigator . appVersion ; var reg = /MSIE[\s]([\d])/i ; var matches = str . match (reg ) ; if (str . indexOf ("MSIE" ) > 0 && matches [ 1 ] < "7" ) { //к примеру, покажем блок с сообщением, вроде - "вы используете старую версию var obj = document . getElementById ("hintIE" ) ; obj . style . display = "block" ; //--> < / head > //после загрузки документа, будет выполнена проверка версии браузера //и предприняты какие то действия < body onload = "check_version();" > . . .

В PHP можно обратиться к заголовкам, передаваемым браузером, с помощью ф-ции getallheaders() , она вернет ассоциативный массив, где элемент будет содержать информацию о браузере.

Так мы выяснили, что путей как минимум — 2. Какой лучше? Я сторонник того, чтобы вся работа, которая не сопряжена с безопасностью, которая достаточно легко реализуема на стороне клиента — выполнялась на клиентской машине. В наше время чаще получается так, что ресурсы клиентских машин значительно превышают возможности виртуальных выделенных веб-серверов. Вот пусть они и работают по мере возможности:).

С другой стороны, у клиента вообще могут не работать javascripts и тогда выполнить проверку на сервере — единственный путь. Явление это очень редкое, хотя точной статистики у меня нет.

Есть тут и «подводные камни». Ведь если не принимать в счет мои личные предпочтения, то выполнить проверку на стороне сервера будет принципиально более верным подходом. Хотя бы потому, что определить версию браузера на некоторых старых клиентах, будет нельзя так, как я это показал в примере. И скрипт будет более сложным. Одним из подводных камней может оказаться система кеширования страниц сайта (как, например, у drupal). Один раз определив на стороне сервера, что клиент подходит или, наоборот, не подходит для отображения сайта, страница с данным результатом будет отображаться всем другим анонимным клиентам, пока не кончится время жизни кеша. В таких случаях уже javasctipt является единственным подходящим вариантом.

Сталкивался с таким поведением плагина fancybox. При открытии модального окна, происходит прокрутка в основном окне к самому верху. Как с этим бороться? Это происходит не всегда, а при некоторых случаях верстки. Верстку уже менять проблематично, ...