Скидання стилів за допомогою CSS Reset. Скидання CSS стилів, приклади працюючих рішень Стилі css за замовчуванням для html 5

За промовчанням браузер встановлює свої настройки для деяких властивостей css. Але біда тут у тому, що веб-браузерів багато і кожен може встановлювати свої правила. Яке рішення? Дізнатися, як скинути налаштування css за замовчуванням та перезаписати на свої. А ось про те, як це можна зробити і буде присвячено цю статтю.

CSS Reset або скидання стандартних налаштувань

CSS Reset - це набір стилів, які скидають якісь параметри, встановлені браузеромза замовчуванням. Цей файл пише для себе кожен веб-розробник індивідуально, а хтось бере готове рішення. Ось із нього я і пропоную почати. Є багато хороших варіантів скидання стилів, але мені найбільше сподобався цей складений Еріком Мейєром:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Ліцензія: none (public domain)
*/
html, body, div, span, applet, об'єкт, 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,
мало, 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,
menu, nav, output, ruby, section, summary,
time, mark, audio, video (
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section (
display: block;
}
body (
line-height: 1;
}
ol, ul (
list-style: none;
}
blockquote, q (
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after (
content: "";
content: none;
}
table (
border-collapse: collapse;
border-spacing: 0;
}

Я трохи прокоментую код. По-перше, тут скидаються внутрішні та зовнішні відступи всім необхідних елементів. По-друге, в наявності підтримка HTML5 елементів. Для них встановлено правило, яке дозволить їм правильно відображатися в деяких версіях браузерів. По-третє, задані типові налаштування для зручної роботиз таблицями (прибрані відступи між осередками та подвійні межі). А ще скинуто стандартні маркери для списків та лапки для цитат. Ці частини коду варто видалити, якщо ви хочете використовувати стандартну стилізацію.

Як скинути налаштування css самостійно

При нормальному володінні css можна спробувати самому написати пару правил. Наприклад:

*{
margin: 0;
padding: 0;
}

Це, мабуть, найпростіша команда. Зірочка в цьому випадку представляє всі селектори, тому стилі будуть застосовані до всіх елементів на веб-сторінці, скинувши в них зовнішні та внутрішні відступи. Ви здивуєтеся, але цих простих рядків коду може вистачити для забезпечення кросбраузерності в багатьох веб-браузерах. Решта всіх правил можна додати за власним бажанням. Я раджу додати ще display: block для всіх тегів HTML5.

Де розмістити правила css reset

Ось я вам запропонував код, а куди його вставляти? Тут є два варіанти:

• Вставити його на початку головної таблиці стилів на вашому сайті
• Створити на сервері новий css-файл і зберегти код, після чого зберегти і підключити до всіх сторінок ПЕРЕДосновною таблицею style.css.

Докладніше про підключення таблиці стилів css до html дивіться

На мій погляд, другий варіант гірше тим, що погіршує продуктивність, додаючи до завантаження один зайвий файл. З іншого боку, то вам простіше буде керувати цими правилами. Але заради продуктивності я рекомендую використати перший варіант.

Скидання налаштувань є одним із заходів щодо забезпечення кросбраузерності сайту, тобто однакового відображення в різних веб-браузерах. Звичайно, це не всі заходи, які забезпечать однаковий зовнішній вигляд, про решту я писатиму надалі на цьому блозі. Підписуйтесь, якщо цікаво.

Усі HTML елементи сторінок за замовчуванням мають певні значення. І, на жаль, не однаково трактуються різними браузерами. В результаті страждає на оформлення сайту, його дизайн змінюється при зміні браузера (інтернет оглядача). Ціль процедури скидання стилів полягає в тому, щоб зменшити неузгодженість браузера в таких речах, як висоти рядка, поля, розміри шрифтів заголовків і т.д.

Приклади скриптів скидання CSS стилів

Є думка, що кожен поважаючий себе вебмайстер повинен написати свій власний код скидання CSS. Але я прихильник іншого підходу, взяти готове рішення, розібратися в ньому та підкоригувати за потреби.

Eric Meyer CSS Reset

Скрипт скидання від Eric Meyer, за словами самого автора, навмисно дуже загальний. Наприклад, у ньому для елемента body не заданий будь-який колір фону за замовчуванням. Тому він має бути змінений, відредагований, розширений та іншим чином налаштований відповідно до ваших потреб. Додайте потрібні кольори для сторінок, посилань тощо.

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, об'єкт, 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, мало, strike, strong, sub, sup, tt, var, b, u, i, центр, 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, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- collapse: collapse; border-spacing: 0; )

Yahoo! (YUI 3) Reset CSS

Скидання стилів CSS YUI 3 пом'якшує суперечливий стиль HTML-елементів браузерами, так само як і будь-який інший скрипт скидання CSS, щоб створити надійну основу для створення веб-сайтів та веб-застосунків.

/* YUI 3.18.1 Copyright 2014 Yahoo! Inc. Всі права захищені. Ліцензований під BSD Ліцензія. http://yuilibrary.com/license/ */ /* TODO необхідна, щоб remove settings на HTML since we can"t namespace it. color:#000; background:#FFF; ) /* TODO remove settings on BODY since we can't namespace it. */ /* TODO test putting a class on HEAD. - Fails on 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 think about hanlding inheritence differently, maybe letting IE6 fail a bit ... */ address, caption, cite, code, dfn, em, strong, th, var ( font-style:normal; font-weight:normal; ) ol, ul ( list-style:none; ) caption, th ( text-align:left; ) h1, h2, h3, h4, h5, h6 ( font-size:100%; font-weight:normal; ) q:before, q:after ( content:""; ) abbr, acronym ( border:0; font-variant:normal; ) /* to preserve line-height and selector appearance */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) input, textarea , select ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*to enable resizing for IE*/ ) /*because legend doesn"t inherit in IE * / legend ( color:#000; ) /* YUI CSS Detection Stamp */ #yui3-css-stamp.cssreset ( display: none; )

