- HTML5 Shiv
- Визначення функцій браузера
- Завантаження Modernizr
- Застосування умовних стилів
- Демонстрація визначення функцій
- Умовна завантаження файлів
- Умовна завантаження на основі медіа-запитів
- Умовний запуск скриптів
- Демонстрація умовного запуску скриптів
- Поліфілії для HTML5 та CSS3
- кросбраузерності тестування
- Ресурси і посилання
Створення сайту може бути надзвичайно корисним і одночасно розчаровує. Основні розлади виникають від спроб отримати сайт, який однаково виглядає і працює в будь-якому браузері. Все фронтенд-розробники засмучуються з цього приводу в той чи інший момент.
По правді кажучи, веб-сайти не повинні виглядати або працювати однаково в будь-якому браузері. Наскільки точно веб-сайт працює в кожному браузері - тим визначається і ваш рівень комфорту для даного сайту. Якщо сайт отримує менше піввідсотка трафіку від Internet Explorer 6, то може мати сенс відмовитися від його підтримки. Якщо піввідсотка як і раніше сприяє тисячам доларів в продажах, підтримка повинна бути обов'язковою. Визначте, що є прийнятним для даного сайту і відштовхуйтеся від цього.
Є кілька загальних методів, як отримати сайти, що працюють належним чином у всіх браузерах, деякі з яких вже були описані в цьому посібнику. При включенні властивостей CSS3 рекомендується використовувати запасний варіант для підтримки старих браузерів. Інші методи включають HTML5 Shiv і поліфілії. Взагалі кажучи, це невеликі плагіни JavaScript, які додають підтримку для запитаного набору функцій, з самого початку не підтримуваних конкретним браузером.
HTML5 Shiv
HTML5 Shiv був створений Ремі Шарпом , Щоб забезпечити можливість використовувати елементи HTML5 в версіях Internet Explorer 8 і нижче. HTML5 Shiv не тільки створює підтримку елементів HTML5, а й дозволяє оформляти їх належним чином за допомогою CSS.
HTML5 Shiv повинен бути завантажений з Google, де Ремі підтримує останню версію, а потім розміщений на вашому сервері. Для кращої продуктивності посилайтеся на JavaScript-файл всередині <head> документа, після будь-яких посилань на таблиці стилів. Крім того, вам треба посилатися на файл всередині умовного коментаря , Переконавшись в тому, що файл завантажується тільки в версіях Internet Explorer 8 і нижче.
В цьому випадку умовний коментар виглядає як <! - [if lt IE 9]> ... <! [Endif] ->.
<! - [if lt IE 9]> <script src = "html5shiv.js"> </ script> <! [Endif] ->
Крім того, коли нові елементи HTML5 створюються за допомогою HTML5 Shiv, будь-які блокові елементи повинні бути визначені і оновлені за допомогою декларації display: block.
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display: block; }
І, нарешті, Internet Explorer 8 і 9 неправильно визначають стилі для деяких рядково-блокових елементів HTML5. Як і раніше, ці стилі повинні бути вказані явно. Після чого всі версії Internet Explorer повинні добре працювати з будь-якими новими елементами HTML5.
audio, canvas, video {display: inline-block; }
Визначення функцій браузера
Посилання на HTML5 Shiv добре працює з умовним коментарем, тому що намір полягає в тому, щоб орієнтуватися на конкретні браузери, які не підтримують нові можливості і елементи HTML5. Крім цього існує спосіб забезпечити підтримку певних функцій HTML5 та CSS3, незалежно від того, який браузер використовується.
Визначення функцій, пропоноване Modernizr , Забезпечує спосіб написання CSS і JavaScript на основі того, підтримує браузер чи ні конкретну функцію. Наприклад, якщо браузер підтримує округлені куточки, Modernizr додасть клас borderradius до елементу <html>. Якщо браузер не підтримує округлені куточки, Modernizr додасть до <html> клас no-borderradius.
Завантаження Modernizr
Щоб отримати визначення функцій з Modernizr і запустити їх в роботу, просто відвідайте сторінку завантаження і налаштуйте, які функції ви хочете визначати або використовуйте версію для розробників. Найчастіше версія для розробників підходить найкраще, однак якщо ви розглядаєте підтримку єдиної функції, призначена для користувача збірка буде більш підходящою. Після скачування завантажте файл JavaScript на сервер і посилайтеся на нього всередині <head> вашого HTML-документа, нижче всіх таблиць стилів.
Варто відзначити, що Modernizr може бути налаштований так, щоб включати HTML5 Shiv, в цьому випадку на нього не потрібно посилатися після Modernizr.
<Script src = "modernizr.js"> </ script>
Застосування умовних стилів
Після того, як Modernizr встановлений і працює, можуть застосовуватися стилі CSS на основі того, чи підтримує браузер цю функцію. Modernizr визначає більшість властивостей і значень CSS3, їх все можна знайти в документації Modernizr.
Якщо вам потрібно визначення функцій для деяких стилів, візьміть до уваги один момент. Наприклад, для значення кольору RGBa можна легко включити запасний варіант з шістнадцятковим значенням без використання визначення функцій. Коли приймається рішення про використання визначення функцій, важливо зберегти стилі організованими і пам'ятати про продуктивність. Уникайте при можливості дублювання будь-якого коду або створення додаткових HTTP-запитів.
button {border: 0; color: #fff; cursor: pointer; font-size: 14px; font-weight: 600; margin: 0; outline: 0; } / * З градиентами * / .cssgradients button {border: 1px solid # 0080c2; background: linear-gradient (# 00a2f5, # 0087cc); border-radius: 6px; padding: 15px 30px; } .Cssgradients button: hover {background: linear-gradient (# 1ab1ff, # 009beb); } .Cssgradients button: active {box-shadow: inset 0 1px 10px rgba (255, 255, 255, .5); } / * Без градієнтів * / .no-cssgradients button {background: transparent url ( "button.png") 0 0 no-repeat; padding: 16px 31px; } .No-cssgradients button: hover {background-position: 0 -49px; } .No-cssgradients button: active {background-position: 0 -98px; }
Демонстрація визначення функцій
У наведеній вище демонстрації кнопка успадковує деякі стилі за замовчуванням. Тим не менш, деякі стилі застосовуються тільки в залежності від того, підтримується чи ні градієнтний фон CSS3. У цьому випадку також включені округлені куточки і тінь блоку в умовні стилі. Браузери, які підтримують градієнти, отримають градієнт, округлені куточки і тінь під блоком. Браузери, які не підтримують градієнти, отримають зображення з усіма цими стилями. За допомогою цього коду жоден з стиль не буде переписаний і HTTP-запит відбувається тільки при необхідності.
При роботі з визначенням функцій CSS3, складно сказати, як стилі будуть виглядати в браузерах, які не підтримують можливості CSS3. На щастя, є букмарклет з назвою deCSS3 , Який відключає будь-які можливості CSS3. Це дозволяє побачити, як веб-сайт буде виглядати без CSS3 і як ваші умовні стилі працюють. Щоб швидко отримати уявлення про те, що кожен браузер підтримує, відвідайте haz.io через ваш браузер.
Умовна завантаження файлів
До того ж до умовної завантаженні стилів, Modernizr також надає можливість умовної завантаження файлів, грунтуючись на підтримку функцій. При цьому можуть бути завантажені поліфілії на JavaScript на основі визначення функцій. Modenizer за допомогою yepnope.js може бути налаштований для включення завантажувача ресурсів Modernizr.load.
Завантажувач ресурсів Modernizr.load протестований для більшості можливостей HTML5 та CSS3, які можуть бути визначені в умови test. Якщо умова проходить, завантажуються будь-які файли, зазначені в блоці yep. Якщо умова не пройдено, завантажуються будь-які файли, зазначені в блоці nope. Обидва блоки yep і nope є необов'язковими, але, щонайменше, один з них повинен бути вказаний. Створення цих варіантів дозволяє вам завантажувати файли тільки на основі того, увімкнене конкретна умова.
Однією дивовижною особливістю завантажувача ресурсів Modernizr.load є те, що він може завантажувати зовнішні файли, причому не тільки JavaScript, але і CSS.
Modernizr.load ({test: Modernizr.localstorage, yep: 'storage.js', nope: 'storage-polyfill.js'});
Кілька файлів можуть бути ефективно завантажені з допомогою кількох умов за рахунок застосування операторів && і ||. Оператор && відповідає логічному І, в той час як оператор || відповідає логічному АБО. У наступному прикладі використовуються кілька умов для завантаження різних файлів, при цьому завантажуючи тільки необхідні файли за один раз. Якщо підтримка атрибуту autofocus або CSS-анімації недоступна, тоді завантажується бібліотека jQuery. Якщо доступна підтримка для кожної окремої функції, то завантажуються окремі поліфілії.
Modernizr.load ([{test: Modernizr.input.autofocus || Modernizr.cssanimations, nope: 'jquery.js'}, {test: Modernizr.input.autofocus, nope: 'autofocus.js'}, {test: Modernizr .cssanimations, nope: 'animations.js'}]);
Кріс Койєр написав керівництво по прогресивному поліпшенню форм за допомогою Modernizr і поліфілії, в якому вигідно використовує кілька різних операторів для отримання професійного коду.
Умовна завантаження на основі медіа-запитів
Одним цікавим умовою, яке Modernizr можете перевірити, є медіа-запити. Це дає можливість завантажувати тільки файли, засновані на різних умовах медіа-запитів. Відмова від завантаження непотрібних файлів може бути надзвичайно корисний для підвищення продуктивності.
Modernizr.load ({test: Modernizr.mq ( 'screen and (min-width: 640px)'), nope: [ 'jquery.js', 'tabs.js']});
Вище Modernizr визначає екрани, ширина яких більше 640 пікселів, в першу чергу десктопи, а потім завантажує файли і функції, засновані на цю умову. Важливо відзначити, що ця умова перевіряється тільки один раз, під час завантаження сторінки, і все. Якщо користувач змінить розмір сторінки, ця умова не буде перевірятися повторно. Якщо необхідно перевірити цю умову повторно, то потрібно буде включити додатковий JavaScript.
Умовний запуск скриптів
До того ж до умовної завантаженні файлів, Modernizr також допомагає умовно запустити JavaScript. Всі можливості HTML5 та CSS3, доступні для перевірки в засобі завантаження ресурсів Modernizr.load, також можуть бути перевірені в скриптах. Наприклад, це може бути відключається підказка на мобільних пристроях, тому що там немає можливості навести курсор миші, замість того щоб показувати підказку на екрані у вигляді тексту. Скрипт для виклику цих спливаючих підказок може розташовуватися в умови Modernizr, забороняючи завантаження скрипта на маленьких екранах.
$ (Document) .ready (function () {if (Modernizr.mq ( 'screen and (max-width: 800px)')) {$ ( '. Size'). Text ( 'маленький');}});
Демонстрація умовного запуску скриптів
Вище наведено базовий приклад того, як JavaScript може бути запущений на основі умови, заданого в Modernizr. При завантаженні сторінки, якщо ширина екрана менше 800 пікселів, то нічого не відбувається. Але якщо ширина екрана більше 800 пікселів, при завантаженні слово «маленький» буде замінено на «великий», грунтуючись на виконаному JavaScript.
Поліфілії для HTML5 та CSS3
В даний час існують поліфілії майже для всіх різних функцій HTML5 та CSS3. Команда Modernizr зібрала досить вичерпний список . Ці поліфілії можуть бути викинуті в разі потреби.
Ті ж люди, які стоять за Modernizr, також склали список всіх нових функцій HTML5 та CSS3, включаючи інструкції про те, як використовувати їх відповідним чином. Зрозумійте, не для всіх цих функцій потрібні поліфілії. Деякі з них можуть бути використані безпосередньо або за допомогою запасного варіанту.
кросбраузерності тестування
Мабуть, найстрашнішою частиною веб-дизайну і розробки є кросбраузерності тестування, яке дозволяє переконатися, що сайт добре працює у всіх браузерах. Взагалі кажучи, більш сучасні браузери, Chrome, Firefox і Safari, все роблять дуже добре. Найбільші підводні камені чекають в Internet Explorer і тестування різних версій Internet Explorer може бути складним.
є кілька сервісів, які допомагають з кросбраузерності тестуванням, деякі інтерактивні, інші ні. Ті, які дозволяють взаємодіяти з браузером замість відображення скриншота, набагато корисніші для налагодження коду. Одним з найкращих способів завантаження декількох версій Internet Explorer є використання декількох віртуальних машин, кожна з яких містить свою версію Internet Explorer.
Мал. 9.01. VirtualBox працює на Mac OS X з Internet Explorer з 6 по 9 версії
Microsoft пропонує кілька VirtualPC, які можуть бути використані виключно для тестування. Установка їх усіх може виявитися складним завданням. На щастя, Грег Торнтон написав програму автоматичної установки для всіх цих віртуальних машин. Установка займає деякий час, щоб завантажити всі ці різні віртуальні машини і вимагає пристойну кількість дискового простору. Підготуйтеся відповідно, встановивши тільки необхідні віртуальні машини і заздалегідь очистивши необхідне дисковий простір. Залежно від того, наскільки часто використовуються віртуальні машини, може бути варто встановити їх на зовнішньому жорсткому диску.
Internet Explorer 8 і вище містить вбудовані засоби розробки, на жаль у версій 7 і нижче такого немає. Веб-інспектор і всі інші інструменти налагодження, які ми любимо, недоступні в Internet Explorer 7 і нижче. Існує, однак, букмарклет Firebug Lite , Який пропонує надзвичайно корисний інспектор в браузері.
Мал. 9.02. Internet Explorer 7 працює всередині віртуальної машини з Букмарклет Firebug Lite, відкритим для налагодження
Ресурси і посилання
Автор і редактори
Автор: Шей Хоу
Остання зміна: 11.08.2018
Редактори: Влад Мержевіч