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

Виждал съм много различни Нулиране на CSS, всички са еднакви. Можете да използвате този:

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 (
фон: прозрачен;
граница: 0;
размер на шрифта: 100%;
марж: 0;
контур: 0;
подплата: 0;
вертикално подравняване: базова линия;
}
тяло(
височина на реда: 1;
}
ол, ул (
стил на списък: няма;
}
блок цитат,q(
кавички: няма;
}
blockquote:преди, blockquote:след,
q:преди, q:след (
съдържание: "";
съдържание: няма;
}
:фокус (
контур: 0;
}
маса (
border-collapse: колапс;
граница-разстояние: 0;
}

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

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

• Превод

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

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

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

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

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

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

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

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

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

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

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

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 Reset, е потенциалната излишност на последващи декларации на 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 без промени.“

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

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

Така че, като нулират CSS, дизайнерите на оформление просто се предпазват от подобни недоразумения, тоест първо нулират всички „критични“ стойности на свойствата на CSS за елементи и след това, ако е необходимо, ги добавят обратно, но със собствените си размери. По този начин можете да сте сигурни, че сайтът ще изглежда еднакво във всички браузъри. Можете, разбира се, да не нулирате стиловете, а просто да зададете необходимите параметри на елементите, докато оформлението напредва, но има риск нещо да бъде пропуснато някъде и в определен момент всичко да „плува“.

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

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

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

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

* ( font-family: inherit; /* всички елементи наследяват шрифта на шрифта от своя родител */ font-style: inherit; /* наследяват стила */ font-weight: inherit; /* наследяват удебелеността */ vertical-align : основна линия; /* вертикално подравняване спрямо основната линия */ размер на шрифта: 100%; /* размер на шрифта 100% */ фон: прозрачен; /* фонът на всички елементи е прозрачен */ рамка: 0; /* премахване на граници * / контур: 0; /* премахване на контури */ поле: 0; /* премахване на полета */ подложка: 0; /* премахване на подложка */ )

Описание на примера

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

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

Нулиране на CSS от Yahoo!

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td ( margin: 0; padding: 0; ) fieldset,img,abbr,acronym ( border: 0; ) address,caption,cite,code,dfn,em,strong,th,var ( font-style: нормален; font-weight: нормален; ) таблица ( border-collapse: collapse; /* общи граници за клетките на таблицата */ border-spacing: 0; /* нулиране на разстоянието между клетките */ ) caption,th ( text-align: ляво; /* подравняване на текста вляво * / ) ol,ul ( стил на списък: няма; /* премахване на маркери на списък */ ) h1,h2,h3,h4,h5,h6 (размер на шрифта: 100%; тегло на шрифта: нормално; ) q:преди, q :after ( съдържание: ""; /* премахнете кавичките от Q тага */ )

Описание на примера

Компанията Yahoo по едно време разработи своя собствена версия за нулиране на стилове. Тук свойствата на конкретни елементи вече са променени, което позволява по-голяма гъвкавост при контролиране на външния им вид. Например, тук куршумите са премахнати от списъците, а кавичките са премахнати от таговете с помощта на свойството CSS. Предимствата на този подход са очевидни, но недостатъците включват по-обемен и понякога излишен код. Но никой не ви спира да промените всяко нулиране на CSS, за да отговаря на вашите нужди. Да кажем, че можете да премахнете някои, които не ви трябват селектори на таговеили не просто премахнете кавичките, но веднага им придайте необходимия вид.

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

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p, blockquote,pre,a,abbr,acronym,address,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, статия, настрана, платно, подробности, вграждане, фигура, figcaption, долен колонтитул, заглавка, hgroup, меню, nav, изход, ruby, раздел,резюме,време,маркировка,аудио,видео ( марж: 0; подложка: 0; граница: 0; размер на шрифта: 100%; шрифт: наследяване; вертикално подравняване: базова линия; ) статия,настрани,подробности,фиг.заглавие, фигура, долен колонтитул, горен колонтитул, hgroup, меню, навигация, раздел ( дисплей: блок; /* направете блок на елементите (за по-стари браузъри) */ ) тяло (височина на реда: 1; /* разстояние между редовете на текста на страницата */ ) ol ,ul ( list-style: none; ) blockquote:before,blockquote:after, q:before,q:after ( content: ""; /* Премахване на кавичките от Q и BLOCKQUOTE */ content: none; /* добавете за добра мярка */ ) blockquote,q ( кавички: няма; /* друг начин за премахване на кавички */ ) таблица ( border-collapse: collapse; граница-разстояние: 0; )

