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

24

Від автора: люди користуються різними браузерами для перегляду веб-сторінок. Звичайно, є найпопулярніші, такі як Chrome. Є і менш використовувані (Safari, Internet Explorer), але якщо ви робите сайт для людей, то повинні знати про кросбраузерність – як зробити її і що це взагалі таке. Давайте подивимося, як домогтися однакового відображення сайту у всіх основних браузерах.

Головна мета кросбраузерності – не допустити значних змін дизайну сайту в різних браузерах. Якщо різниця є тільки в дрібницях і на загальне сприйняття сайту це не впливає, то можна сказати, що з проблемою кросбраузерності ви впоралися. Але все-таки, які реальні поради можна дати з цього приводу?

Як добитися кросбраузерності

На сьогоднішній момент є 5 основних самих популярних браузерів, під які і потрібно оптимізувати сайт. І якщо з найновішими версіями веб-оглядачів зазвичай подружитися нескладно, то чим старіша версія, тим більше може бути проблем.

Наприклад, IE6 є одним з найбільш проблемних браузерів в плані підтримки нових тегів html і властивостей css. І все ж деякі сьогодні досі вимагають нормальне відображення сайту в цьому браузері. Як на мене, це вже занадто. Підтримки IE8 достатньо.

Втім, це невеликий відступ. Тепер давайте розглянемо реальні кроки, які допоможуть зробити кросбраузерність сайту.

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

Є така чудова javascript-бібліотека під назвою Modernizr. Її можливості дозволяють реалізувати альтернативу для тих властивостей, які не підтримуються. Саме її я рекомендую використовувати і вам.

Отже, спочатку потрібно пройти на офіційний сайт. https://modernizr.com/download. Тут потрібно відзначити галочками ті технології, які ви плануєте використовувати на своєму сайті. Потрібно сказати, що список досить довгий і без середнього знання сучасних веб-стандартів та англійської мови ви навряд чи зможете розібратися. У будь-якому випадку, є і інтуїтивно зрозумілі властивості. Навіть якщо ви відзначите галочками всі, то отриманий код не буде занадто громіздким.

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

Рис. 1. Вибір технологій, які буде перевіряти бібліотека.

Перевірка роботи бібліотеки

Після скачування користувача версії бібліотеки потрібно перевірити її роботу. Її необхідно буде підключити за допомогою тега script, вказавши шлях до файлу. Якщо все правильно, то у тега html повинно з’явитися багато нових стильових класів. Ці класи названі за тим технологіям, які ви відзначили галочками.

>p?Відповідно, якщо в тегу html буде зазначено такий клас, значить, технологія в цьому браузері працює. Якщо ж щось не підтримується, то буде прописаний клас «no-назва технології». Відразу ж наведу приклад:

Приміром, вам треба перевірити властивість box-shadow. Для довідки, воно задає тінь елементу. Якщо браузер підтримує його, то в тегу html з’явиться цей стильовий клас. Якщо веб-оглядачів не розпізнає властивість, то з’явиться клас «no-boxshadow».

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

Рис. 2. В тегу html ви побачите безліч класів. У цьому випадку бачимо, що браузер підтримує практично всі технології.

Тепер управління кросбраузерністю повністю в ваших руках. Досить класу no-boxshadow задати якісь альтернативні властивості і у всіх браузерах, що не підтримують властивість box-shadow, замість цього будуть застосовані ці правила. Це дуже зручно.

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

.multiplebgs selector { background-image: url(‘зображення.png’) center 40px no-repeat, url(‘изображение2.png’); }
.no-multiplebgs selector { background-image: url(‘зображення.png’) center 40px no-repeat lightgray; }

Пояснення прикладу. Нас цікавить технологія множинних фонів, які давно підтримуються в СЅЅ3. Для цього достатньо перераховувати адреси зображень і їх параметри через кому. Природно, старі браузери не підтримують цього, тому для них прописуємо свої стилі, використовуючи клас .no-multiplebgs. Він вказує на те, що стилі застосовуватися в тому випадку, якщо браузер не підтримує множинні фони.

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

Звичайно ж, функціонал бібліотеки набагато ширше. Можна проводити тестування підтримки різних технологій і на виході чіпляти події до результату. Приклад:

Modernizr.load({
Test: Modernizr.textshadow,
nope: ‘jQuery.textshadow.js’})

Отже, при завантаженні бібліотека визначить, чи підтримує браузер властивість text-shadow. Якщо так – нічого не треба робити. Якщо ні, то підключається файл скрипту, який додає підтримку цієї властивості в старі браузери. Як бачите, таким же чином можна реалізувати підтримку переважної більшості технологій.

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

Загалом, нічого краще бібліотеки ModerNizr для вирішення проблем з кросбраузерністю я поки не бачив. Її використовують найбільші міжнародні компанії.

Тепер ви знаєте, що таке сайту кросбраузерність, як її зробити і які інструменти для цього потрібно використовувати. Підписуйтесь на наш блог і дізнавайтеся про сайтобудуванні більше.