6 Червня 2020

Веб програмування. Що таке кроссбраузерность?

Для перегляду інтернет-сайтів користувачі мережі Інтернет використовують спеціальні програми – браузери. Ще кілька років тому відвідувачам інтернету були відомі лише один-два різних браузера, то тепер число таких програм обчислюється десятками, особливо, якщо враховувати, що кожна з них має по декілька версій, що відрізняються по функціональності.
У зв’язку з цим з’явилося поняття кросбраузерності – поняття, яке описує властивість сайту ідентично працювати і відображатися у всіх браузерах (зазвичай враховуються лише найбільш поширені). Під ідентичністю розуміється відсутність розвалив верстки і здатність відображати матеріал з однаковим ступенем читабельності. Поняття «кроссбраузерность» дуже часто плутають з попіксельно відповідністю, що насправді є різними поняттями.

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

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

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

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

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

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

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

photo
photo