Кросбраузерна верстка css. Кросбраузерна сумісність: адаптивний веб-дизайн для старих браузерів. Проблеми в застарілих браузерах та різні підходи до розробки
Мені, як верстальнику, доводиться щодня стикатися з різними CSS3 властивостями, які, хочеться мені чи ні, доводиться використовувати так, щоб вони коректно відображалися у всіх сучасних та несучасних браузерах. Зрозуміло, у мене зібралася якась бібліотека, яку я використовую при верстці різних проектів. Збирав я свою колекцію, з різних ресурсів та форумів, на безмежних просторах мережі Інтернет, тож не дивно, якщо хтось уже стикався з чимось окремо.
Можливо досвідченим представникам нашої професії цей пост буде не цікавий, але молодшим і недосвідченим він може стати в нагоді. Від старших товаришів, у свою чергу, хотілося б отримати коментарі, з недоліків, які, можливо, тут є, і важливим моментам, які, навпаки, можуть бути відсутніми.
Для коректної роботи CSS3 у всіх браузерах доводиться використовувати деякі зовнішні бібліотеки.
Власне, після всіх приготувань можна переходити безпосередньо до властивостей CSS3, над якими ми будемо знущатися.
Закруглені краї або border-radius
.border-radius ( border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); ) Властивість background-clip: padding-box; виключає можливість того, що картинка на задньому фоні залізатиме на наші закруглені області.
Рядок behavior: url(PIE.htc); підключає наш PIE файл, для підтримки цієї властивості IE.
Тінь блоку або box-shadow
.box-shadow( box-shadow: 3px 3px 4px #444; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); behavior: url(PIE.htc); ) Властивості filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); використовуються для IE.
Градієнт на фоні або background: linear-gradient()
.multiple-background( background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; -pie-background: url(back1.png) 0 0 no-repeat, url( back2.png) 0 0 no-repeat; behavior: url(PIE.htc); Сучасні браузери начебто всі розуміють, а для IE знову використовуємо PIE.
Зображення замість обведення або border-image: url();
.border-image( -webkit-border-image: url("image.png") 30 round round; border-image: url("image.png") 30 round round; behavior: url(PIE.htc); ) Тут властивість behavior не працюватиме в IE10.
Тінь тексту або text-shadow
На цьому принади PIE закінчуються. Для використання тіні тексту в IE необхідно використовувати вищезгадану бібліотеку jQuery.textshadow.
Для використання, необхідно, для початку, в стилях вказати нашу тінь, для звичайних браузерів .text-shadow( text-shadow: 1px 1px 3px #000; )
А потім, за допомогою бібліотеки, просимо незвичайні браузери IE нас зрозуміти
попередньо, не забуваючи, підключити цю бібліотеку та все, що необхідно, для її роботи.
Алгоритм розрахунку ширини та висоти елемента (так, саме такий переклад) або box-sizing
.box-sizing( -moz-box-sizing: border-box; box-sizing: border-box; ) На жаль дана властивістьне працюватиме в браузерах IE7 і молодше. на Наразія не знайшов коректного вирішення цього питання, але це зовсім не означає, що його не існує.
Ставимо блоки в лінію або display: inline-block
Прекрасна сучасна властивість, яка дозволяє ставити блоки в один ряд, не використовуючи властивості floatі так далі. На мій жаль, на практиці, зіткнувся з тим, що багато хто використовує його в чисту. Тобто так .inline-block( display: inline-block; ) Код у такому виконанні підтримується лише останніми сучасними браузерами. Для повної підтримки, до нього необхідно додати трохи рядків. Повний код такий: .inline-block( min-height: 250px; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 250px; ) Тут display: -moz-inline-stack; використовується для розуміння inline-block старої Mozilla. Властивість vertical-align: top; вирівнює всі блоки вертикалі по верху. Залежно від завдання можна й унизу. І нарешті властивості zoom: 1; *display: inline; _height: 250px; використовуються для IE. Зверніть увагу, що в даному випадку _height: 250 використовується тому, що IE не знає властивості min-height .
Прозорість чи opacity
.opacity( opacity: 0.5; filter: alpha(opacity=50); ) Звертаємо увагу на те, що у фільтрах, що використовуються для IE, значення прозорості вказується в діапазоні від 0 до 100, а не від 0 до 1 як завжди.
Анімація або transition
.transition ( -webkit-transition: all 1s ease; transition: all 1s ease; )
Трансформація об'єктів або transform
.transform( -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); ) Властивості transition і transform не підтримуються браузерам IE нижче 9 версії, а transition і лише з 10 версії. Рішення для старих IE я поки що теж не знайшов.
Йдеться про таких селекторів як ul li:fist-child() ul li:last-child() ul li:nth-child(3)() input() a:hover() І інші корисні селектори: які були додані в CSS3. Для того, щоб забезпечити якісну підтримку таких селекторів, ми використовуємо вищезазначену бібліотеку Selectivizr. Щоб вона спрацювала, необхідно просто підключити її перед файлом CSS. Повний список селекторів з якими працює Selectivizr, можна ознайомитись на офіційній сторінці у розділі «How does it work?».
Насамкінець, хочеться відзначити, що я не розглядав всі властивості на кросбраузерність, а лише ті, що найчастіше використовуються у повсякденній практиці. Сподіваюся цей пост може бути Вам, хоч чимось корисним!
Оновив властивості border-raduius та opacity. Дякую pepelsbey за суворе зауваження!
Оновив більшість властивостей відповідно до рекомендацій. Дякуємо величезному користувачеві Aingis за величезну допомогу!
// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // Виводжу свій розмір мініатюри?>
Щоб сторінка однаково добре відображалась у різних браузерах, необхідно працювати над її кросбраузерністю. У цьому нам допомагає тестування сторінки та налагодження html/css розмітки. Але є інструменти, які допоможуть скоротити наведення ладу в стилях, і домогтися того, щоб базові стилі були однакові в різних браузерах. Що це за інструменти, навіщо та як їх використовувати – розглянемо далі.
Браузери та базові стилі
Справа в тому, що кожен браузер має за замовчуванням якийсь набір базових стилів, які він застосовує до сторінки за замовчуванням. І якщо ми створимо сторінку на «голому» html без оформлення та стилів, браузер все одно відобразить тег
великим розміром і жирним зображенням, трохи меншим розміром і таке інше. Браузер виділить текст у тезі курсивом, зробить підкресленим, а - Жирним.
Відбудеться так тому що в браузері вже є свої стилі для елементів, які за замовчуванням застосовуються до сторінок, що відкриваються в ньому. І справа в тому, що в різних браузерах ці правила трохи відрізняються, від браузера до браузера. Років 10 тому ці відмінності були просто кардинальними, і дуже впадали у вічі. Зараз вони мінімальні, але все ж таки є.
Щоб прибрати ці відмінності, і зробити за промовчанням відображення сторінки у всіх браузерах однаковим - використовують спеціальний файл .css: reset.css або normalize.css
reset.css - що він робить і як його використовувати
Перший з'явився файл reset.css. Цей css файл містить у собі перелік всіх можливих html тегів і скидає їх значення на нуль. Тобто прибирає всі можливі відступи, робить шрифт однаковим у всіх тегах, скидаючи всі стилі тексту. Так що всі заголовки та абзаци відображаються простим текстом, одним розміром та без відступів. В результаті отримуємо скидання стилів за промовчанням у всіх браузерах.
Працює це так, спочатку на сторінці підключаємо файл reset.css і вже після нього свій файл зі стилями. У результаті ми спочатку скидаємо всі стилі, і вже потім у style.css задаємо оформлення html тегам. Таким чином ми досягаємо того, що всі браузери скинуть свої стилі за замовчуванням, і вся розмітка буде базуватися на тих стилях, які ми поставимо в style.css.
Завантажити reset.css
Завантажити reset.css можна на сайті cssreset.com
Або можете завантажити версію Eric Meyer's “Reset CSS” 2.0 за кнопкою нижче, з мого блогу:
normalize.css - як він працює і в чому різниця
Після того як на сторінці підключено reset.css, всі стилі доводиться прописувати заново. І щоразу це заняття втомлює. Тому зміну resetприйшов інший інструмент — normalize. Normailze - як відомо з назви, не скидає всі стилі, а нормалізує, приводить їх до єдиного вигляду у всіх браузерах. Після його застосування базові стилі відображення заголовків, розмір шрифтів, відступи… — уніфікуються та відображаються у всіх браузерах однаково. Використовуючи його - можна заощадити певну кількість часу, яке у випадку з reset було б витрачено на прописування скинутих стилів.
Якщо ви ще не використовували normalize.css, то рекомендую спробувати його в своєму наступному, прокті, і хто знає, можливо ви вже не зможете від нього відмовитися 😉
Завантажити normalize.css
Завантажити normalize.css можна з сайту necolas.github.io/normalize.css
Або завантажити з мого блогу:
Що краще reset чи normalize?
Однозначної відповіді немає.
Перший скидає всі стилі, другий призводить до єдиного знаменника. Досвідчені верстальники, які використовують reset.css, зазвичай мають свої набори стилів, які відразу ж підключають після reset для оформлення контенту. І їм не доводиться щоразу у новій верстці наново визначати стилі для базових елементів. Так роблю і я. Мені зручно і я знаю, які стилі я задаю за замовчуванням, і як вони працюють.
normalize зручний якщо ви вивчите його структуру, можете видозмінити його під себе - налаштувавши базовий зовнішній виглядтегів. І робота з ним також буде зручною на потоці - коли верстати доводиться багато і часто.
Кожен інструмент хороший, головне правильно використовувати 😉
Всі користувачі Інтернету для перегляду сторінок Інтернет сайтів використовують спеціальні програми- Браузери. Браузер це програма, яка здійснює зв'язок користувача із сервером. Браузер посилає запити до сервера і отримує відповіді від нього, і ця відповідь перетворює на той вигляд, який всі звикли називати інтернет сторінкою з усім її вмістом, текстом, зображеннями, відео тощо. Готовий вид сторінки (розташування контенту, розміри, колір, шрифт та ін.) задається за допомогою HTML версткита каскадних таблиць стилів (CSS), які були перетворені із зображення намальованим дизайнером, у вигляд зрозумілий браузеру. Це і називається версткою. Простими словами HTML верстка це розташування елементів інтернет-сторінки, там, де вони повинні розташовуватися за задумом дизайнера, який створював макет майбутньої сторінки.
Але кожен користувач віддає перевагу більш звичному для себе браузеру. У наш час існує 5 найпопулярніших браузерів, про які свідчить статистика. Це Chrome, Safari, Opera, FireFox та Internet Explorer(IE). Ці браузери тієї чи іншої версії найчастіше використовують користувачі Інтернету, для перегляду «світової павутини». Кожен з цих браузерів має свою функціональність і особливості відображення інтернет сторінок.
У великому розмаїтті всіх браузерів та їх версій, та їх особливостях відображення інтернет-сторінок, з'явилося поняття коссбраузерність HTML верстки. Так що ж таке кросбраузерність?!
Кросбраузерність– це властивість інтернет сторінок відображатись у різних версіях браузерів однаково, без спотворень та «розповзання» елементів сторінки, незалежно від особливостей самого браузера.
Самим великою кількістюцих особливостей мають браузери Internet Explorer від Microsoft, за що їх і «не люблять» більшість HTML верстальників, і вигадують для нього різні способиприведення до правильного відображення сторінки (дані способи верстальники називають «милицями»). Особисто наша думка, що згорнути HTML сторінку кросбраузерної можна без застосування цих самих «милиць», які засмічують HTML код сторінки.
Умовні коментарі для Internet Explorer
Условный комментарий для всех версий IE
Условный комментарий для IE 7
Условный комментарий для IE 6
Условный комментарий для IE 5
Условный комментарий для IE 5.5
Условный комментарий для IE младше 6 версии
Условный комментарий для IE младше 7 версии
Условный комментарий для IE младше 8 версии
Условный комментарий для IE младше 9 версии
Условный комментарий для IE старше 6 версии
Условный комментарий для IE старше 7 версии
Условный комментарий для IE старше 8 версии
Основні правила кроссбраузерної верстки:
Не секрет, що кожен браузер має свої стилі оформлення тих чи інших елементів HTML коду, розмір шрифту, розмір відступів і т.д. що вже призведе до розповзання елементів сторінки, і вона не буде кросбраузерною. Звідси можна дійти невтішного висновку, що це власні стилі різних браузерівпотрібно «вимкнути», точніше скинути на однакові. Деякі HTML верстальники роблять це безпосередньо при заданні CSS стилів до окремим елементамми ж використовуємо іншу практику. Ми скидаємо всі CSS стилі браузерів на початку CSS документа. Для цього ми використовуємо допрацьований набір стилів CSS, запропонований meyerweb.com
Цей код, доданий до стилю CSS, скидає всі власні стилі браузерів на однаковий. Це дозволить зробити верстку HTML сторінкиідентичною у всіх браузерах, незалежно від своїх власних стилів.
Валідність HTML документа
Друге правило кросбраузерної HTML верстки це дотримання стандартів HTML та XHTML, затверджених W3C консорціумом. Кожен HTML документ (саме документ) має свій стандарт, і свої особливості написання.
Види стандартів HTML документів та їх відмінності ми розглянемо пізніше, оскільки ця тема потребує окремого розгляду та опису.
ВалідністьHTML документаце відповідність затвердженим стандартам та нормам W3C консорціуму.
За стандартами W3C, кожен тег HTML документа повинен мати свою пару. Називаються ці пари, що відкриваються та закриваються тегами, але є винятки з цього правила – це теги , і т.д., ці теги не мають пари, що закривається.
Чи не закритий парний тег, кожен браузер може зрозуміти по своєму, і відобразить вміст, укладений в ці теги не так як треба верстальнику.
Перевірити валідність HTML документа можна на сайті W3C консорціуму.
Приклад валідного коду:
Валідний код
Валідний код HTML
Цей HTML код відповідає стандартам XHTML 1.0 Strict і є валідним І містить у собі як парні (закриваються) теги, так і не парний тег
Приклад не валідного коду:
Не <a href="https://remzhuk.ru/uk/zachem-nuzhen-validnyi-kod-i-kak-ustranit-oshibki-validacii/">валідний код</a>
<body>
<h1>Не валідний код HTML <p></h1>Цей HTML код не відповідає стандартам W3C і не є валідним <br />
</p>
</body>
</html>
<h2>Перевіряємо кросбраузерність.</h2> <p>Існує багато способів перевірити кросбраузерність верстаємого HTML документа, найпростіший з них - це поставити всі популярні браузери собі на комп'ютер. Але як бути з <a href="https://remzhuk.ru/uk/klyuchi-aktivacii-driver-booster-4-4-svezhie-serii-driver-booster-klyuch-licenzionnyi-srack-dlya/">різними версіями</a> Internet Explorer?! — спитають багато хто.</p> <p>Є простий спосіб зібрати всі версії IE в одному флаконі. Ви можете завантажити програму IE Tester, яка включає всі версії IE, починаючи з IE 5.5.</p> <p>Також Ви можете скористатися сервісом Browsershots.org, який дозволяє зробити знімки Вашого HTML документа з більш ніж 40 різних браузерів.</p>
<p>Кросбраузерність</span>— це здатність сайту коректно відображатись у різних браузерах. Ресурс має працювати однаково у всіх версіях оглядачів.</p>
<p>Особливо це важливо в епоху адаптивного веб-дизайну, коли на перший план виходить здатність front-end адаптуватися до широкого діапазону <a href="https://remzhuk.ru/uk/lenovo-tab-2-a7-30-opisanie-bluetooth---eto-standart-bezopasnogo/">різних пристроїв</a>і при цьому забезпечувати оптимальну якість перегляду.</p>
<p>Раніше дизайнер створював макет дизайну у Photoshop, який потім переносився до HTML та CSS. Сьогодні технологічні зміни змушують переосмислити цю концепцію. Ми більше не можемо передбачити, який браузер, роздільна здатність або пристрій буде використовуватися для перегляду сайту. Пішли в минулі часи, коли більшість комп'ютерів використовувала фіксований дозвіл 1024 на 768 пікселів, і можна було розробляти сайти зі статичними розмірами.</p>
<p>Сучасні браузери повністю підтримують HTML5 та CSS3. Але той самий код HTML / CSS / JavaScript у старих браузерах інтерпретується по-різному, що призводить до « <span>кросбраузерної несумісності</span>» сайту. Особливо це стосується старих <a href="https://remzhuk.ru/uk/microsoft-prekratit-podderzhku-vseh-versii-brauzera-internet-explorer-krome/">версій Internet</a> Explorer.</p>
<p>У цій статті ми розглянемо поточну статистику переглядів веб-сторінок, наведемо перелік коштів, які допомагають вирішувати різні проблеми сумісності.</p>
<h3>1. Поточна ситуація</h3>
<p>Загальносвітова статистика за 2015 рік показує, що топ-14 дозволів екрану, що використовуються, знаходяться в діапазоні від 1920 на 1080 до 320 на 480 пікселів.</p>
<p>Хоча Windows 7 (31,20%) досі утримує більшу частку ринку, мобільні платформи починають замінювати традиційні, стаціонарні.</p>
<p>Поглянувши на статистику за 2015 рік за браузерами, що використовуються, ми бачимо, що перше місце належить Chrome ( <span>усі версії - 44,87%</span>), друге місце - Firefox ( <span>усі версії - 10,37%</span>), третє Internet Explorer 11 (6,84%).</p>
<p>Прискорені темпи випуску нових версій <a href="https://remzhuk.ru/uk/kak-udalit-navyazchivuyu-stranicu-v-brauzere-kak-v-gugl-hrom/">Google Chrome</a>та Firefox дозволяють більш ефективно розробляти проекти для цих платформ. Дещо інша картина складається для «поганого хлопця» Internet Explorer, тому що в Мережі досі можна знайти його старі версії. А це призводить до виникнення проблем із кросбраузерністю сайту.</p>
<p>Корпорація Microsoft зупинила підтримку IE6 8 квітня 2014 року. І з 2016 року буде підтримуватися і отримувати оновлення тільки остання версія Internet Explorer. Це фактично означає, що на початку 2016 року була повністю припинена підтримка IE7 та IE8 незалежно від <a href="https://remzhuk.ru/uk/kak-pk-ustanovit-dve-sistemy-redaktirovanie-zagruzki-neskolkih-operacionnyh-sistem-windows/">операційної системи</a>. IE9 буде підтримуватися тільки в <a href="https://remzhuk.ru/uk/kak-udalit-sledy-avast-pravilnoe-udalenie-antivirusa-avast-s/">Windows Vista</a>, IE10 — лише у Windows Server 2012 , IE11 — у Windows 7 та Windows 8.1:</p>
<br><br>Як наслідок, потрібно припинити розробку під IE6 та, а також під IE7. Щоб обґрунтувати цю стратегію, можна навести кілька прикладів рішень відомих компаній: Google <span>припинила підтримку IE8</span>у листопаді 2012 року, а IE9 – у жовтні 2013 року. <p>Github більше не підтримує IE 7 та 8 . Крім цього частина функціоналу Twitter не працює в IE8. І, нарешті, популярний фреймворк не буде підтримувати IE8, <span>починаючи з 4 версії</span>.</p>
<p>Тим не менш, статистика використання може змінюватись в залежності від регіону: 6,11% користувачів у Китаї в 2015 році, як і раніше, переглядали сторінки через IE8. Якщо взяти до уваги, що в Китаї було близько 724 400 000 інтернет-користувачів, можна зрозуміти, що цього року приблизно 44200000 китайців продовжують використовувати IE8.</p>
<p>Тому регіональні ринки, специфічні клієнти та вимоги галузі можуть суттєво відрізнятися. Особливо це стосується корпоративних та урядових установ.</p>
<h3>2. Проаналізуйте свою аудиторію</h3>
<p>Основний принцип тут такий: що вище необхідна кросбраузерність, то більше часу знадобиться на розробку, що призводить до збільшення вартості проекту. Щоб ухвалити виважене, економічно обґрунтоване рішення, потрібно поставити такі питання:</p>
<ul><li>Яка ваша цільова аудиторія?</li>
<li>На який географічний регіон потрібно налаштувати націлення?</li>
<li>Які браузери та пристрої використовують ваші відвідувачі?</li>
<li>Чи існують у компанії чи галузі технічні чинники, які змушують вас підтримувати конкретні версії старих браузерів?</li>
<li>Які з точки зору електронної комерції коефіцієнти конверсії та рентабельності різних груп користувачів за версіями браузерів?</li>
</ul><p>Відповідавши на ці запитання за допомогою статистичних даних, наприклад Google Analytics , можна отримати об'єктивну картину.</p>
<h3>3. Проблеми в застарілих браузерах та різні підходи до розробки</h3>
<p>Адаптивний веб-дизайн залежить від медіа-запитів, за допомогою яких змінюється CSS для різних роздільних здатностей екрана. Крім цього, сучасні сайти характеризуються використанням семантичних елементів HTML5 (наприклад, <header>, <nav>, <section>, <aside>, <footer>) для угруповання компонентів дизайну. Селектори CSS3 використовуються для вибору конкретних елементів і подальшого призначення стилів (наприклад, , :checked , :nth-child(n) , :not(selector) , :last-child)) . І, нарешті, адаптивна типографіка часто задається за допомогою одиниць REM ( <span>root em</span>).</p>
<p>Це підводить нас до наступних технічних складнощів при реалізації CSS кросбраузерності:</p>
<ul><li><span>Медіа-запити CSS3</span></li>
<li><span>Семантичні елементи HTML5</span>: не підтримується в IE6, 7 та 8;</li>
<li>Селектори CSS3: не підтримується в IE6. Тільки частково підтримуються в IE7 та 8;</li>
<li>Одиниці REM : не підтримується в IE6 , 7 та 8 . Тільки частково підтримуються в IE9 і 10;</li>
<li><span>Ліміт кількості правил CSS</span>: IE9 і нижче підтримують лише 4095 CSS-селекторів. Правила після <span>4095-го селектора</span>не застосовуються.</li>
</ul><p>Зазначені вище помилки матимуть найбільший вплив на стратегію, що застосовується під час реалізації адаптивного дизайну.</p>
<p>Існують дві основні стратегії розробки: <span>поступове спрощення</span>і <span>прогресивне покращення</span>.</p>
<p>Прогресивне поліпшення — ґрунтується на принципі, що передбачає початок розробки із загального знаменника, з мінімальних технічних вимог та рівня досвіду взаємодії користувача, запропонованого сайтом. Відвідувачі, які заходять на сайт через останні версії браузерів і пристроїв, будуть обслуговуватися версією сайту, що прогресивно розширюється, з усіма новітніми функціями.</p>
<p>З іншого боку, користувачам старих браузерів та повільного інтернет-з'єднання пропонуватиметься графічно усічена, але все ще функціональна версія сайту.</p>
<p>Подібний підхід під час реалізації <span>кросбраузерності</span>передбачає початок розробки з простої версії, до якої потім додаються складніші елементи. Старі браузери зможуть відображати сайт із базовим рівнем досвіду взаємодії. А нові функції HTML/CSS/JavaScript будуть доступні у браузерах, які можуть реально їх використовувати.</p>
<p>На противагу цьому, <span>поступове спрощення</span>забезпечує повнофункціональний рівень UX у сучасних браузерах. А потім поступово зменшує його складність для старих браузерів за рахунок графіки, але не торкаючись функціоналу. Ідея полягає в тому, щоб розпочати розробку з найновіших веб-стандартів, а потім спробувати мінімізувати проблеми, пов'язані зі старими браузерами.</p>
<p>Який підхід виберете ви, залежить від особистих переваг та умов проекту:</p>
<ul><li>Прогресивне покращення забезпечує більшу стабільність, тому що ви можете поступово додавати нові функції для сучасних браузерів. Але воно потребує більш ретельного планування;</li>
<li>Деякі розробники стверджують, що немає сенсу підтримувати застарілі браузери і використовувати новітні технології. Підтримка сучасних браузерів дає набагато найкращий досвід взаємодії;</li>
<li>Існує думка, що прогресивне поліпшення мертве, оскільки безліч <span>JavaScript-додатків</span>не працюють належним чином у цьому підході;</li>
<li>Веб-доступність для громадських установ може бути визначена в юридичних вимогах конкретних територіальних утворень, і це може спричинити необхідність особливого підходу.</li>
</ul><p>Враховуючи появу таких інструментів для визначення функцій, як Modernizr, я схиляюся до використання поступового спрощення та чорного списку браузерів при розробці сумісних сайтів.</p>
<h3>4. Тестування, тестування, тестування…</h3>
<p>Щоб якнайшвидше виявити потенційні проблеми кроссбраузерності JavaScript, потрібно в процесі розробки тестувати сайт у різних браузерах та дозволах. Існують різні програмні емулятори, які можуть допомогти нам:</p>
<ul><li>Browserstack — це комерційний сервіс, який надає доступ до тестового середовища, в якому можна перевірити свій проект більш ніж на 700 стаціонарних браузерах та мобільних пристроях за допомогою віртуальної машини у хмарі;</li>
<li>Microsoft Virtual Machines - якщо ви працюєте в Linux, у вас не буде доступу до Internet Explorer. Рішення може полягати в тому, щоб завантажити образи віртуальних машин для IE6 в IE11 які потім можуть використовуватися в поєднанні з Oracle VM Virtualbox або Vagrant для локального тестування;</li>
<li>Різні роздільні здатності екрану для конкретного браузера можна швидко протестувати за допомогою онлайн-сервісу Screenfly. За допомогою плагінів для браузерів, таких як Window Resizer для Google Chrome, або безпосередньо в розділі інструментів для розробників Chrome та Firefox.</li>
</ul><h3>5. Normalize.css та CSS Autoprefixer</h3>
<p>Зазвичай я починаю нові проекти зі скидання CSS за допомогою Normalize.css, який забезпечує кращу кросбраузерність при визначенні стилів HTML-елементів, які використовуються за замовчуванням, аж до Internet Explorer 8 . Normalize.css зберігає потрібні стилі елементів, нормалізує їхній зовнішній вигляд і виправляє ряд помилок та невідповідностей у різних браузерах.</p>
<p>Крім цього багато застарілих браузерів не можуть інтерпретувати невідомі елементи HTML і властивості CSS. Коли браузер зустрічає фрагмент HTML або CSS, який він не розуміє, ігнорує його і продовжує процес відображення. Багато програм використовують вендорні префікси, щоб додати нові, експериментальні або нестандартні функції CSS до їх реалізації у специфікації:</p>
<p>// Webkit-браузери, такі як Chrome та Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-</p>
<p>Проблема полягає в тому, що префікси незручні у використанні та з ними пов'язано багато помилок. Тому я використовую плагін CSS Autoprefixer у поєднанні з Grunt.</p>
<p>Звичайні правила CSS будуть оброблені за допомогою плагіна і до них будуть додані префікси на основі бази даних. <span>Can I Use</span>«. Рекомендується встановити конфігурацію версії браузерів, які потрібно підтримувати, наприклад:</p>
<p>options: ( browsers: ["last 2 versions", "ie >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"] )</p>
<p>Як приклад розглянемо наступний клас CSS:</p>
<p>Example ( background-image: linear-gradient(top left, #4676dd, #00345b); display: flex; transition: 1s all; )</p>
<p>За допомогою CSS Autoprefixer він перетворюється на:</p>
<p>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;</p>
<h3>6. Умовні коментарі</h3>
<p>Якщо потрібно створити резервний CSS або увімкнути кросбраузерність JavaScript для ранніх версій Internet Explorer, то можете використовувати <span>умовні коментарі</span>. Вони підтримуються в Internet Explorer 5-9 , використовують синтаксис коментарів HTML у поєднанні з логічними значеннями. Залежно від логічного значення ( <span>true або false</span>) код усередині тегів коментарів буде виводитися або ховатися у відповідних версіях браузера:</p>
<p><!--> КОД, КОТОРЫЙ БУДЕТ ВЫПОЛНЯТЬСЯ <!-->// якщо Internet Explorer // якщо НЕ Internet Explorer // якщо Internet Explorer 7 // якщо НЕ Internet Explorer 7 // якщо Internet Explorer 9 чи НИЖЧЕ // якщо Internet Explorer 7 чи Вище // якщо Internet Explorer 6 АБО 7 // якщо ВИЩЕ Internet Explorer 6 АЛЕ НИЖЧЕ 9</p>
<p>Код автоматично ховається у всіх браузерах, які не підтримують умовних коментарів. Наочним прикладом того, як умовні коментарі можуть бути ефективно використані на практиці, є HTML5 Boilerplate, який додає специфічні класи CSS для застарілих версій Internet Explorer:</p>
<p><!--> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <!-->
<!--> <html class="no-js lt-ie9 lt-ie8" lang=""> <!-->
<!--> <html class="no-js lt-ie9" lang=""> <!-->
<!--><!--> <html class="no-js" lang=""> <!--<!--></p>
<h3>7. Поліфіли</h3>
<p>Технічні невідповідності застарілих браузерів для адаптивного веб-дизайну можна виправити за допомогою поліфілу. Він є фрагментом JavaScript коду, який «заповнює» специфічний функціональний розрив між застарілим браузером і функцією. Існує ціла низка поліфілів, які можуть бути використані для забезпечення підтримки браузером функцій HTML5.</p>
<p>Нижче наведено кілька поліфілів, призначених для усунення проблем кросбраузерності сайту, зазначених у пункті 3:</p>
<ul><li>respond.js - реалізує <span>медіа-запити CSS3</span>для Internet Explorer 6 - 8;</li>
<li>html5shiv дозволяє використання семантичних елементів HTML5 в Internet Explorer 6 - 8;</li>
<li>selectivzr - емулює селектори та псевдокласи CSS3 в Internet Explorer 6 - 8. Для повної підтримки потрібно або Mootools 1.3 або NWMatcher 1.2.3 . Часткова підтримка доступна за допомогою JQuery 1.3/1.4;</li>
<li>REM-unit-polyfill визначає, чи підтримує браузер одиниці rem, і забезпечує запасний варіант. Працює з IE8 та нижче.</li>
</ul><p>Для використання зазначених поліфілів їх потрібно додати з CDN або у вигляді файлу в коректному форматі всередині умовних коментарів у розділі <head>(не забудьте включити одну з <span>необхідні для Selectivizr бібліотек JavaScript</span>):</p>
<p><!-->
<script src="app/js/selectivizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="app/js/rem.min.js"></script>
<!-- <! --></p>
<p>Для кожного проекту необхідно оцінити, чи дійсно ці додаткові скрипти необхідні, оскільки вони можуть призвести до проблем з продуктивністю. Більшість поліфілів компактні, але кожен скрипт, що додатково завантажується, є додатковим HTTP-запитом. Це може сповільнити завантаження сторінки.</p>
<h3>8. Визначення функцій за допомогою Modernizr</h3>
<p>Бібліотека Modernizr, написана на JavaScript, допоможе перевірити кросбраузерність сайту: чи підтримується в різних браузерах конкретна функція HTML5 або CSS3. Якщо функція не доступна, може бути завантажено альтернативний CSS або JavaScript-код.</p>
<p>Ідея полягає в тому, щоб визначати функціональні можливості браузера, а не намагатися встановити його конкретну версію. І на підставі цього виводити його функціональні можливості, що є менш ефективним та надійним способом.</p>
<p>Варто зазначити, що Modernizr не додає відсутні функції в браузер. Тому вам потрібно буде надати код із резервного CSS або поліфілу.</p>
<p>Для початку необхідно завантажити повнофункціональне складання. Пізніше, коли ви готові до розробки, можна створити <span>користувальницьке складання</span>із специфічними функціями, які ви тестуєте. Все, що потрібно зробити, це додати клас.</p>
<p><!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<title>Modernizr Demo