Скидання стилів normalize.css

Normalize.css - це налаштований CSS-файл, який дозволяє браузерам відображати всі елементи більш послідовно і відповідно до сучасними стандартами. Його автори досліджували різницю між стилями різних браузерівза замовчуванням, щоб скоригувати лише ті стилі, які потребують нормалізації.

/*! normalize.css v6.0.0 | MIT Ліцензія | github.com/necolas/normalize.css */ /* Document ==================================== ====================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone і в iOS. */ html ( line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Sections ================================================ =========================== */ /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section ( display: block; ) /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 ( font-size: 2em; margin: 0.67em 0; ) /* Grouping content ============================= ============================================= */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Add the correct margin in IE 8. */ figure ( margin: 1em 40px; ) /** * 1. Add the correct box sizing у Firefox. * 2. Відображення overflow в Edge and IE. */ hr ( box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ ) /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Text-level semantics =============== ================================================== ========= */ /** * 1. Змініть чорний фон на функціях IE 10. */ a ( background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Remove the bottom border in Chrome 57- and Firefox 39- . * 2. Додайте правильний текст декорації в Chrome, Edge, IE, Opera, і Safari. */ abbr ( border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ ) /** * Prevent the duplicate application of `bolder ` by the next rule in Safari 6. */ b, strong ( font-weight: inherit; ) /** * Add the correct font weight в Chrome, Edge, and Safari. */ b, strong ( font-weight: bolder; ) /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Add the correct font style in Android 4.3-. */ dfn ( font-style: italic; ) /** * Add the correct background and color in IE 9-. */ mark ( background-color: #ff0; color: #000; ) /** * Add the correct font size in all browsers. */ small ( font-size: 80%; ) /** * Prevent `sub` and `sup` елементи з точки зору line height in * all browsers. */ sub, sup ( font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; ) sub ( bottom: -0.25em; ) sup ( top: -0.5em; ) /* Embedded content ================================================ ========================== */ /** * Add the correct display in IE 9-. */ audio, video ( display: inline-block; ) /** * Add the correct display in iOS 4-7. */ audio:not() ( display: none; height: 0; ) /** * Remove border on images inside links in IE 10-. */ img ( border-style: none; ) /** * Hide the overflow in IE. */ svg:not(:root) ( overflow: hidden; ) /* Forms ================================ ========================================== */ /** * Remove the margin у Firefox та Safari. */ button, input, optgroup, select, textarea ( margin: 0; ) /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input ( /* 1 */ overflow: visible; ) /** * Remove inheritance of text transform in Edge, Firefox, IE. * 1. Remove inheritance of text transform in Firefox. */ button, select ( /* 1 */ text-transform: none; ) /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Використовуйте здатність до стилю знімальних типів в iOS і Safari. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * Remove inner border and padding in Firefox. */ button::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner /** * Зберігає focus styles unset by the previous rule. */ button:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( outline: 1px dotted ButtonText; ) /** * 1. Використовуйте текст, що встановлюється в Edge and IE. * 2. Використовуйте барвистість від 'fieldset' елементів в IE. * 3. Remove the padding so developers не є пов'язаний з тим, що вони zero out * `fieldset` елементів у всіх браузерах. */ legend ( box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0 /* 3 */ white-space: normal; /* 1 */ ) /** * 1. Add the correct display in IE 9-. * 2. Додайте прямі вертикальні випадки в Chrome, Firefox, і Opera. */ progress ( display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * Remove default vertical scrollbar in IE. */ textarea ( overflow: auto; ) /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Використовуйте список кнопок орієнтації та розблокування в Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( height: auto; ) /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style в Safari. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Remove вгору шпильки і відключені кнопки в Chrome і Safari на macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Використовуйте здатність до стилю clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button ( -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ ) /* Interactive ============ ================================================== ============ */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu ( display: block; ) /* * Add the correct display in all browsers. */ summary ( display: list-item; ) /* Scripting ==================================== ====================================== */ /** * Add the correct display in IE 9-. */ canvas ( display: inline-block; ) /** * Add the correct display in IE. */ template ( display: none; ) /* Hidden ====================================== ==================================== */ /** * Add the correct display in IE 10- . */ ( display: none; )

Скидання через універсальний селектор * (зірочка)

На перший погляд це може здатися найпростішим і вдалим рішенням, навіщо описувати всі HTML елементи та надавати їм значення, коли можна використовувати селектор *, адже його дія поширюється на HTML.

* ( margin: 0; padding: 0; )

Але, на жаль, це не хороша практика. Браузер дуже важко (займає багато часу в порівнянні з іншими процедурами скидання CSS) застосовувати правила до кожного елемента в документі, особливо на великих веб-сторінках, а також може зруйнувати багато хороших стилів за замовчуванням.

Скидання стилів та WordPress

Якщо ви хочете використовувати один з описаних вище методів скидання CSS стилів для сайту на WordPress, то це можна зробити двома способами.

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

@import "reset.css";

Якщо в CSS є директива @import, то вона повинна перебувати на початку таблиці (перед усіма правилами). В іншому випадку браузер може її проігнорувати.

Для підвищення швидкодії, таблиці CSS стилів, як правило, навпаки з'єднують в один файл. Тому використовувати @import без реальної потреби не варто.

Як бачите, скидання стилів у WordPress нічим особливим не виділяється.

Подяки

При написанні статті було використано такі джерела.

За визначенням розробка файлу стилів передбачає завдання властивостям CSSнових значень. Складні файли стилів згодом доростають доти, коли значення CSS потрібно видалити повністю, т. е., скинути їх значення за промовчанням. У деяких випадках ці значення за промовчанням добре відомі і легко запам'ятовуються, але не для всіх властивостей це правильно. На щастя, сучасні можливості CSS дають нам простий шлях для скидання значень властивостей.

Скидання налаштувань

Припустимо, що Ви задали зображенням властивість спливу вліво:

Img (float: left;)

Після цього для зображень в особливих випадках, наприклад, для тих, які мають клас.recall, потрібно задати відсутність спливання, але Ви не можете згадати, як саме записується ця властивість.

Іншими словами, Ви знаєте, що за замовчуванням спливання відсутнє, але Ви не пам'ятаєте, як задати відсутність спливання. Замість того, щоб шукати, як це записати, можна просто додати наступний рядок до таблиці стилів:

Img.recall (float: initial;)

Існує поширена помилка, що значення за замовчуванням скидає значення властивості на перше значення, яке було задано цій властивості у файлі стилі, або на значення за промовчанням специфікації CSS. Але обидва ці варіанти не вірні: застосування за замовчуванням скидає властивість на його значення за промовчанням для браузера користувача.

У більшості випадків значення за замовчуванням буде одним і тим же близьким для всіх браузерів. Це значення особливо корисне у таких ситуаціях:

Приклади використання

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

Body ( color : hsl(333 , 50 % , 25 % ); ) h1, h2, h3 ( color : initial; )

Зверніть увагу, що чорний колір не обов'язково буде кольором за замовчуванням, оскільки це значення залежить від браузерів і, зрештою, від самих користувачів. Подібним чином наступний запис:

Aside ( font-family : initial; )

дасть різні результати в різних браузерах, і шрифт на виході не обов'язково буде Times New Roman, оскільки різні браузери можуть мати різні шрифти за замовчуванням.

Є кілька інших варіантів застосування для значення за промовчанням:

Скидання значення z-index у елемента на значення за промовчанням.

Скидання значень зовнішніх відступів та трансформацій на їх значення за промовчанням.

Обмеження використання

Одна з основних причин досить рідкісного використання значення за умовчанням CSS - повна відсутність його підтримки браузері Internet Explorer, хоч в інших браузерах воно підтримується вже багато років. Однак браузер Edgeпідтримує це значення, так що, ймовірно, значення за умовчанням частіше з'являтиметься у файлах стилів у майбутньому.

Переклад - Чергування

Від автора:Сайтобудування в Мережі буває схоже на будівництво на хиткіх пісках. Браузери роблять все те ж, але іноді у них виходять дратівливо непередбачувані відмінності. Наприклад, у всіх браузерів є «таблиці стилів user agent» - набір стилів CSS за умовчанням, щоб заголовок виглядав заголовком і т.д., ще до призначення стилів сторінки1. Звичайно, в кожному браузерному двигуні набори за замовчуванням застосовуються трохи різні.

Одним із прикладів були стилі списку за замовчуванням, де спочатку в браузерних таблицях стилів за замовчуванням Internet Explorer і Opera був відступ списку margin-left: 30pt;, тоді як Firefox і KHTML йшли з padding-left: 40px;. Якщо вам хотілося змінити відступ за замовчуванням, визначивши ul (padding-left: 0;), то в браузерах це призводило до різних результатів.

СКИД ВИХІДНИХ НАЛАШТУВАНЬ CSS

Щоб досягти невеликої стабільності, деякі розробники скидаю всі поля та відступи за допомогою універсального селектора:

* (margin: 0; padding: 0;)

Визначивши відступ списку та розпочавши з цього свою таблицю стилів, ви отримаєте те, що очікували. Однак застосування * означало, що поле і відступ за замовчуванням «впав» для всіх елементів і, як тільки ви додавали елемент form, ставало дуже тяжко.

Мета скидання полягає в тому, щоб обнулити все, що можна… [і] стати стартовою точкою ваших власних основних стилів- Ерік Майєр (Eric Meyer)

html, body, div, span, applet, об'єкт, 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, male, strike, strong, sub, sup, tt, var, b, u, i, центр, dl, dt, dd, ol, ul, li, fieldset, форму, мітку, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, фігура, fíгcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; )

Він робить скидання деяких властивостей багатьох (але не всіх) елементів до простого еквівалента тексту. Оскільки скидаються лише відповідні елементи, в такий спосіб обходяться деякі проблеми * (margin: 0; padding: 0;). Потім ми можемо визначати стилі для цих скинутих «знестилених» властивостей, будучи впевненими, що будуємо на стабільній кроссбраузерной основі. Таке призначення стилів, крім того, діє як сигналізатор потреби у свідомій установці відповідних стилів для цих елементів.

ПРОБЛЕМИ СКИДАННЯ НАЛАШТУВАНЬ CSS

Скидання CSS були справжнім порятунком, але зараз, особливо за умови підвищення каркасів-фреймів, вони часто використовуються «як є». Наприклад, Ерік припускав, що інші розробники почнуть будувати сайти на запропонованих стилях скидання, відповідним чином скасовуючи їх, і в першу версію Meyer Reset тимчасово включалося це правило:

/* пам'ятайте, що потрібно визначити стилі фокусу! */ :focus ( outline: 0; )

На жаль, насправді не всі визначали стилі фокусу, і з другої версії Ерік його видалив.

Застосовуючи скиди, відчуваєш себе трохи збоченцем. Скидання стилів браузера за замовчуванням змушує розмірковувати про те, як повинен показуватися кожен елемент, допомагаючи переконатися, що елементи застосовуються за семантикою, а не за замовчуванням. Але для елементів типу i і em майже завжди є стиль браузера за замовчуванням. Інші браузерні стилі за умовчанням, такі, як колишній колись сміховинно більший розмір тексту заголовків, змінилися і за умовчанням стали досить стерпними. Проблеми починаються, коли хтось хоче після передачі застосувати скинутий елемент HTML лише з призначеними «знеструмленими» стилями скидання.

Для мене найважливішою проблемою скидів є спадкування, яке веде до спаму у браузерних інструментах. При спробі відстежити в чужому коді проблему CSS глибоко вкладеного елемента не допоможе:

Правила скидання CSS, що повторюються через успадкування

NORMALIZE.CSS

Ніколас Галлахер (Nicolas Gallagher) і Джонатан Ніл (Jonathan Neal) зробили інший підхід за допомогою 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

Applying Normalize.css v2

Відомо різниця у філософії, коли приклад Meyer Reset з'являється як пара рядків простого тексту без полів, відступу чи маркерів, тоді як приклади Normalize.css схожі на стилі за замовчуванням. Різниця в стилях, застосованих до цього ul теж легко помітна.

Однак, це не всі стилі, застосовані до ul. Для порівняння ось вам той самий «знеструмлений» скріншот, але з видимими стилями агента користувача, Firefox 21 і Opera Next 15.

У цій статті ми поговоримо про скидання стилів та розглянемо приклад створення такого файлу reset.css.

Ідея кидання стилів з'явилася близько 10 років тому. Яка власне полягала в тому, щоб за допомогою невеликого набору стилів CSS привести вигляд сторінки у всіх браузерах до однакового. Звичайно не завжди це виходить, але деякі моменти можна виправити - наприклад border не зрозуміло, звідки береться в деяких версіях IE. Або синє обведення (outline) біля полів.

Не для одного front-end розробника не секрет, що браузери дуже вибагливі та кожен обробляє елементи HTMLпо-своєму, додаючи свої стандартні стилі.

Так як цієї ідей зайнялися давно, не дивно, що вже є готові файли скидання, зазвичай їх називають reset.css, і підключають до всіх проектів.

Чому окремий файл? Та просто тому, що так зручніше їх переносити від проекту до проекту.

Ось приклад reset.css від 2007 року:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, об'єкт, 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, мало, strike, strong, sub, sup, tt, var, b, u, i, центр, 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, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- collapse: collapse; border-spacing: 0; )

Це лише стандарт цього файлу, прийнятий певним колом веб-розробників.

Я ж раджу вам, чи ви досвідченим програмістом або тільки початківцям розробити свій файл скидання. За основу можна взяти вищеописаний стандарт, доповнити його своїми селекторами чи змінити існуючі. Ось приклад такого файлу, який я розробив для себе:

input, textarea,a, button, select(outline:none) img (border:none;) hr ( clear:both; border:none; background:none; ) * ( background-repeat:no-repeat; ) /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list -style: none; margin:0; padding:0; ) blockquote, q (quotes: none;) blockquote:before, blockquote:after, q:before, q:after (content: ""; content: none; ) (border-collapse: collapse; border-spacing: 0; )

Ви можете копіювати будь-який вищезгаданий код для особистого використання, але якщо ви будете використовувати його у своїх статтях - ставте посилання на джерело.