Кросбраузерність – це однакове відображення сайту в різних браузерах. Якщо ви не задумаєтеся про це на етапі верстки, в майбутньому ваш сайт буде працювати некоректно: в різних браузерах з’їжджатимуть картинки й окремі елементи, змінюватимуться шрифти тощо. Некоректне відображення сайту в різних браузерах – це клієнти, які йдуть до конкурентів. Якщо ви не будете тестувати кросбраузерність, показник відмов буде збільшуватися, а конверсій – зменшуватися.
Проблема виникає через те, що браузери застосовують різні системи для обробки і завантаження інформації: Blink – Chrome, Opera, WebKit – Safari, Gecko – Firefox, EdgeHTML – в Edge (на Windows 10).
Ці програми по-різному відображають певні css-стилі, html-теги і їх вміст. І щоб усунути непотрібні ефекти, доведеться вносити зміни вручну. Для цього існує кілька способів, найпопулярнішим з яких є використання приставок до назв CSS-властивостей. Метод не передбачає ніяких негативних «побічних дій», а код при цьому залишається валідним і зрозумілим попри те, що його обсяг зростає.
Інші методи покращення кросбраузерності:
- CSS-хаки. Цей метод покращення кросбраузерності css передбачає застосування властивостей, зрозумілих для окремих браузерів. Застосування хаків може привести до погіршення читабельності коду, а також якості підтримки в майбутньому.
- Розділяємо стилі. Спеціаліст повинен підключити для кожного браузера відповідний йому файл стилів. Наприклад, Internet Explorer застосовує певні умовні коментарі, а інші програми сприймають їх як стандартні.
Перевірка кросбраузерності: шукаємо проблему
Профілактика – завжди краще, ніж лікування. Для програмування це твердження теж актуально. На етапі розробки програміст повинен застосовувати універсальні елементи, які однаково відображаються в усіх браузерах. Це допоможе зробити код коротшим і зрозумілішим. Особливості відображення можна безкоштовно перевірити в сервісі caniuse.com. Перегляньте таблиці й уточніть, в якій версії тег вже підтримується певною системою.
Щоб дізнатися, чи однаково ваш сайт відображається в різних браузерах, найкраще відкрити їх всі та уважно переглянути кожну сторінку. Також ви можете скористатися ресурсами:
- browsershots.org.
- crossbrowsertesting.com.
- browserstack.com.
Чому вам варто перевірити сайт у різних браузерах і не ігнорувати проблему
Якщо ви думаєте, що аудиторія поблажливо поставиться до деяких проблем на вашому сайті, повірте – це не так. Ваша цільова аудиторія користується різними браузерами, тому якщо ваш сайт некоректно відобразиться хоча б в одному з них, ви втратите відразу 20-30% цільової аудиторії.
Кросбраузерність є одним із найважливіших факторів ефективної роботи. Якщо користувач відкриє сайт і побачить, що, наприклад, текст наїжджає на картинку, а шрифт дуже дрібний, то він просто піде до конкурентів. Погана кросбраузерність – це гарантія стрімкого зниження конверсій. Щоб перевірити кроссбраузерность, можна скористатися Google Analytics. Дізнайтеся, якими браузерами користуються ваші клієнти, та переконайтеся, що сайт коректно показується в кожному з них. Для цього також можна використати сервіси NetRenderer, Browsershots, CrossBrowserTesting і Browsera.
Якщо вам знадобилася грамотна перевірка сайту в різних браузерах і покращення кросбраузерності, звертайтеся до фахівців компанії Luxsite.