Набір кросбраузерних CSS3 властивостей. Кросбраузерний CSS3, або як боротися з Internet Explorer Css кросбраузерна

Від автора: люди користуються різними браузерами для перегляду веб-сторінок. Звичайно, є найпопулярніші, такі як 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; )

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 потрібно самому непогано розумітися на веб-програмуванні та верстці сайтів. Досвідчена людина зможе визначити, якими властивостями можна замінити ті, що підтримуються дуже погано.

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

Під кросбраузерністю зазвичай розуміють здатність сайту виглядати у всіх браузерах однаково (або однаково добре).

Для того, щоб сайт виглядав максимально однаково у всіх браузерах (сучасних + підтримка деяких застарілих), необхідно знати різні прийоми та особливості браузерів. Їхнім вивченням ми зараз і займемося.

Блок. Сучасні браузери

В даний час популярними є такі браузери: Internet Explorer (скорочено IE, браузер від компанії Microsoft, вбудований у Windows), Opera (норвезький браузер), Mozilla (вона Firefox), Google Chrome (браузер від компанії Google), Safari (браузер від Apple). Браузери у мобільних пристроях: Android, IOS.

Блок. Двигуни браузерів

Крім браузерів існує таке поняття, як двигунбраузер. Двигун - це основа браузера, яка перетворює HTML і CSS на видиму на екрані картинку. Двигунів існує набагато менше, ніж браузерів і, як наслідок, багато браузерів мають однакові движки і тому однакові особливості та баги (проблеми).

Види двигунів: Gecko (Mozilla / Firefox). Webkit (Safari, Chrome, Opera 14+, Android, IOS). Presto (Opera до 14 версії). Trident (Internet Explorer).

Opera, починаючи з 14 версії, перейшла на двигун Webkit.

В даний час Webkit розпався на два двигуни Blink від Google Chrome і Opera 14 + і двигун від Safari. Ці два движки, як і раніше, підтримують префікс -webkit , однак їх поділ вже можна спостерігати на деяких CSS властивостях, наприклад, hyphens

Браузер Internet Explorer офіційно більше не існує, остання його версія 11-та. Однак, фактично, цей браузер змінив назву (але не движок) і тепер називається Edge.

Блок. Вендорні префікси

В даний час серед браузерів склалася така ситуація: до того, як властивість CSS з'явиться в специфікації, браузери можуть реалізовувати пробну версію цієї властивості зі спеціальною приставкою, яка називається вендорним префіксом(Від слова vendors - розробники, префікс розробників).

Як це виглядає, погляньмо на прикладі властивості box-sizing (зміна блокової моделі).

P (box-sizing: border-box;)

Ця властивість почала підтримуватися тільки з Firefox 29, проте вже з версії Firefox 2 вона була доступна з префіксом -moz:

P (-moz-box-sizing: border-box; )

Інші браузери мають аналогічні приставки: -moz - Mozilla/Firefox (движок Gecko), -webkit - браузери на движку Webkit (Google Chrome, Safari, Opera 14+, Android, IOS), -o - Opera до 13 версії включно (движок Presto ), -ms - IE з версії 8+.

Таким чином, найбільш кросбраузерний варіант властивості box-sizing, з використанням вендорних префіксів, матиме наступний вигляд (з префіксом -ms його писати не потрібно, IE відразу перейшов на підтримку цієї властивості):

P ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

У CSS багато властивостей мають аналогічну реалізацію: з префіксом і його.

Зверніть також увагу на те, що Opera з версії 14 перейшла на Webkit і тепер для неї використовуватиметься префікс -webkit , а префікс -o залишиться тільки для старих версій (до 14-ї).

Є таке правило: властивості з префіксами пишуться до якості без префіксу. Це зроблено для того, щоб основна властивість затирала властивості з префіксами, так як браузер може підтримувати властивість як з префіксом, так і без нього. А властивість із префіксом може працювати з будь-якими проблемами.

