Для чого потрібна кроссбраузерность? Як зробити кросбраузерності сайт

1. Як домогтися кросбраузерності
2. Перевірка роботи бібліотеки

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

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

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

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

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

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

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

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

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

Мал. 1. Вибір технологій, які перевірятиме бібліотека.

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

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

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

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

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

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

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

. 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; }

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

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

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

Modernizr. load ({

Test: Modernizr. textshadow,

nope: 'jQuery.textshadow.js'})

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

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

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

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3