Що таке CSS Reset
Переклад статті: What is a CSS Reset?Автор: Joss Crowcroft.
CSS Reset - це невеликий, часто стислий (мінімізований) набір CSS правил, в результаті застосування яких скидаються стилі всіх HTML елементів до відповідних початкових значень.
Якщо ви все ще не знаєте, то майте на увазі, що будь-який браузер має власні каскадні таблиці стилів, які він використовує для представлення сайтів, що не передбачають стильове оформлення, в більш зручному для читання вигляді. Так, наприклад, ви, можливо, помітили, що більшість браузерів за замовчуванням для відображення наявних на сторінці посилань використовують синій колір, а для тих, які були активовані раніше - фіолетовий. Для таблиць спочатку встановлені певні межі , відступи і поля , а елементів заголовків ( h1 , h2 , h3 тощо.) власні типи і розміри шрифтів. До того ж у кожному браузері передбачено певні значення відступів практично для всіх елементів. Ви, напевно, звернули увагу і на те, що стандартна кнопка підтвердження у всіх браузерах виглядає по-різному.
Це, безумовно, створює ряд труднощів для розробників у процесі кодування CSS, пов'язаних з кросбраузерністю або іншими словами із забезпеченням єдиного зовнішнього вигляду сайту у всіх існуючих браузерах.
За рахунок застосування такого інструменту як CSS Reset розробники можуть змусити будь-який браузер скинути всі передбачені ним стильові налаштування в нульове значення, що дозволяє максимально знизити ризик виникнення проблем, пов'язаних з кросбраузерністю.
Найпростіший приклад сайту до та після використання CSS Reset.
Нижче представлений перший коли-небудь створений веб-сайт у двох варіантах - один у своєму звичайному вигляді, колибраузер застосовує власні каскадні таблиці стилів, які використовуються за замовчуванням та другий, після їх скидання за допомогою CSS Reset :
Це, звичайно ж, максимально спрощений приклад, в якому немає елементів списків, зображень або таблиць, але він все ж таки дозволяє зрозуміти зміст дії файлу CSS Reset .
Навіщо призначений CSS Reset?
Ви, можливо, думаєте, навіщо все це потрібно. Все досить просто. Виконавши скидання всіх, передбачених у будь-якому браузері стилів до самого заснування, ви можете сміливо приступати до CSS кодування і оформляти ваш документ необхідним чином, абсолютно не турбуючись про те, що будь-які передустановки, що є в барузерах, вплинуть на відображення вашої сторінки.
Спірні питання.
Однозначної думки щодо застосування CSS Reset немає. Дехто вважає, що в ньому немає потреби, оскільки скидати стилі елемента лише для того, щоб потім їх перевизначити безглуздо. Дійсно, якщо розглядати окремо певний елемент, застосовуючи до нього відповідний фрагмент CSS Reset коду з наступним призначенням йому необхідних стилів, то ця думка стає очевидною:
… /* #element rules: */ #element
У більшості випадків вони мають рацію, оскільки використання цього прийому призводить до повторного виконання коду та збільшення часу обробки документа, у той час як одного правила було б цілком достатньо. Тому багато розробників і дизайнерів дотримуються думки, що застосування CSS Reset порушує один з основних принципів CSS кодування -'DRY' (Don't Repeat Yourself - Не повторюйтесь).
Проте, ця технологія має чимало переваг, які зводять до нуля всі її недоліки. Не останнє місце посідає той факт, що використання CSS Resetдозволяє впорядкувати процес розробки, зробивши його логічним та послідовним. Тобто вам потрібно скопіювати та включити в документ сам файл CSS Reset , потім при необхідності підключити свої власні базові стилі ( * Автор має на увазі, що ви можете створити власний файл попередніх стильових налаштувань. ) і відштовхуючись від цього займатися стилізацією вашого документа. Принаймні, ви тепер точно знатимете, що ніякі стильові передустановки, які є в якому-небудь браузері, жодним чином не вплинуть на зовнішній вигляд вашого документа.
Інша проблема зачіпає властивість каскадності "каскадиних таблиць стилів". Якщо файл CSS Reset файл розроблений неправильно, то може виявитися, що створювані вами в подальшому CSS правила не будуть працювати, оскільки код, який по суті повинен був просто скинути стилі браузера на базовий рівень, перевизначатиме ваші власні стилі. Найчастіше ця проблема має місце при використанні Universal Selector Reset, але при виборі грамотно сконструйованого коду, такого як HTML5 Doctor CSS Reset, подібні ситуації, як правило, не виникають.