В даний час деякі браузери вирішили відмовитися від префіксів через їхню незручність. І зараз замість них використовують так звані прапори. Властивості тепер впроваджуються у браузер, але за замовчуванням відключені, проте їх можна включити у налаштуваннях браузера, поставивши відповідний прапорець у налаштуваннях. В даний час браузери Google Chrome та Opera для нових властивостей підтримують саме цю модель.

Блок. Де подивитись які префікси писати

Рекомендую спеціальний сервіс caniuse.com, на якому можна подивитися які властивості вже можна використовувати і чи потрібно для них писати префікси чи ні.

Блок. Статистика з браузерів

Щоб знати, який браузер слід підтримувати в даний час, а на підтримку якого слід забити, необхідно відстежувати статистику браузерів в регіоні сайту. Зробити це можна за допомогою наступного сервісу: gs.statcounter.com – усі браузери з версіями по країнах (english).

Блок. Як перевірити сайт у різних браузерах

Після створення сайту його потрібно потестувати у всіх популярних браузерах. Однак зробити це не так просто як здається - мало того, що браузери відрізняються від версії до версії, так ще існують різницю між однією версією браузера в Windows і, наприклад, Linux. Зрозуміло, що таку кількість браузерів просто неможливо.

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

Блок. Нормалізація стилів

Крім скидів, існує так звана нормалізація- це коли значення властивостей (наприклад, margin і padding) не скидаються в нуль, а вказуються певні зручні значення (щоб у всіх браузерах відступи за умовчанням були однаковими і зручними).

Пам'ятайте, що скидання стилів необхідно робити до підключення ваших стилів, а не після!

CSS Reset слід винести в окремий файл (зазвичай його називають reset.css). У такому випадку ви можете використовувати його в різних проектах, не докладаючи при цьому жодних зусиль щодо його відокремлення від інших правил CSS.

Не бійтеся модифікувати сам reset.css. Підлаштуйте його під себе, змусіть працювати на себе. Змінюйте, перебудовуйте, прибирайте та додавайте так, як це потрібно у вашому конкретному випадку.

Має сенс додати стилі за умовчанням для h1-h6 (наприклад, розмір шрифту), для td (зробити text-align: center) і т.д.

Що вам робити далі:

Приступайте до розв'язання задач за наступним посиланням: завдання до уроку .

Коли все вирішите – переходьте до вивчення нової теми.

Привіт дорогі читачі!

Всі ми бажаємо того, щоб написані нами стилі коректно відображалися у різних браузерах. Але як не крути, доведеться дописувати стилі, щоб вони працювали в інших браузерах. Цей процес називається – приведення верстки сайту до кроссбраузерного вигляду. Кросбраузерність - це коли css стилі коректно відображаються в різних браузерах, і їх різних версіях.

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

Орієнтуйтесь на найпопулярніші браузери. У мережі можна знайти рейтинги браузерів. Також варто зважати на регіон аудиторії сайту. Наприклад, якщо це сайт для аудиторії з Африки, то тут переважає не Chrome, а інший браузер. Також у процесі верстки варто дивитись, як виглядає сайт у тих браузерах, що займають 2 та 3 місце.

2. Можна пошукати найпопулярніші css стиліякі неправильно виглядають в інших браузерах. Знайти їм CSS хакі.

3. Існують спеціальні інструменти в мережі для генерації кросбраузерних стилів. Хочу виділити 2 найцікавіші на мій погляд.

Інструменти для CSS кросбраузерності.

• Описано багато стилів;
• Є приклад використання із результатом.

• Спочатку важко орієнтуватися на сайті;
• Не можна генерувати стиль зі своїми параметрами (наведено свій приклад використання).

CSS3 Generator

• Зручний та інтуїтивний в управлінні;
• Можна генерувати стилі своїх параметрів;
• Можна побачити результат генерованого стилю.

• Мало стилів

