Яка різниця між Normalize.css та Скинути CSS?

Я знаю, що таке скидання CSS, але нещодавно я почув про цю нову річ під назвою Normalize.css

Яка різниця між Normalize.css та Скинути CSS ?

Яка різниця між нормалізацією CSS та скиданням CSS?

Це просто нове слово для касет CSS Reset?

Я працюю над normalize.css.

Основні відмінності:

1. Normalize.css зберігає корисні параметри за замовчуванням, а не "стираючи" все. Наприклад, елементи на кшталт supабо sub"просто працюють" після включення normalize.css (і насправді робляться більш надійними), тоді як вони візуально не відрізняються від звичайного тексту після включення reset.css. Отже, normalize.css не нав'язує вам візуального початкового пункту (гомогенності). Це може не до смаку кожному. Найкраще зробити експеримент з обома і подивитися, які гелі з вашими уподобаннями.

2. Normalize.css виправляє деякі поширені помилки, які не входять у рамки для reset.css. Він має ширший обсяг, ніж reset.css, а також надає виправлення помилок для поширених проблем, таких як: налаштування відображення для елементів HTML5, відсутність fontуспадкування за елементами форми, виправлення font-sizeвізуалізації pre, переповнення SVG в IE9 та buttonпомилка стилізації в iOS.

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

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

5. Normalize.css має кращу документацію. Код normalize.css задокументований як в Інтернеті, так і більш всебічно в GitHub Wiki . Це означає, що ви можете дізнатися, що робить кожен рядок коду, чому він був включений, які відмінності між браузерами та легше запускати власні тести. Проект має на меті допомогти навчити людей про те, як браузери відображають елементи за замовчуванням, і полегшити їх участь у поданні удосконалень.

Про це я детальніше писав у статті про normalize.css

Основна відмінність полягає в тому, що:

• Скидання CSS мають на меті видалити всі вбудовані стилі браузера. Стандартні елементи, такі як H1-6, p, strong, em, et cetera, виглядають абсолютно однаково, і зовсім не мають прикраси. Тоді ви повинні додати всі прикраси самостійно.

• Нормалізація CSS має на меті зробити вбудований стиль браузера послідовним у веб-переглядачах. Такі елементи, як H1-6, відображатимуться жирним, більшим і так далі у веб-переглядачах. Тоді ви повинні додати лише різницю в оздобленні, яке потребує ваш дизайн.

Якщо ваш дизайн a) дотримується загальних умов для типографіки та іншого, і b) Normalize.css працює для вашої цільової аудиторії, то використання Normalize.CSS замість скидання CSS зробить ваш власний CSS меншим та швидшим для запису.

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

Я використовую і те, і інше.

Деякі стилі з Reset, деякі з Normalize.css. Наприклад, з Normalize.css є стиль, щоб переконатися, що всі вхідні елементи мають однаковий шрифт, який не відбувається (між текстовими вводами та текстовими областями). Скидання не має такого стилю, тому входи мають різні шрифти, що зазвичай не потрібно.

В основному, використання двох файлів CSS робить кращу роботу "Зрівняти" все;)

з повагою!

По-перше, reset.cssце найгірша бібліотека, яку ви можете використовувати, оскільки вона видаляє стандартну структуру HTML і відображає все, що ви пишете, як текст, після присвоєння значень прокладок поля та інших атрибутів 0. Так, наприклад, ви знайдете це <H1>, буде те саме, що <H6>.

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

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

Зберігає корисні параметри за замовчуванням, на відміну від багатьох скидів CSS.

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

Іноді найкращим рішенням є використання обох. Іноді, це не використовувати жодне. І іноді, це використовувати те чи інше. Якщо ви хочете, щоб усі стилі, включаючи поле маржі та накладки, скидалися в усіх браузерах, використовуйте reset.css. Потім нанесіть усі прикраси та стилі самостійно. Якщо вам просто подобаються вбудовані стилі, але ви хочете більше синхронності між браузером, тобто нормалізації, тоді використовуйте normalize.css. Але якщо ви вирішите використовувати як reset.css, так і normalize.css, спочатку зв’яжіть таблицю стилів reset.css, а потім нормалізувати.css (негайно) після цього. Іноді справа не в тому, що краще, але коли використовувати який проти, коли використовувати обидва проти, коли не використовувати жоден. ІМХО.

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

• Normalize.css - як випливає з назви, він нормалізує стилі в браузерах для своїх користувальницьких агентів, тобто робить їх однаковими для всіх браузерів через причину, за замовчуванням вони трохи відрізняються.

Приклад : <h1>тег всередині <section>за умовчанням Google Chrome зробить меншим, ніж "очікуваний" розмір <h1>тегу. Microsoft Edge, з іншого боку, робить "очікуваний" розмір <h1>тегу. Normalize.css зробить це послідовним.

Поточний статус : сховище npm показує, що в пакеті normalize.css наразі є понад 500 тис. Завантажень на тиждень. Зірок GitHub у проекті сховища складає понад 36 к.

• Скидання CSS - як випливає з назви, він скидає всі стилі, тобто видаляє всі стилі агента користувача браузера.

Приклад : це зробить щось подібне нижче:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Поточний статус : він набагато менш популярний, ніж Normalize.css, пакет reset-css показує, що він складає близько 26 тис. Завантажень на тиждень. Зірок GitHub всього 200, як видно із сховища проекту .