Описание на примера

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

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

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

Ако погледнете изображението за визуализация на публикацията, ще видите, че редовен ред се показва по напълно различни начини в Safari, Chrome и Firefox. Да, понякога правилата са едни и същи, например всеки крие тага head чрез опцията display: none!, но в много случаи има сериозни разлики в това как обектите се изобразяват на страницата. Подозирам, че някои от вашите клиенти може да не харесат, когато окончателното оформление изглежда различно от оформлението.

Ето защо, ако сте начинаещ уеб разработчик, публикацията определено ще бъде полезна за цялостното ви развитие. Това е превод на тази бележка с преглед на състоянието на нещата в областта на нулирането на CSS през 2018 г. Сигурен съм, че през 2019 г. и по-нататък всичко това ще бъде актуално, защото... Тази тема е вече на повече от 10 години (от пускането на първото подобно решение).

Защо трябва да нулирате настройките на CSS?

Както вече разбрахте от въведението, те ви позволяват да премахнете разликите между основните стилове на уеб браузърите и да ги приведете в един стандартизиран външен вид. Те винаги се използват в самото начало преди други потребителски разработки. Статията на Eric Meyer относно Reset CSS от преди десет години споменава основната причина за този подход, който все още е актуален години по-късно:

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

Но сега ситуацията в оформлението е по-малко противоречива?

Да, наистина в днешно време много параметри в потребителския агент са станали по-сходни. Почти навсякъде заглавието H1 е с размер на шрифта 2 em и хоризонтално поле 0,67 em. Това обаче са сравнително нови промени и като минимум трябва да обмислите поддръжка за по-стари версии на програми, където такава последователност не съществува.

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

Но ние прилагаме собствените си стилове, заменяйки базовите?

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

• Първо, помага ви да пишете по-чист код. Можем да го разделим на няколко части: отделно за дизайна на самия уеб проект и набор от правила, фокусирани върху спецификата на конкретни браузъри. Това ще ви позволи да не претрупвате основния CSS файл с всякакви IE хакове и т.н.
• Второ, всички нулирания тежат много малко и зареждането им не изисква много време.

Видове нулиране на CSS (можете да изтеглите от връзките в статията)

От далечната 2004 г., когато се появиха първите подобни разработки, сега има доста методи, които се различават по сложност и специфичност. По същество има 3 цели, които възстановяването на CSS стилове се опитва да реши:

1. Коригиране на грешки в листа със стилове на потребителски агент.
2. Премахване на нестандартен оригинален дизайн в интернет браузъри.
3. Създаване на универсална съвместима стилова основа.

Има варианти, които решават и трите проблема, и такива, които са съобразени само с един конкретен проблем.

Корекция/корекция на грешки

Нека разгледаме първата от посочените по-горе цели. Както вече разбирате, премахването на различни недостатъци и задръствания на браузърите е най-подходящо за поддръжка на остарели версии. Един добър пример за тази ситуация е, когато след появата на HTML5, същият Internet Explorer 9 не е приложил правилния тип дисплей към нови обекти.

Следователно в решения като Normalize.css всички грешки се вземат предвид и се обработват:

/** * Добавете правилния дисплей в IE. */основен (дисплей: блок; )