Коли CSS використовується не тільки для оформлення тексту, але і для роботи з шарами при безтабличній верстці, необхідно пам'ятати, що осучасні браузери не однаково трактують такі важливі параметри як margin - зовнішній відсутність елемента, padding - внутрішній відступ елемента, а також параметри position - положення , float - обтікання текстом та ряд інших.

Через ці відмінності в трактуванні значень параметрів часто трапляється, що сайти та веб-інтерфейси, які нормально виглядають у браузерах Mozilla Firefox, Opera і Safari, раптом починають роз'їжджатися в браузері Internet Explorer.

В основі цих відмінностей в інтерпретації CSS браузерами лежить неповна відповідність браузерів Internet Explorer до версії 7 стандартам CSS, прийнятим W3C. Тому для успішної безтабличної верстки для попередніх версій IE, ніж 7, потрібно використовувати ряд спеціальних конструкцій, званих CSS хакі . Також для інших браузерів іноді буває необхідність використовувати CSS хак.

Розглянемо можливе написання CSS, яке було б інтерпретовано лише окремими видами браузерів:

Зміст документа

CSS для IE 5, 5.5, 6, 7 Умовні коментарі Браузери IE давно підтримують так звані умовні коментарі (Conditional Comments), які дозволяють робити контент видимим лише для IE. Умовні коментарі – це просто спеціальним чином сформовані HTML коментарі, які розуміють лише певні версії Internet Explorer для Windows. Для прикладу можна використовувати умовні коментарі для виправлення бага прозорості PNG в IE.

Для їх використання потрібно:

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

Потім таблиця стилів з виправленими помилками зберігається готельно і стає таблицею стилів всім версій IE (наприклад, all-ie.css).

Збережіть окремо таблиці стилів із виправленнями помилок окремо для кожної версії IE (наприклад, ie-5.0.css).

Далі необхідно послідовно підключити ці таблиці стилів через HTML код за допомогою умовних коментарів.

Синтаксис умовних коментарів Наведений умовний коментар буде зрозумілий браузерами IE5, IE5.5 та IE6, а також IE7 та IE8:

Застосування CSS для IE5 Якщо вам необхідно застосувати умовний коментар тільки для IE5, необхідно просто вказати версію 5.0 в умови if IE 5.0:

Застосування CSS для IE5.5 Якщо необхідно застосувати щодо IE5.5, це буде виглядати так:

Застосування CSS для IE6 Те саме для IE6:

Застосування CSS для IE5 та IE5.5 одночасно або для кількох версій Якщо потрібно, використовуючи умовні коментарі, виправити баг з боксовою моделлю в браузерах IE5 та IE5.5, можна використовувати частину індексу версії або оператори порівняння.

Перший приклад підключить таблицю стилів до будь-якої версії Internet Explorer'а перша цифра якої 5:

Як альтернатива, можна вказати, щоб таблиці стилів підключалися до будь-якої версії браузера, номер якої менше 6-ти:

Замість lt (l ess t hen — менше) можна також використовувати lte (l ess t hen or e qual to — менше або дорівнює), gt (g reater t hen — більше), gte (g reater t hen or e qual to — більше або дорівнює) головне при цьому різноманітті можливостей правильно вибрати порядок вказівки умовних коментарів, щоб не потрапити в ситуацію, коли для деяких браузерів групи умовних коментарів перетинаються, даючи несподіваний результат.

Порядок використання Якщо не потрібно, щоб загальні таблиці стилів домінували над таблицями, які створені спеціально для IE, потрібно підключати спочатку загальні таблиці, а вже потім таблиці для IE. На прикладі це виглядає так:

Інші переваги цього методу Використовуючи умовні коментарі, ви також отримуєте спосіб більш достовірного визначення версії браузера. Браузери, які видають себе за Internet Explorer, але насправді не є ними, не будуть використовувати таблиці стилів призначені для IE. За допомогою цього методу ви можете скласти точну статистику щодо того, яку версію IE використовують відвідувачі, без помилок, викликаних програмами та браузерами, що видають себе за IE. оформлені (X)HTML документи збережуть повну відповідність специфікації.Налагодження умовних коментарів Існує одне попередження, про яке варто згадати.

