Тази статия е първата от поредица за опитомяване на CSS. Днес ще разгледаме технологията Нулиране на CSS.

Защо е необходимо това?

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

Например, вие използвате елемента авъв вашия документ. Повечето браузъри харесват Internet Explorerи Firefox, добавете връзка Син цвяти подчертаване. Представете си обаче, че пет години по-късно някой реши да твори нов браузър(нека го наречем UltraBrowser). Разработчиците на браузъра не харесаха синия цвят и подчертаването беше досадно, затова решиха да подчертаят връзките в червенои удебелен. Точно въз основа на това, ако зададете стойността на основния стил за елемент а, тогава е гарантирано, че ще бъде така, както искате да бъде, а не както разработчиците на UltraBrowser предпочитат да го показват.

Но сега изобщо нямаме отстъпи, включително между отделните параграфи! Какво да правя? Не лъжете и не се страхувайте: под нашето нулиране ще опишем правилото, от което се нуждаем. Може да се направи различни начини: посочете отстъпа под или над абзаца, посочете го в проценти, пиксели или em.

Най-важното е, че браузърът сега играе по нашите правила, а не ние по неговите. Реших да го направя така:

* ( марж: 0; подложка: 0; ) p ( марж: 5px 0 10px 0; )

В резултат на това получихме това, което може да се види в третия пример.

Можете да създадете свои собствени стилове за нулиране, ако решавате конкретен проблем във вашия проект. Въпреки това няма разходказа да създадете свой собствен CSS Reset. Разчитайте на собствените си принципи и собствен стил.

За да ви помогнем да направите правилния избор, ето още няколко връзки:

1. По-малкото е повече - моят избор на Reset CSS (Ed Elliot).

2. Вашият CSS Reset е първото нещо, което браузърът трябва да види

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

Да, разбирам, че звучи смешно, но това е една от основните грешки на разработчиците, млади и стари. Много хора просто забравят за това.

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

Да не се отклоняваме много от темата и да продължим. Нека приложим стиловете на Ерик Майер към нашия пример, но следописания на нашите имоти, както е показано в пример 4. Математиците биха казали следното: "Това е, което трябваше да се докаже."

3. Използвайте отделен CSS документ за CSS Reset

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

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

4. Опитайте се да избягвате използването на универсалния селектор

Въпреки че тази концепция работи, често не е желателна поради несъвместимост с някои браузъри (например този селектор се обработва неправилно в Internet Explorer). Трябва да използвате тази техника само за прости, малки, статични и предвидими страници (ако трябва).

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

5. Избягвайте излишни описания на свойства, когато използвате CSS Reset

Друга причина, поради която не харесвам отделен файл за нулиране на CSS, е потенциалната излишност на последващи декларации на CSS свойства. Повтарянето на вашите индивидуални стилове сред целия набор от CSS файлове е лошо възпитание и трябва да се избягва. Разбира се, понякога сме твърде мързеливи, за да преминем старателно през набор от стилове и да комбинираме някои от тях, но трябва поне да опитаме!

Да се ​​върнем към CSS Reset на Ерик. Той задава стойности по подразбиране за височина на линията, цвят и фон на елемент тялопо следния начин:

тяло (височина на линия: 1; цвят: черен; фон: бял; )

Да приемем, че вече знаете как ще изглежда елементът. тяло:

1. цвят на фона: #cccccc;
2. цвят: #996633;
3. Искате да повторите конкретно фоново изображение хоризонтално.

В този случай няма нужда да създавате нов селектор, който да опише вашите свойства – можете просто да ги включите в CSS Reset. Хайде да го направим:

