Урок 14. Кросбраузерність.

Кросбраузерність сайту  — це властивість сайту однаково відображатися та функціонувати у відповідності до поставленого завдання в усіх браузерах.

Простіше кажучи, таку характеристику дають сайтам, дизайн яких однаковий як в Internet Explorer, так і в Google Chrome. Відображення сайту при цьому може відрізнятися лише дрібними деталями (наприклад закругленими куточками, рівнем тіні, градієнтною або суцільною заливкою), але не кольоровою гамою, розташуванням елементів, а також, що найважливіше у визначенні даного поняття, структурою сайту, адже особливо багато проблем виникає з блочною версткою.

Часто виникає багато проблем з версіями Internet Explorer нижче 10, тому багато розробників веб-сайтів не турбуються про кросбраузерність, а ставлять сторінку-заглушку, тобто користувач Internet Explorer може бачити лише одну сторінку, на якій йому рекомендується змінити браузер, без можливості перегляду контенту.

Щоб сайт однаково виглядав і в Internet Explorer, і в Firefox, і в Opera, причому найрізноманітніших версій (від стареньких до новітніх), веб-дизайнер повинен подбати про кросбраузерність свого дітища від самого початку роботи над проектом.

Із чого почати? Ну, по-перше, необхідно визначитися, з якими саме браузерами повинен працювати сайт. Для цього потрібно вивчити статистику відвідувань сайтів (наприклад, зі схожою тематикою), у якій є можливість подивитися, якими браузерами користувалися його відвідувачі. Сервіс Google Analytics, наприклад, надає таку можливість. Таким чином, визначивши найбільш популярні з погляду кількості відвідувань браузери, можна приступати до дій.

Справа в тому, що різні браузери хоч і дотримуються загальних правил і стандартів, але може трапитися так, що алгоритми обробки html- кодів і каскадних таблиць css у них виявляться різними. І тому не завжди однаковий елемент виглядає однаково в різних браузерах

Рішень такої проблеми може бути декілька. Найпоширеніший спосіб, застосовуваний багатьма веб-програмістами – це написання так званих “хаків” – наборів спеціальних селекторів або правил, що розуміються тільки якимось певним браузером. Тобто, якщо необхідно коректно відображати сайт, скажімо, у трьох браузерах, то потрібно написати по “хаку” для кожного із цих браузерів. Але для декількох десятків різних браузерів і їх версій прописувати “хаки” довго і нераціонально. Тому ще один спосіб – просто використовувати ті елементи при верстці html-коду, які у всіх необхідних браузерах відображаються однаково.

Як протестувати сайт на кросбраузерність?

Проводити тестування сайту на кросбраузерність найкраще на локальному комп’ютері, на якому встановлені різні браузери, різні версії браузерів і існує можливість змінювати роздільну здатність монітора. Зробити це можна шляхом створення декількох віртуальних машин з різними ОС, на яких і будуть установлені різні браузери (Linux, Windows, Mac OS і BSD браузери).

Перевірити сайт на кросбраузерність можна встановивши на локальному комп’ютері веб-сервер (ISS, Apache,…) і звернувшись до сторінки через IP-адресу комп’ютера. Недоліки цього способу перевірки: Ви протестуєте сайт тільки під однією ОС і під браузерами сумісними із цією ОС, у більшості випадків Вам не вдасться встановити більш старі версії браузерів паралельно новим версіям, Ви затратите величезну кількість часу на встановлення веб-сервера і браузерів/різних версій браузерів.

Для полегшення перевірки сайту на сумісність із різними браузерами є вже готові утиліти та он-лайн сервіси. Використовуючи такі сервіси Ви позбавите себе від установки всіх браузерів, що перевіряються, або версій браузерів, віртуальних машин. Буде достатньо лише встановити утиліту або відвідати он-лайн сервіс перевірки кросбраузерності й у результаті можна одержати скріншоти відображення сайту в різних браузерах, а після чого порівнювати та аналізувати їх.

 

Джерела використаної інформації:

Вікіпедія

WebStudio2U