Якщо ви використовуєте кілька версій Internet Explorer на одній машині, то всі ці версії будуть видавати себе за найновішу зі встановлених версій. Це означає, що якщо ви встановлені IE6, але ви переглядаєте сторінку за допомогою IE5, виконатися цей умовний коментар:

А цей умовний коментар не здійсниться:

Для найточнішого відстеження відмінностей в обробці CSS різними версіями IE добре себе зарекомендувала безкоштовна програма IETester, яка підтримує всі версії IE від 5 до 8. А для швидкої зміни праметрів CSS в IE8 за натисканням F12 є засіб розробника, що нагадує FireBug в Mozilla Firefox.

Аналогічно оголошення таблиць стилів, у такий спосіб можна приховувати HTML код від певної чи всіх версій IE. Наприклад, напис «HTML-код» буде відображатися у всіх браузерах крім IE6, якщо помістити його в умовний коментар наступним чином:

HTML-код

Слід пам'ятати, що умовні коментарі в IE можна використовувати скрізь на сторінці, а не тільки для оголошення таблиць стилів для відповідної версії браузера. За допомогою умовних коментарів можна виводити користувачам IE якусь додаткову інформацію, яку не видно користувачам інших браузерів.

Аналогічно умовним коментарям в IE 5-IE 8 підтримується тег ... . Цей тег дозволяє приховати інформацію від користувачів IE, таким чином код:

Це не браузер Internet Explorer

Користувачам IE буде показано як: Це браузер Internet Explorer, а користувачам інших браузерів - Це не браузер Internet Explorer.

Тег не валідний.

CSS хакі IE Щоб не захаращувати HTML код оголошенням декількох таблиць стилів або, якщо потрібно зберегти єдиний CSS-файл можна написати окремі стилі, які будуть працювати тільки в IE. Причому є варіант як для IE6, так і для IE7.

