Використання Normalize.css Для однорідного розвитку

Сумісність із веб-переглядачем - це велика частина доступності в Інтернеті. Розробникам необхідно розглянути відхилення аудиторії та версії браузера, які потребують підтримки. Незважаючи на те, що CSS-скидання є опцією, більшість розробників віддають перевагу Normalize.css своєю простотою та перехресною сумісністю у всіх сучасних веб-браузерах.

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

Скидання браузера у порівнянні з нормалізацією

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

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

Нормалізувати стилі і формати заголовків, абзаців, блоковихцитат і загальних елементів так вони виглядають ідентичними (або досить близькими) у всіх підтримуваних браузерах. CSS скидає повністю стерти шифер так, що є немає значень за промовчанням ні за що.

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

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

“Мені довелося б стверджувати, що нормалізація краще, ніж скидання. Це призведе до того, що менше CSS буде передано по дроту, краще використовувати значення UA за замовчуванням і краще зрозуміти, якими є елементи мається на увазі показувати.”

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

Якщо ви хочете спробувати скинути CSS, тут ви знайдете кілька популярних варіантів:

Скидання Еріка Мейєра
Скидання HTML5
Скидання HTML5Доктора

Нормалізувати конфіг

Нормалізувати творця Ніколас Галахер написав вступний пост, що веде з цим твердженням:

“Normalize.css - це невеликий CSS-файл, що забезпечує кращу узгодженість між браузерами у стилістиці HTML-елементів за замовчуванням. Це сучасний, готовий до використання HTML5, альтернатива традиційному скидці CSS.”

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

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

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

Крім того, деякі розробники включають в себе весь файл Normalize.css і будують власну таблицю стилів. Повна нормалізаційна таблиця стилів охоплює 420 + рядків коду, що дорівнює ~ 6.8KB без стиснення.

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

Для початку або завантажте копію Normalize з GitHub або розмістіть його з зовнішнього CDN. Ви також можете витягнути останню версію Normalize від NPM так:

npm install --save normalize.css

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

Оскільки Normalize є модульним, ви можете тимчасово видалити розділи або навіть створити власні власні збірки Normalize. Потім можна запускати кожний проект за допомогою виділених частин, таких як елементи відображення HTML5, видаляючи стилі для вбудованого вмісту.

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

Інші менш очевидні, як цей код SVG, який приховує переповнення в Internet Explorer:

svg: not (: root) overflow: hidden;

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

Normalize.css В веб-дизайні

Найновіша версія Normalize v4.0 пропонує широку підтримку браузера.

Chrome (останні два)
Край (останні два)
Firefox (останні два)
Firefox ESR
Internet Explorer 8+
Opera (останні два)
Safari 6+

З того, що я можу сказати, Normalize може підтримувати старі версії браузерів з постійними оновленнями, такими як Firefox. Але “офіційний” підтримка включає лише дві останні версії Chrome / Edge / FF / Opera.

Крім того, IE6 + і Safari 4+ підтримуються з Normalize v1, але ця версія більше не оновлюється.

Дуже важливо перевірити версії веб-переглядача за допомогою інструментів, таких як Google Analytics. Це дасть вам кращу ідею, чи може Normalize бути корисним інструментом для сучасних веб-дизайнерських робіт.

Подальші ресурси

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

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

Пов'язані статті

Ніколас Галахер: Про Normalize.css
Вступ до шаблону HTML5
Normalize.css vs Reset.css: який з них використовувати?

Вступне відео

Використання Normalize CSS
Скидання та нормалізація за допомогою Envato
Ніколас Галахер - Мислення, що виходить за рамки масштабованого CSS