/** * Добавете правилния дисплей в IE. */ основен ( дисплей: блок; )

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

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

[ скрит ] ( дисплей: няма ! важно; // Един от добрите случаи на използване на !important }

( display: none !important; // Един от добрите случаи на използване на !important )

Премахване на странни стилове на браузъра

Това е втората причина за нулиране на настройките на CSS. По принцип всеки има собствено мнение относно това кой дизайн в таблицата със стилове на потребителския агент се счита за „необичаен“. Определението на автора на оригиналната бележка е съвсем логично: това е стил, който не е "гола" версия на дисплея на елемента. Например добавянето на 2em подложка за заглавия (както мнозина правят) не е лоша идея, но защо 2em, а не 3em или 4em. В този случай основната опция ще бъде липсата на отстъп, тоест нулев марж.

Най-простият универсален подход, който премахва подложките/полетата от таговете, е:

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

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

Този метод е твърде радикален, т.к важи за всички обекти, дори и тези, където не очаквате (в същия вход). Като алтернатива по-често се използва Eric Meyer Reset CSS, който премахва параметрите за марж/запълване, рамки и размер на шрифта (до 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, 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%; шрифт: наследяване; вертикално подравняване: базова линия; )

Преобладаващи стилове

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

Например, вместо да зададете всички шрифтове на размер 1em и полета = 0, Sanitize.css е настроен на други стойности:

/** * Коригирайте размера на шрифта и полето на елементите `h1` в контекстите `section` и * `article` в Chrome, Firefox и Safari. */ h1 (размер на шрифта: 2em; поле: 0,67em 0; )

/** * Коригирайте размера на шрифта и полето на елементите `h1` в контекстите `section` и * `article` в Chrome, Firefox и Safari. */ h1 (размер на шрифта: 2em; поле: 0,67em 0;)

В Reboot на Bootstrap ще намерите друга илюстрация на текущата задача. Разработчиците отидоха малко по-далеч и уточниха шрифтовете и цвета на фона за тялото.

// Тяло // // 1. Премахнете полето във всички браузъри. // 2. Като най-добра практика, приложете `background-color` по подразбиране. // 3. Задайте изрична първоначална стойност за подравняване на текста, така че по-късно да можем да използваме // стойността на `наследяване` на неща като `	`елементи.тяло ( margin: 0 ; // 1 семейство шрифтове: $font - семейство- base; font- size: $font - size- base; font- weight: $font - weight- base; line- height: $line - height - основа; цвят: $body - цвят; текст- подравняване: ляво; // 3 фон- цвят: $body - bg; // 2 )

// Тяло // // 1. Премахнете полето във всички браузъри. // 2. Като най-добра практика, приложете `background-color` по подразбиране. // 3. Задайте изрична първоначална стойност за подравняване на текста, така че по-късно да можем да използваме // стойността `inherit` за неща като ` `елементи. тяло ( margin: 0; // 1 семейство шрифтове: $font-family-base; размер на шрифта: $font-size-base; тегло на шрифта: $font-weight-base; line-height: $line-height -основа; цвят: $body-color; text-align: ляво; // 3 фонов цвят: $body-bg; // 2 )

Обща сума. Какво да избера

Оригиналната бележка съдържа резултат от съответно проучване от

От автора:Създаването на уебсайтове в Интернет може да бъде като изграждане върху плаващи пясъци. Браузърите правят същото, но от време на време правят досадно непредсказуеми разлики. Например, всички браузъри имат "листове със стилове на потребителски агент" - набор от 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, 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%; шрифт: наследяване; вертикално подравняване: основна линия;

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

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

Ресетите на CSS бяха спасител, но сега, особено с възхода на wireframes, те често се използват такива, каквито са. Например, Ерик предположи, че други разработчици ще започнат да изграждат сайтове около предложените от него стилове за нулиране, като ги заменят съответно и първата версия на 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.