Какво е CSS Reset
Преведена статия: Какво е нулиране на CSS?Автор: Джос Кроукрофт.
Нулиране на CSS е малък, често съкратен (минифициран) набор от CSS правила, който нулира стиловете на всички HTML елементи към съответните им стойности по подразбиране.
Ако все още не знаете, имайте предвид, че всеки браузър има свои собствени каскадни стилови таблици, които използва, за да изобрази нестилизирани сайтове по по-четлив начин. Така например може би сте забелязали, че повечето браузъри по подразбиране използват синьо за показване на връзки на страница и лилаво за тези, които са били активирани по-рано. За таблиците първоначално се задават определени рамки, отстъпи и полета, а за заглавните елементи (h1, h2, h3 и т.н.) собствени типове и размери на шрифтовете. Освен това всеки браузър предоставя определени стойности на отстъпа за почти всички елементи. Вероятно сте забелязали, че стандартният бутон за потвърждение изглежда различно във всички браузъри.
Това със сигурност създава редица трудности за разработчиците в процеса на кодиране на CSS, свързани със съвместимостта между браузърите или, с други думи, осигуряването на еднакъв външен вид на сайта във всички съществуващи браузъри.
Чрез използването на инструмент като CSS Reset, разработчиците могат да принудят всеки браузър да нулира всичките си стилови настройки, което минимизира риска от проблеми с различни браузъри.
Най-простият пример за сайт преди и след използване на CSS Reset.
По-долу е първият уебсайт, създаван някога в две версии - едната в нормалната си форма, когатобраузърът прилага свои собствени каскадни стилови листове по подразбиране и втори, след като ги нулира с CSS Reset:
Това, разбира се, е много опростен пример, без елементи от списък, изображения или таблици, но все пак има смисъл от действието на Reset CSS файла.
За какво е CSS Reset?
Може би се чудите защо е необходимо всичко това. Всичко е доста просто. Чрез нулиране на всички стилове, предоставени във всеки браузър до самата основа, можете безопасно да продължите към CSS кодиране и стилизиране на вашия документ, както е необходимо, без изобщо да се притеснявате, че всички предварително зададени настройки в браузърите ще повлияят на показването на вашата страница.
Спорни въпроси.
Няма недвусмислено мнение относно използването на CSS Reset. Някои хора смятат, че не е необходимо, тъй като е безсмислено да нулирате стиловете на елемент само за да ги предефинирате по-късно. Наистина, ако разгледаме отделно дефиниран елемент, прилагайки към него подходящия фрагмент от CSS Reset код и след това му присвоявайки необходимите стилове, тогава тази гледна точка става очевидна:
… /* #element правила: */ #element
В повечето случаи те са прави, тъй като използването на тази техника води до многократно изпълнение на кода и увеличаване на времето за обработка на документа, докато едно правило би било напълно достатъчно. Затова много разработчици и дизайнери са на мнение, че използването на CSS Reset нарушава един от основните принципи на CSS кодирането -'DRY' (Don't Repeat Yourself - Не се повтаряй).
Въпреки това, тази технология има много предимства, които анулират всички нейни недостатъци. Не на последно място сред тях е фактът, че използването на CSS Resetви позволява да рационализирате процеса на разработка, което го прави логичен и последователен. Това означава, че трябва да копирате и включите самия файл за нулиране на CSS в документа, след това да включите вашите собствени базови стилове, ако е необходимо ( *Авторът има предвид, че можете да създадете свой собствен файл с предварително зададени стилове. ) и да започнете да стилизирате документа си от там. Най-малкото вече ще знаете със сигурност, че никакви предварително зададени стилове, налични във всеки браузър, няма да повлияят по никакъв начин на външния вид на вашия документ.
Друг проблем включва каскадното свойство на "каскадни стилови листове". Ако файлът за нулиране на CSS, който използвате, не е добре проектиран, възможно е CSS правилата, които създавате по-късно, да не работят, защото кодът, който основно трябваше просто да нулира стиловете на браузъра до базово ниво, ще замени вашите собствени стилове. Често този проблем възниква при използване на Universal Selector Reset, но при избора на добре проектиран код, като например HTML5 Doctor CSS Reset, такива ситуации обикновено не възникват.