тяло (височина на линия: 1; цвят: #996633; фон:#ccc url(tiled-image.gif) repeat-x горе вляво; )

Не се страхувайте да промените самото CSS Reset.Персонализирайте го за вас, накарайте го да работи за вас. Променете, изградете отново, премахнете и добавете според нуждите във вашия конкретен случай.

Ерик Майер каза следното за това: "това не е случай, в който всеки трябва да използва CSS Reset без промени."

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

Примери за скрипт за нулиране на CSS

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

Ерик Майер Нулиране на CSS

Сценарият за нулиране от Ерик Майер, според самия автор, е умишлено много общ. Например, той не задава цвят на фона по подразбиране за елемента body. Следователно, той трябва да бъде модифициран, редактиран, разширен и по друг начин персонализиран, за да отговаря на вашите нужди. Добавете желаните цветове за страници, връзки и т.н.

/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 Лиценз: няма (обществено достояние) */ html, тяло, div, span, аплет, обект, iframe, h1, h2, h3, h4, h5, h6, p, блоков цитат, pre, a, abbr, акроним, адрес, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, меню, навигация, изход, ruby, раздел, резюме, време, маркировка, аудио, видео ( марж: 0; подложка: 0; рамка: 0; размер на шрифта: 100%; шрифт: наследяване; вертикално подравняване: базова линия ; ) /* Нулиране на HTML5 роля на показване за по-стари браузъри */ статия, настрана, подробности, figcaption, фигура, долен колонтитул, заглавка, hgroup, меню, навигация, раздел ( дисплей: блок; ) тяло (височина на ред: 1; ) ol, ul ( list-style: none; ) blockquote, q ( кавички: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- колапс:c ollapse; граница-разстояние: 0; )

Yahoo! (YUI 3) Нулиране на CSS

YUI 3 CSS Style Reset смекчава конфликтния стил на HTML елементи от браузърите точно като всеки друг скрипт за нулиране на CSS, за да създаде солидна основа за изграждане на уебсайтове и уеб приложения.

/* YUI 3.18.1 Copyright 2014 Yahoo! Inc. Всички права запазени. Лицензиран под BSD лиценз. http://yuilibrary.com/license/ */ /* TODO ще трябва да премахне настройките на HTML, тъй като не можем да го пространстваме. TODO с префикса, трябва ли да групирам по селектор или свойство за спестяване на тегло? */ html( color:#000; background:#FFF; ) /* TODO премахване на настройките на BODY, тъй като не можем да го поставим в пространство за имена. */ /* TODO тест поставя клас на HEAD. - Неуспешно на FF. */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO помислете за обработката на наследяването по различен начин, може би да оставите IE6 да се провали малко ... */ адрес, надпис, цитиране, код, dfn, em, силен, th, var ( font-style:normal; font-weight:normal; ) ol, ul ( list-style:none; ) caption, th ( подравняване на текста: отляво; ) h1, h2, h3, h4, h5, h6 ( размер на шрифта: 100%; тегло на шрифта: нормално; ) q: преди, q: след ( съдържание: ""; ) съкращение, акроним ( border:0; font-variant:normal; ) /* за запазване на височината на реда и външния вид на селектора */ sup (vertical-align:text-top;) sub (vertical-align:text-bottom; ) input, textarea , изберете ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*за да разрешите преоразмеряване за IE*/ ) /*защото легендата не наследява в IE * / легенда ( цвят:#000; ) /* YUI CSS откриване ion Stamp */ #yui3-css-stamp.cssreset ( дисплей: няма; )

Нулирайте стиловете normalize.css

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

/*! normalize.css v6.0.0 | Лиценз на MIT | github.com/necolas/normalize.css */ /* Документ ===================================== = ==================================== */ /** * 1. Коригирайте височината на линията във всички браузъри. * 2. Предотвратете корекциите на размера на шрифта след промени в ориентацията в * IE on Windows телефони в iOS. */ html (line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Раздели =============================================== == ========================= */ /** * Добавете правилния дисплей в IE 9-. */ article, aside, footer, header, nav, section ( display: block; ) /** * Коригирайте размера на шрифта и полето на елементите `h1` в контекстите `section` и * `article` в Chrome, Firefox и сафари. */ h1 ( размер на шрифта: 2em; поле: 0,67em 0; ) /* Групиране на съдържание ============================= = ==========================================*/ /** * Добавете правилно показване в IE 9-. * 1. Добавете правилния дисплей в IE. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Добавете правилното поле в IE 8. */ figure ( margin: 1em 40px; ) /** * 1. Добавете правилното поле оразмеряване във Firefox. * 2. Покажете преливането в Edge и IE. */ hr (box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ ) /** * 1. Коригирайте наследяването и мащабирането на размера на шрифта във всички браузъри. * 2. Коригирайте странното оразмеряване на шрифта `em` във всички браузъри. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Семантика на ниво текст ================ =================================================== = ======== */ /** * 1. Премахнете сивия фон на активните връзки в IE 10. * 2. Премахнете пропуските в подчертаните връзки в iOS 8+ и Safari 8+. */ a ( background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Премахнете долната граница в Chrome 57- и Firefox 39- . * 2. Добавете правилното текстова декорация в Chrome, Edge, IE, Opera и Safari. */ abbr ( border-bottom: none; /* 1 */ text-decoration: подчертаване; /* 2 */ text-decoration: подчертаване с точки; /* 2 */ ) /** * Предотвратяване на дублиращото се прилагане на `bolder ` по следващото правило в Safari 6. */ b, strong ( font-weight: inherit; ) /** * Добавете правилното тегло на шрифта в Chrome, Edge и Safari. */ b, силен ( font-weight: bolder; ) /** * 1. Коригирайте наследяването и мащабирането на размера на шрифта във всички браузъри. * 2. Коригирайте странното оразмеряване на шрифта `em` във всички браузъри. */ code, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Добавете правилния стил на шрифт в Android 4.3-. */ dfn ( font-style: italic; ) /** * Добавете правилния фон и цвят в IE 9-. */ mark ( background-color: #ff0; color: #000; ) /** * Добавете правилния размер на шрифта във всички браузъри. */ small ( font-size: 80%; ) /** * Предотвратете влиянието на елементите `sub` и `sup` върху височината на реда във всички браузъри. */ sub, sup (font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; ) sub ( bottom: -0.25em; ) sup ( top: -0.5em; ) /* Вградено съдържание ================================================ == ======================== */ /** * Добавете правилния дисплей в IE 9-. */ audio, video ( display: inline-block; ) /** * Добавете правилния дисплей в iOS 4-7. */ audio:not() ( display: none; height: 0; ) /** * Премахване на рамката на изображенията във връзките в IE 10-. */ img ( border-style: none; ) /** * Скриване на преливането в IE. */ svg:not(:root) ( overflow: hidden; ) /* Формуляри ================================ = ========================================== */ /** * Премахване на полето във Firefox и Safari. */ button, input, optgroup, select, textarea ( margin: 0; ) /** * Показване на препълването в IE. * 1. Покажете преливането в Edge. */ бутон, вход ( /* 1 */ overflow: visible; ) /** * Премахване на наследяването на текстова трансформация в Edge, Firefox и IE. * 1. Премахнете наследяването на текстовата трансформация във Firefox. */ бутон, изберете ( /* 1 */ text-transform: none; ) /** * 1. Предотвратете грешка в WebKit, при която (2) унищожава собствените `audio` и `video` * контроли в Android 4. * 2. Коригирайте невъзможността за стилизиране на типове с възможност за кликване в iOS и Safari. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * Премахнете вътрешната граница и подложката във Firefox. */ бутон::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner ( border-style: none; padding: 0; ) /** * Възстановяване на стиловете на фокусиране, незададени от предишното правило. */ button:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( контур: 1px пунктиран ButtonText; ) /** * 1. Коригирайте обвиването на текста в Edge и IE. * 2. Коригирайте цветовото наследяване от елементите `fieldset` в IE. * 3. Премахнете подложката, така че разработчиците да не бъдат хванати, когато нулират * `fieldset` елементи във всички браузъри. */ легенда ( box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0 ; /* 3 */ бяло пространство: нормално; /* 1 */ ) /** * 1. Добавете правилния дисплей в IE 9-. * 2. Добавете правилното вертикално подравняване в Chrome, Firefox и Opera. */ напредък ( дисплей: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * Премахване на стандартната вертикална лента за превъртане в IE. */ textarea ( overflow: auto; ) /** * 1. Добавете правилното оразмеряване на полето в IE 10-. * 2. Премахнете подложката в IE 10-. */ , (box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Коригирайте стила на курсора на бутоните за увеличаване и намаляване в Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( височина: автоматично; ) /** * 1. Коригирайте странния външен вид в Chrome и Safari. * 2. Коригирайте стила на контура в Safari. */ ( -webkit-appearance: текстово поле; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Премахване на вътрешните подложки и бутоните за отказ в Chrome и Safari на macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Коригирайте невъзможността за стилизиране на типове, върху които може да се кликва, в iOS и Safari. * 2. Променете свойствата на шрифта на `inherit` в Safari. */ ::-webkit-file-upload-button ( -webkit-appearance: бутон; /* 1 */ шрифт: наследяване; /* 2 */ ) /* Интерактивно ============= =================================================== = =========== */ /* * Добавете правилния дисплей в IE 9-. * 1. Добавете правилния дисплей в Edge, IE и Firefox. */ подробности, /* 1 */ меню ( дисплей: блок; ) /* * Добавете правилния дисплей във всички браузъри. */ резюме ( показване: списък-елемент; ) /* Скриптове ==================================== = ===================================== */ /** * Добавете правилния дисплей в IE 9- . */ canvas ( display: inline-block; ) /** * Добавете правилния дисплей в IE. */ шаблон ( дисплей: няма; ) /* Скрит ===================================== == =================================== */ /** * Добавете правилния дисплей в IE 10- . */ ( дисплей: няма; )

Нулиране чрез универсален селектор * (звездичка)

На пръв поглед това може да изглежда като най-простото и успешно решение, защо да описвате всички HTML елементи и да им присвоявате стойности, когато можете да използвате селектора *, защото той се прилага за всички HTML.

* ( марж: 0; подложка: 0; )

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

Нулиране на стилове и WordPress

Ако искате да използвате един от горните методинулиране на CSS стилове за WordPress сайт, тогава това може да стане по два начина.

Първият е, че трябва да копирате кода за нулиране в горната част на файла style.css на вашата WordPress тема (след авторството на темата и заглавните редове, т.е. след текста, рамкиран с дроб и звездичка /* ... * /.

@import "reset.css";

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

От друга страна, за да се подобри производителността, CSS таблицистиловете, като правило, напротив, се комбинират в един файл. Следователно използването на @import без реална нужда не си струва.

Както можете да видите, нулирането на стилове в WordPress не е нищо особено.

Благодаря

При написването на тази статия са използвани следните източници.

По подразбиране браузърът задава свои собствени настройки за някои свойства в css. Но проблемът тук е, че има много уеб браузъри и всеки може да задава свои собствени правила. Какво решение? Научете как да възстановите настройките на css по подразбиране и да ги презапишете със свои собствени. Но тази статия ще бъде посветена на това как може да се направи това.

Нулиране на CSS или Нулиране на настройките по подразбиране

CSS Reset е набор от стилове, които нулират някои параметри, инсталиран от браузърапо подразбиране. Всеки уеб разработчик пише този файл за себе си поотделно и някой взема готово решение. Ето откъде предлагам да започнем. Има много добри опции за нулиране на стил, но любимата ми е тази от Ерик Майер:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Лиценз: няма (обществено достояние)
*/
html, тяло, div, span, аплет, обект, iframe,
h1, h2, h3, h4, h5, h6, p, блоков цитат, pre,
a, abbr, акроним, адрес, голям, цитирам, код,
del, dfn, em, img, ins, kbd, q, s, samp,
малък, страйк, силен, под, sup, tt, var,
b, u, i, център,
dl, dt, dd, ol, ul, li,
набор от полета, формуляр, етикет, легенда,
таблица, надпис, tbody, tfoot, thead, tr, th, td,
статия, настрана, платно, детайли, вграждане,
фигура, figcaption, долен колонтитул, горен колонтитул, hgroup,
меню, навигация, изход, рубин, раздел, резюме,
време, знак, аудио, видео (
марж: 0;
подплата: 0;
граница: 0;
размер на шрифта: 100%
шрифт: наследяване;
вертикално подравняване: базова линия;
}
/* Нулиране на HTML5 роля на показване за по-стари браузъри */
статия, настрана, подробности, figcaption, фигура,
долен колонтитул, горен колонтитул, hgroup, меню, навигация, раздел (
дисплей:блок;
}
тяло (
височина на реда: 1;
}
ол, ул (
стил на списък: няма;
}
блок цитат, q (
кавички: няма;
}
blockquote:преди, blockquote:след,
q:преди, q:след (
съдържание: "";
съдържание: няма;
}
маса (
border-collapse: колапс;
граница-разстояние: 0;
}

Ще коментирам малко кода. Първо, нулира вътрешните и външните полета за всички необходими елементи. Второ, има поддръжка за HTML5 елементи. Те имат правило, което ще им позволи да се показват правилно в някои версии на браузъри. Трето, типичните настройки за удобна работас таблици (премахнати отстъпи между клетките и двойни граници). Също така стандартните маркери за списъци и котировки за котировки са отпаднали. Тези части от кода трябва да бъдат премахнати, ако искате да използвате стила по подразбиране.

Как сами да нулирате настройките на css

С повече или по-малко нормално владеене на css можете да опитате сами да напишете няколко правила. Например:

*{
марж: 0;
подплата: 0;
}

Това е може би най проста команда. Звездицата в този случай представлява всички селектори, така че стиловете ще бъдат приложени към всички елементи на уеб страницата, като нулират техните полета и подложки. Ще се изненадате, но тези прости редове код може да са достатъчни, за да осигурят съвместимост между различни браузъри в много уеб браузъри. Всички други правила могат да се добавят по желание. Също така препоръчвам да добавите display: block към всички HTML5 тагове.

Къде да поставите правила за нулиране на css

Тук по-горе ви предложих кода, но къде да го поставите? Тук има два варианта:

• Поставете го в самото начало на основния стилов лист на вашия сайт
• Създайте нов css файл на сървъра и запазете кода в него, след това запазете и се свържете с всички страници ПРЕДИосновната таблица style.css.

За повече информация относно свързването на css stylesheet към html вижте

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

Възстановяването на настройките е една от мерките за осигуряване на крос-браузърна съвместимост на сайта, тоест едно и също показване в различни уеб браузъри. Разбира се, това не са всички мерки, които ще гарантират същото външен вид, за останалите ще пиша в бъдеще в този блог. Абонирайте се при интерес.

От автора:Изграждането на уебсайтове в мрежата може да бъде като изграждане върху плаващи пясъци. Браузърите правят същото, но от време на време получават досадно непредсказуеми разлики. Например, всички браузъри имат „стилови листове потребителски агент' е набор от CSS стилове по подразбиране, за да изглежда заглавието като заглавие и т.н., дори преди да присвоите стилове на страница1. Разбира се, всеки двигател на браузъра използва малко по-различни настройки по подразбиране.

Един пример бяха стиловете на списъци по подразбиране, където стиловите листове на браузъра по подразбиране на Internet Explorer и Opera първоначално имаха отстъп на списъка margin-left: 30pt;, докато Firefox и KHTML идваха с padding-left: 40px;. Ако искате да промените подложката по подразбиране, като дефинирате ul (padding-left: 0;), тогава това доведе до много различни резултати в браузърите.

НУЛИРАЙТЕ НАСТРОЙКИТЕ НА CSS

За да постигнат малко стабилност, някои разработчици нулират всички полета и подложки с универсален селектор:

* (поле: 0; подложка: 0;)

* (поле: 0; подложка: 0;)

Като направите отстъп в списъка и стартирате своя лист със стилове от там, ще получите това, което очаквате. Използването на * обаче означаваше, че маржът и подложката по подразбиране се „разбиха“ за всички елементи и веднага щом добавихте елемента на формуляра, стана наистина трудно.

Целта на нулирането е да нулира всичко, което можете… [и] да служи като отправна точка за вашите собствени основни стилове.- Ерик Майер

html, тяло, div, span, аплет, обект, iframe, h1, h2, h3, h4, h5, h6, p, блоков цитат, pre, a, abbr, акроним, адрес, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, форма, етикет, легенда, таблица, надпис, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, раздел, резюме, време, маркировка, аудио, видео ( марж: 0; подложка: 0; граница: 0; размер на шрифта: 100%; шрифт: наследяване; вертикално подравняване: базова линия; )

html, тяло, div, span, аплет, обект, iframe, h1, h2, h3, h4, h5, h6, p, блоков цитат, pre, a , съкращение , акроним , адрес , голям , цитиране , код , del, dfn, em, img, ins, kbd, q, s, samp, малък, страйк, силен, sub, sup, tt, var, b, u, i, център, dl, dt, dd, ol, ul, li, набор от полета, формуляр, етикет, легенда, таблица , надпис , tbody , tfoot , thead , tr , th , td , статия , настрана , платно , детайли , вграждане , фигура, figcaption, долен колонтитул, горен колонтитул, hgroup, меню, навигация, изход, рубин, раздел, резюме, време, знак, аудио, видео ( марж: 0 подложка: 0 граница: 0 размер на шрифта: 100%; шрифт: наследяване; вертикално подравняване: основна линия;

Той нулира някои свойства на много (но не всички) елементи до техния еквивалент на обикновен текст. Тъй като се нулират само съответстващи елементи, това заобикаля някои проблеми * (поле: 0; подложка: 0;). След това можем да стилизираме тези пропуснати „нестилизирани“ свойства, сигурни в знанието, че надграждаме върху стабилна основа за различни браузъри. Това присвояване на стил също действа като сигнал за необходимостта от съзнателно задаване на подходящи стилове за тези елементи.

ПРОБЛЕМИ ЗА НУЛИРАНЕ НА CSS

Нулираните настройки на CSS са били истински спасител, но сега, особено с нарастването на телените рамки, те често се използват „както са“. Например, Ерик предположи, че други разработчици ще започнат да изграждат сайтове върху предложените от него стилове за нулиране, като ги заменят съответно и първата версия на Meyer Reset временно включва това правило:

/* не забравяйте да дефинирате стилове на фокус! */ :фокус ( контур: 0; )

За съжаление, не всички всъщност дефинираха стилове на фокус и Ерик го премахна от втората версия.

Прилагайки нулиране, се чувствате малко перверзни. Възстановяването на стиловете по подразбиране на браузъра ви принуждава да мислите как трябва да се показва всеки елемент, което помага да се гарантира, че елементите се прилагат за семантично, а не за стилове по подразбиране. Но елементи като i и em почти винаги имат стил на браузъра по подразбиране. Други стилове на браузъра по подразбиране, като някога абсурдно големия размер на текста на заглавието, се промениха и станаха доста поносими по подразбиране. Проблемите започват, когато някой иска да приложи рестартиран HTML елемент след изпращане само със зададени стилове за нулиране без стил.

За мен най-големият проблем с нулирането е наследяването, което води до спам в инструментите на браузъра. Когато се опитвате да проследите CSS проблем на дълбоко вложен елемент в нечий друг код, това няма да помогне:

Правилата за нулиране на CSS се повтарят поради наследяване

НОРМАЛИЗИРАНЕ.CSS

Никълъс Галахър и Джонатан Нийл възприеха различен подход с Normalize.css, "малък CSS файл, който гарантира по-добра последователност между различни браузъри в стиловете по подразбиране на HTML елементи." Както при нулирането на CSS, това ни дава солидна отправна точка за различни браузъри - основната причина за нулиране на първо място - но двата подхода се различават философски.

Нулираните настройки на CSS заменят стиловете на потребителските агенти и връщат много елементи в тяхното „нестилизирано“ състояние, някаква равна основа, върху която да се гради безопасно. След това обаче трябва да стилизираме повечето от елементите, преди да можем да изграждаме с тях. Вместо това Normalize.css адресира само несъответствията в стила на потребителския агент, като избира най-подходящите настройки по подразбиране, което е разликата. Тук също получаваме сигурна основа за кръстосани браузъри, но такава, която включва нормализирани стилове на потребителски агенти като готови за използване основни строителни материали. По същество това е нещо като идеализирана кросбраузърна версия на таблицата със стилове CSS 2.1 по подразбиране. И в двата случая след това трябва да добавим наши собствени стилове за отмяна, за да създадем изображението, но тъй като настройките на браузъра по подразбиране остават в Normalize.css, обикновено има по-малко стилове за добавяне.

Тъй като промените в Normalize.css са по-насочени, няма каскадно наследяване на пренаписаните правила във вашите инструменти за създаване, базирани на браузър. Ето прост ul: без стил с Meyer Reset и Normalize.css версии 1 и 2:

„Нестилизиран“ елемент от неподреден списък

Приложете Meyer Reset

Приложете Normalize.css v1

Прилагане на Normalize.css v2

Има ясна разлика във философията, където примерът за нулиране на Meyer се появява като няколко реда обикновен текст без полета, подложки или водещи символи, докато примерите за Normalize.css са подобни на стиловете по подразбиране. Разликата в стила, приложен към тази улица, също е лесно забележима.

Това обаче не са всички стилове, приложени към ул. За сравнение, ето същата „нестилизирана“ екранна снимка, но с видими стилове на потребителски агент, във Firefox 21 и Opera Next 15.