Използване на Normalize.css за хомогенно развитие

Съвместимостта на браузъра е голяма част от достъпността в мрежата. Разработчиците трябва да разгледат вариация на тяхната аудитория и версии на браузъра, които изискват поддръжка. Въпреки че CSS нулирането е опция, повечето разработчици предпочитат Normalize.css за неговата простота и кръстосана съвместимост във всички съвременни уеб браузъри.

В този пост ще ви разкрия основите на Normalize и как се сравнява с общите CSS нулирания. Това не е сложна библиотека и не би трябвало да отнеме повече от няколко часа. Но ключът към нормализиране е ученето как да го приложи правилно и разумно.

Браузърът се нулира срещу нормализиране

От години използвам персонализирана версия на CSS на Ерик Майер. Те са достатъчни за повечето от моите проекти и не са предизвикали никакви сериозни проблеми. Нормализиране обаче промени моя изглед на нулира, защото работи по различен начин от CSS нулиране. Важно е да разберете различията.

Помислете за нормализиране като дреха, приложена последователно към всички браузъри, и мисля за a CSS се нулира като термоядрена детонация във всички браузъри.

Нормализиране на заглавията на стиловете и форматите, параграфите, блоковите цитати и общите елементи, така че те изглеждат идентични (или достатъчно близки) във всички поддържани браузъри. CSS нулира напълно изтрийте чистия лист, така че има няма настройки по подразбиране за нищо.

С CSS нулиране заглавията могат да изглеждат по същия начин като вашите параграфи; елементите нямат подложка, полета или разстояние от какъвто и да е вид. С нулиране на CSS трябва да предоставите нов код за да подобри стила. С нормализиране получавате a предварително проектиран стил които могат да бъдат изградени.

Така че един от тях е по-добър от другия? Това е горещо дискутирана тема, въпреки че една точка на аргументация твърди, че нормализира работи по-добре за съвместимост и произвежда по-малки размери на файлове.

“Ще трябва да твърдя, че нормализацията е по-добра от нулирането. Това ще доведе до по-малко прехвърляне на CSS по мрежата, по-добро използване на стойностите по подразбиране на UA и по-добро разбиране на елементите означаваше за показване.”

Независимо дали се влюбвате в нормализиране или предпочитате типично нулиране, важно е поне да разберете и двете страни и да изберете най-подходящото. Много малко разработчици започват кодиране от нулата, така че нормализирането или рестартирането на CSS е почти необходимо за модерната разработка на frontend.

Ако искате да опитате CSS нулиране, тук са някои популярни възможности:

Resets на Ерик Майер
Възстановяване на HTML5
HTML5Doctor Reset

Нормализирайте Config

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

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

През годините това се превърна в надеждна библиотека, използвана от разработчиците по света. Нормализирането дори е било използвано до известна степен в Bootstrap и Pure CSS.

Има два начина за използване на нормализиране в проекта: редактирайте източника, за да персонализирате собствения си Normalize stylesheet, или да го използвате като база и добавете стилове отгоре.

Първият е стратегия за избор и избор, където можете да преминете през файла Normalize.css и да изтриете каквото не ви е нужно, за да създадете свой собствен стил. Това е най-добре за всеки отделен проект, за да се запази ниското съдържание на файловете.

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

Нито един от двата метода не е по-добър от другия и си струва да следвате най-доброто за всеки проект или предпочитания от вас работен процес.

За да започнете или изтеглете копие на Normalize от GitHub или го инсталирайте от външен CDN. Можете също така да изтеглите най-новата версия на Normalize от NPM така:

npm install --save normalize.css

Ако не искате да изтеглите файлове, можете дори да създадете нов проект на CodePen, който може да се добави към нормализиране с едно натискане на бутон.

Тъй като Normalize е модулна, можете да премахнете частите временно или дори да направите своя собствена конструкция на Normalize. След това можете да стартирате всеки проект с избрани части като HTML5 дисплейните елементи, докато премахвате стилове за вградено съдържание.

Всяко нормализиращо правило има съответния CSS коментар, който обяснява какво прави и кои проблеми / грешки решава. Някои от тях са очевидни като настройка дисплей: блок на по-нови HTML5 елементи.

Други са по-малко очевидни като този SVG код, който крие препълване в Internet Explorer:

svg: не (: 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 Анализ. Това ще ви даде по-добра представа дали Normalize може да бъде полезен инструмент за работа в съвременен уеб дизайн.

Допълнителни ресурси

Няма много неща, които да преподават конкретно за нормализирането, така че по-голямата част от обучението се случва чрез правене.

Истина е, че няма какво да се обясни, че не можете да го вземете, като прочетете таблицата със стилове и копирате / промените кода, както е необходимо. Но ако търсите друга подходяща информация, добавих няколко връзки по-долу.

Свързани статии

Никола Галахър: За Normalize.css
Въведение в HTML5 Boilerplate
Normalize.css vs Reset.css: кой да се използва?

Въведение Видео

Използване на нормализиране на CSS
Нулира и нормализира от Envato
Никола Галахър - Мислейки отвъд скалируемия CSS