Для IE всіх версій. Якщо поставити перед властивістю дві похилі риси (//), воно сприйматиметься лише браузерами IE всіх версій. Інші браузери таку властивість проігнорують.

Для IE6 існує можливість поставити мінус (-) або нижнє підкреслення (_) перед властивістю, при цьому IE7 не відреагує на нього. Можна також використовувати конструкцію:

* html .style (...)

Наприклад:

Style (background: red; /* для нормальних браузерів */ //background : green; /* для всіх IE */ -background : blue; /* для IE6 */ ) * html .style ( background : blue; /* інший спосіб для IE6 */ )

У цьому випадку фон буде червоним у браузерах Opera та Firefox, зеленим у IE7 та синім – в Internet Explorer 6.

У прикладі змінюється колір тла для різних браузерів. На практиці ж цей метод використовується для того, щоб досягти ідентичності відображення та кросбраузерності. Найчастіше доводиться вдаватися до нього при позиціонуванні та задавати різні значення властивостей типу left, top, padding, margin, width та інших, пов'язаних із розмірами, відсотками та пікселями.

Для IE7 використовується CSS хак:

*: first-child+html .style ( ...)

*+html .style ( ...)

CSS для Firefox Також існують спеціальні CSS хакі, що дозволяють показувати стилі лише браузеру Firefox.

html: root .style (...) /* цей працює ще й для Safari */

Style, x: -moz-any-link (...)

Для швидкої зміни праметрів CSS у Firefox за натисканням F12 доступний (вимагає попередньої установки) засіб розробника Firebug – є найкращим серед аналогів.

CSS для Opera CSS хакі для браузера Opera представлені такими прикладами:

Кросбраузерність - це здатність сайту коректно відображатися в різних браузерах. Ресурс має працювати однаково у всіх версіях оглядачів.

Особливо це важливо в епоху адаптивного веб-дизайну, коли на перший план виходить здатність front-end адаптуватися до різноманітних пристроїв і при цьому забезпечувати оптимальну якість перегляду.

Раніше дизайнер створював макет дизайну у Photoshop, який потім переносився до HTML та CSS. Сьогодні технологічні зміни змушують переосмислити цю концепцію. Ми більше не можемо передбачити, який браузер, роздільна здатність або пристрій буде використовуватися для перегляду сайту. Пішли в минулі часи, коли більшість комп'ютерів використовувала фіксований дозвіл 1024 на 768 пікселів, і можна було розробляти сайти зі статичними розмірами.

Сучасні браузери повністю підтримують HTML5 та CSS3. Але один і той же код HTML/CSS/JavaScript у старих браузерах інтерпретується по-різному, що призводить до «кроссбраузерної несумісності» сайту. Особливо це стосується старих версій Internet Explorer.

У цій статті ми розглянемо поточну статистику переглядів веб-сторінок, наведемо перелік коштів, які допомагають вирішувати різні проблеми сумісності.

1. Поточна ситуація

Загальносвітова статистика за 2015 рік показує, що топ-14 дозволів екрану, що використовуються, знаходяться в діапазоні від 1920 на 1080 до 320 на 480 пікселів.

Хоча Windows 7 (31,20%) досі утримує більшу частку ринку, мобільні платформи починають замінювати традиційні, стаціонарні.

Поглянувши на статистику за 2015 рік за браузерами, що використовуються, ми бачимо, що перше місце належить Chrome (усі версії — 44,87% ), друге місце — Firefox (усі версії — 10,37% ), третє Internet Explorer 11 (6,84 %).

Прискорені темпи випуску нових версій Google Chrome та Firefox дозволяють ефективніше розробляти проекти для цих платформ. Дещо інша картина складається для «поганого хлопця» Internet Explorer, тому що в Мережі досі можна знайти його старі версії. А це призводить до виникнення проблем із кросбраузерністю сайту.

Корпорація Microsoft зупинила підтримку IE6 8 квітня 2014 року. І з 2016 року буде підтримуватися і отримувати оновлення тільки остання версія Internet Explorer. Це фактично означає, що на початку 2016 року було повністю припинено підтримку IE7 та IE8 незалежно від операційної системи. IE9 підтримуватиметься лише у Windows Vista, IE10 — лише у Windows Server 2012, IE11 — у Windows 7 та Windows 8.1:

Як наслідок, потрібно припинити розробку під IE6 та, а також під IE7. Щоб обґрунтувати цю стратегію, можна навести кілька прикладів рішень відомих компаній: Google припинила підтримку IE8 у листопаді 2012 року, а IE9 – у жовтні 2013 року.

Github більше не підтримує IE 7 та 8 . Крім цього частина функціоналу Twitter не працює в IE8. І, нарешті, популярний фреймворк не підтримуватиме IE8, починаючи з 4 версії.

Тим не менш, статистика використання може змінюватись в залежності від регіону: 6,11% користувачів у Китаї в 2015 році, як і раніше, переглядали сторінки через IE8. Якщо взяти до уваги, що в Китаї було близько 724 400 000 інтернет-користувачів, можна зрозуміти, що цього року приблизно 44200000 китайців продовжують використовувати IE8.

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

2. Проаналізуйте свою аудиторію

Основний принцип тут такий: що вище необхідна кросбраузерність, то більше часу знадобиться на розробку, що призводить до збільшення вартості проекту. Щоб ухвалити виважене, економічно обґрунтоване рішення, потрібно поставити такі питання:

• Яка ваша цільова аудиторія?
• На який географічний регіон потрібно налаштувати націлення?
• Які браузери та пристрої використовують ваші відвідувачі?
• Чи існують у компанії чи галузі технічні чинники, які змушують вас підтримувати конкретні версії старих браузерів?
• Які з точки зору електронної комерції коефіцієнти конверсії та рентабельності різних груп користувачів за версіями браузерів?

Відповідавши на ці запитання за допомогою статистичних даних, наприклад Google Analytics , можна отримати об'єктивну картину.

3. Проблеми в застарілих браузерах та різні підходи до розробки

Адаптивний веб-дизайн багато в чому залежить від медіа-запитів, за допомогою яких CSS змінюється для різних дозволів екрану. Крім цього, сучасні сайти характеризуються використанням семантичних елементів HTML5 (наприклад, , , , , ) для угруповання компонентів дизайну. Селектори CSS3 використовуються для вибору конкретних елементів і подальшого призначення стилів (наприклад, , :checked , :nth-child(n) , :not(selector) , :last-child)) . І, нарешті, адаптивна типографіка часто задається за допомогою одиниць REM (root em).

Це підводить нас до наступних технічних складнощів при реалізації CSS кросбраузерності:

• Медіа-запити CSS3
• Семантичні елементи HTML5: не підтримується в IE6, 7 та 8;
• Селектори CSS3: не підтримується в IE6. Тільки частково підтримуються в IE7 та 8;
• Одиниці REM : не підтримується в IE6 , 7 та 8 . Тільки частково підтримуються в IE9 і 10;
• Ліміт кількості правил CSS: IE9 і нижче підтримують лише 4095 CSS-селекторів. Правила після 4095 селектора не застосовуються.

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

Існують дві основні стратегії розробки: поступове спрощення та прогресивне поліпшення.

Прогресивне поліпшення — ґрунтується на принципі, що передбачає початок розробки із загального знаменника, з мінімальних технічних вимог та рівня досвіду взаємодії користувача, запропонованого сайтом. Відвідувачі, які заходять на сайт через останні версії браузерів і пристроїв, будуть обслуговуватися версією сайту, що прогресивно розширюється, з усіма новітніми функціями.

З іншого боку, користувачам старих браузерів та повільного інтернет-з'єднання пропонуватиметься графічно усічена, але все ще функціональна версія сайту.

Подібний підхід при реалізації кросбраузерності передбачає початок розробки з простої версії, до якої потім додаються складніші елементи. Старі браузери зможуть відображати сайт із базовим рівнем досвіду взаємодії. А нові функції HTML/CSS/JavaScript будуть доступні у браузерах, які можуть реально їх використовувати.

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

Який підхід виберете ви, залежить від особистих переваг та умов проекту:

• Прогресивне покращення забезпечує більшу стабільність, тому що ви можете поступово додавати нові функції для сучасних браузерів. Але воно потребує більш ретельного планування;
• Деякі розробники стверджують, що немає сенсу підтримувати застарілі браузери і використовувати новітні технології. Підтримка сучасних браузерів дає набагато найкращий досвід взаємодії;
• Існує думка, що прогресивне покращення мертве, оскільки безліч JavaScript-додатків не працюють належним чином при цьому підході;
• Веб-доступність для громадських установ може бути визначена в юридичних вимогах конкретних територіальних утворень, і це може спричинити необхідність особливого підходу.

Враховуючи появу таких інструментів для визначення функцій, як Modernizr, я схиляюся до використання поступового спрощення та чорного списку браузерів при розробці сумісних сайтів.

4. Тестування, тестування, тестування…

Щоб якнайшвидше виявити потенційні проблеми кроссбраузерності JavaScript, потрібно в процесі розробки тестувати сайт у різних браузерах та дозволах. Існують різні програмні емулятори, які можуть допомогти нам:

• Browserstack — це комерційний сервіс, який надає доступ до тестового середовища, в якому можна перевірити свій проект більш ніж на 700 стаціонарних браузерах та мобільних пристроях за допомогою віртуальної машини у хмарі;
• Microsoft Virtual Machines - якщо ви працюєте в Linux, у вас не буде доступу до Internet Explorer. Рішення може полягати в тому, щоб завантажити образи віртуальних машин для IE6 в IE11 які потім можуть використовуватися в поєднанні з Oracle VM Virtualbox або Vagrant для локального тестування;
• Різні роздільні здатності екрану для конкретного браузера можна швидко протестувати за допомогою онлайн-сервісу Screenfly. За допомогою плагінів для браузерів, таких як Window Resizer для Google Chrome, або безпосередньо в розділі інструментів для розробників Chrome та Firefox.

5. Normalize.css та CSS Autoprefixer

Зазвичай я починаю нові проекти зі скидання CSS за допомогою Normalize.css, який забезпечує кращу кросбраузерність при визначенні стилів HTML-елементів, які використовуються за замовчуванням, аж до Internet Explorer 8 . Normalize.css зберігає потрібні стилі елементів, нормалізує їхній зовнішній вигляд і виправляє ряд помилок та невідповідностей у різних браузерах.

Крім цього багато застарілих браузерів не можуть інтерпретувати невідомі елементи HTML і властивості CSS. Коли браузер зустрічає фрагмент HTML або CSS, який він не розуміє, ігнорує його і продовжує процес відображення. Багато програм використовують вендорні префікси, щоб додати нові, експериментальні або нестандартні функції CSS до їх реалізації у специфікації:

// Webkit-браузери, такі як Chrome та Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-

Проблема полягає в тому, що префікси незручні у використанні та з ними пов'язано багато помилок. Тому я використовую плагін CSS Autoprefixer у поєднанні з Grunt.

Звичайні правила CSS будуть оброблені за допомогою плагіна і до них будуть додані префікси на основі бази даних Can I Use. Рекомендується встановити конфігурацію версії браузерів, які потрібно підтримувати, наприклад:

options: ( browsers: ["last 2 versions", "ie >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"] )

Як приклад розглянемо наступний клас CSS:

Example ( background-image: linear-gradient(top left, #4676dd, #00345b); display: flex; transition: 1s all; )

За допомогою CSS Autoprefixer він перетворюється на:

Example ( background-image: -webkit-linear-gradient(top left, #4676dd, #00345b); background-image: -moz-linear-gradient(top left, #4676dd, #00345b); background-image: linear- gradient(top left, #4676dd, #00345b); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; all;-moz-transition: 1s all; transition: 1s all;

6. Умовні коментарі

Якщо потрібно створити резервний CSS або увімкнути кросбраузерність JavaScript для ранніх версій Internet Explorer, то можете використовувати умовні коментарі. Вони підтримуються в Internet Explorer 5-9 , використовують синтаксис коментарів HTML у поєднанні з логічними значеннями. Залежно від логічного значення (true або false ) код усередині тегів коментарів виводитиметься або ховатиметься у відповідних версіях браузера:

КІД, ЯКИЙ ВИКОНАВАТИМЕТЬСЯ // якщо Internet Explorer // якщо НЕ Internet Explorer // якщо Internet Explorer 7 // якщо НЕ Internet Explorer 7 // якщо Internet Explorer 9 або НИЖЧЕ // якщо Internet Explorer 7 або ВИЩЕ // якщо Internet Explorer 6 АБО 7 // якщо Вище Internet Explorer 6 АЛЕ НИЖЧЕ 9

Код автоматично ховається у всіх браузерах, які не підтримують умовних коментарів. Наочним прикладом того, як умовні коментарі можуть бути ефективно використані на практиці, є HTML5 Boilerplate, який додає специфічні класи CSS для застарілих версій Internet Explorer:

7. Поліфіли

Технічні невідповідності застарілих браузерів для адаптивного веб-дизайну можна виправити за допомогою поліфілу. Він є фрагментом JavaScript коду, який «заповнює» специфічний функціональний розрив між застарілим браузером і функцією. Існує ціла низка поліфілів, які можуть бути використані для забезпечення підтримки браузером функцій HTML5.

Нижче наведено кілька поліфілів, призначених для усунення проблем кросбраузерності сайту, зазначених у пункті 3:

• respond.js - реалізує медіа-запити CSS3 для Internet Explorer 6 - 8;
• html5shiv дозволяє використання семантичних елементів HTML5 в Internet Explorer 6 - 8;
• selectivzr - емулює селектори та псевдокласи CSS3 в Internet Explorer 6 - 8. Для повної підтримки потрібно або Mootools 1.3 або NWMatcher 1.2.3 . Часткова підтримка доступна за допомогою JQuery 1.3/1.4;
• REM-unit-polyfill визначає, чи підтримує браузер одиниці rem, і забезпечує запасний варіант. Працює з IE8 та нижче.

Для використання зазначених поліфілів їх потрібно додати з CDN або у вигляді файлу в коректному форматі всередині умовних коментарів у розділі (не забудьте включити одну з необхідних для Selectivizr бібліотек JavaScript ):

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

8. Визначення функцій за допомогою Modernizr

Бібліотека Modernizr, написана на JavaScript, допоможе перевірити кросбраузерність сайту: чи підтримується в різних браузерах конкретна функція HTML5 або CSS3. Якщо функція не доступна, може бути завантажено альтернативний CSS або JavaScript-код.

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

Варто зазначити, що Modernizr не додає відсутні функції в браузер. Тому вам потрібно буде надати код із резервного CSS або поліфілу.

Для початку необхідно завантажити повнофункціональне складання. Пізніше, коли ви будете готові до розробки, можна створити власну збірку зі специфічними функціями, які ви тестуєте. Все, що потрібно зробити, це додати клас.

Modernizr Demo Modernizr Demo

Це є Modernizr exercise.

Клас .no-js використовується, щоб перевірити, чи увімкнено JavaScript у браузері користувача. Якщо він увімкнений, Modernizr замінить .no-js класом .js . Функція тестування Modernizr аналізує, чи підтримується у браузері конкретна функція та генерує ряд класів, які додаються до HTML-елементу. Google Chrome 47.0.2526.111 , наприклад, повертатиме наступні класи об'єктів.

В даний час Modernizr доступний як глобальний об'єкт, який можна викликати в поєднанні з назвою функції, щоб перевірити, чи існує вона. Він повертає логічне значення (true чи false).

Розглянемо два простих приклади CSS та JavaScript.

Приклад вирішення проблем CSS кроссбраузерності: перевірка підтримки SVG та надання як резервний варіант PNG

В даний час спостерігається тенденція до дедалі активнішого використання SVG (Scalable Vector Graphics), але ця графіка не підтримується в IE8 і нижче. Якщо SVG підтримується у браузері, Modernizr генерує CSS-клас.svg. Якщо SVG недоступний, інструмент додає HTML клас.no-svg . За допомогою наведеного нижче CSS браузери з підтримкою SVG будуть використовувати звичайний клас .logo , тоді як браузери, які не підтримують SVG - правила .no-svg :

Logo ( background-image: url("logo.svg"); width: 164px; height: 49px; ) .no-svg .logo ( background-image: url("/logo.png"); width: 164px; height : 49px; )

Приклад JavaScript: визначення border-radius та додавання відповідних класів CSS

Округлення кутів рамки не підтримується IE8 і нижче. Ми можемо створювати різні CSS-класи, які застосовуються залежно від наявності функції border-radius:

// Клас для браузера з функцією border-radius .round-borders ( border-radius: 5px; ) // Клас для браузера без функції border-radius .black-borders ( border: 3px solid #000000; )

Тепер можна використовувати JavaScript , щоб зберегти цільовий ідентифікатор як змінну, а потім за умови додати класи CSS :

var element = document.getElementById("TestID"); if (Modernizr.borderradius) ( element.className = "round-borders"; ) else ( element.className = "black-borders"; )

Висновок

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