Я вже якось писав статтю про , але сьогодні я зіткнувся з іншою проблемою - як визначити конкретну версію 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
... //після завантаження документа, буде виконано перевірку версії браузера //і вжито якісь дії
.... . .
< / head > //після завантаження документа, буде виконано перевірку версії браузера //і вжиті якісь дії < body onload = "check_version();" > . . . |
У PHPможна звернутися до заголовків, що передаються браузером, за допомогою ф-ції getallheaders(), вона поверне асоціативний масив, де елемент міститиме інформацію про браузер.
Тож ми з'ясували, що шляхів як мінімум — 2. Який краще? Я прихильник того, щоб вся робота, яка не пов'язана з безпекою, яка досить легко реалізується на стороні клієнта, - виконувалася на клієнтській машині. В наш час найчастіше виходить так, що ресурси клієнтських машин значно перевищують можливості віртуальних виділених веб-серверів. Ось нехай вони і працюють у міру можливості:).
З іншого боку, у клієнта взагалі можуть працювати javascripts і тоді виконати перевірку на сервері — єдиний шлях. Явище це дуже рідкісне, хоча точної статистики я не маю.
Є тут і «підводне каміння». Адже якщо не брати до уваги мої особисті переваги, то виконати перевірку на стороні сервера буде важливо більш вірним підходом. Хоча б тому, що визначити версію браузера на деяких старих клієнтах, не можна буде так, як я це показав у прикладі. І скрипт буде складнішим. Одним з підводного каміння може виявитися система кешування сторінок сайту (як, наприклад, у drupal). Один раз визначивши на стороні сервера, що клієнт підходить або, навпаки, не підходить для відображення сайту, сторінка з цим результатом відображатиметься всім іншим анонімним клієнтам, доки не скінчиться час життя кеша. У таких випадках javasctipt є єдиним підходящим варіантом.
Зіткнувся з такою поведінкою плагіну fancybox. При відкритті модального вікна відбувається прокручування в основному вікні до самого верху. Як із цим боротися? Це відбувається не завжди, а за деяких випадків верстки. Верстку вже міняти проблематично.
Схоже, що майже весь світ відмовився від 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.
margin-bottom: 15px;
}
У кожному браузері буде нижнє поле 20 пікселів, але в браузерах IE7 і 8 вона становитиме 10 і 15 пікселів відповідно.
Тут важливо відзначити те, що визначення IE часом дуже важливе, але я б рекомендував вам максимально постаратися знайти краще рішеннящодо обходу невідповідності між браузерами. Намагайтеся уникати використання умовних класів та наступних хаків, про які далі йтиметься. Іноді легше і правильніше буде по-іншому структурувати код CSS.
CSS-хакі
Тепер розглянемо способи визначення IE7-8 за допомогою хаків. Спочатку ми навчимося визначати лише IE7. Тут, мабуть, існує більше 2-х методів, але ми розповімо вам лише про 2 (більше яких вам нічого і не знадобиться):
* + html .element (
margin-bottom: 10px;
}
Хак - це частина селектора, яка розташована перед елементом. Жоден інший браузер не розпізнає цей селектор, тому 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.
Запитання?
Цей посібник не претендує на звання кращої допомоги з даного предмета. Це швидше підказка для новачків.
