Усі 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. Виконання регулювань фонових зображень після orientation changes in IE on Windows Phone and 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 в 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 (після рядків про авторство та назву теми, тобто після тексту обрамленого дробом і зірочкою /* … */).
Багато верстальників використовуються так званий CSS Reset, службовець усунення особливостей різних браузерів. Фактично, цей файл стилів скидає всі CSS-властивості за промовчанням. У цій статті я продемонструю код цього файлу та розповім, варто використовувати CSS Reset чи ні.
Я бачив багато різних CSS Reset, Усі вони приблизно однакові. Можете використовувати такий:
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, font, 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 (
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body (
line-height: 1;
}
ol, ul (
list-style: none;
}
blockquote, q (
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after (
content: "";
content: none;
}
: Focus (
outline: 0;
}
table (
border-collapse: collapse;
border-spacing: 0;
}
Думаю, чим його використання обумовлено і так зрозуміло, а ось чому його, наприклад, я не використовую, як і багато інших верстальників, про це варто розповісти. По-перше, це зайвий файл, по-друге, зайвий часна обробку, але найголовніше - мені подобаються якості за промовчанням. Наприклад, самі поля у таблиці. Адже всі властивості за умовчанням робили не просто так, а як найоптимальніший варіант відображення різних елементів. Запевняю Вас, обнуливши paddingу осередків таблиці, швидше за все, Ви повернете його в основному файлі. І далеко не факт, що значення відрізнятиметься від того, що було за умовчанням. Ось і виходить, що ми спочатку це прибираємо, а потім це повертаємо. А разом з першими недоліками (зайвий файл та зайвий код) багато верстальників і зовсім не використовують CSS Reset.
В будь-якому випадку, використання скидання стилів не є чимось поганимТому можете сміливо його використовувати, якщо Ви вважаєте, що спрощення адаптації сайту під різні браузери дійсно спростить Вам верстку в цілому.
За винятком сімейств IE та Opera Mini.
Оскільки IE відсутність підтримки може викликати проблему, деякі з способів скидання деяких властивостей CSS на їх початкові значення:
Reset-this ( animation: none; animation-delay: 0; animation-direction: normal; animation-duration: 0; animation-fill-mode: none; animation-iteration-count: 1; animation-name: none; animation- play-state: running, animation-timing-function: ease, backface-visibility: visible, background: 0; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position: 0 0; background-position-x: 0; background-position-y: 0; background-repeat: repeat; background-size: auto auto; border: 0; border- style: none; border-width: medium; border-color: inherit; border-bottom: 0; border-bottom-color: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-style: none; border-bottom-width: medium; border-collapse: separate; border-image: none; border-left: 0; border-left-color: inherit; border-left-style: none; border-left-width: medium; border-radius: 0; border-right: 0; border-right-color: inherit; border-right-style: none; border-right-width: medium; border-spacing: 0; border-top: 0; border-top-color: inherit; border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: none; border-top-width: medium; bottom: auto; box-shadow: none; box-sizing: content-box; caption-side: top; clear: none; clip: auto; color: inherit; columns: auto; column-count: auto; column-fill: balance; column-gap: normal; column-rule: medium none currentColor; column-rule-color: currentColor; column-rule-style: none; column-rule-width: none; column-span: 1; column-width: auto; content: normal; counter-increment: none; counter-reset: none; cursor: auto; direction: ltr; display: inline; empty-cells: show; float: none; font: normal; font-family: inherit; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; height: auto; hyphens: none; left: auto; letter-spacing: normal; line-height: normal; list-style: none; list-style-image: none; list-style-position: outside; list-style-type: disc; margin: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; max-height: none; max-width: none; min-height: 0; min-width: 0; opacity: 1; orphans: 0; outline: 0; outline-color: invert; outline-style: none; outline-width: medium; overflow: visible; overflow-x: visible; overflow-y: visible; padding: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 50%; 50%; position: static; /* May потребують інших quotes for different locales (e.g fr) */ quotes: "\201C" "\201D" "\2018" "\2019"; right: auto; tab-size: 8; table-layout: auto; text-align: inherit; text-align-last: auto; text-decoration: none; text-decoration-color: inherit; text-decoration-line: none; text-decoration-style: solid; text-indent: 0; text-shadow: none; text-transform: none; top: auto; transform: none; transform-style: flat; transition: none; transition-delay: 0s; transition-duration: 0s; transition-property: none; transition-timing-function: ease; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 0; width: auto; word-spacing: normal; z-index: auto; /* basic modern patch */ all: initial; all: unset; ) /* basic modern patch */ #reset-this-root ( all: initial; * ( all: unset; ) )
- Релевантний github-репо з груднем 2017 року.
Як згадувалося в коментарі користувача @user566245:
це правильно в принципі, але індивідуальний пробіг може відрізнятися. Наприклад, деякі елементи, такі як textarea за умовчанням, мають кордон, застосовуючи це скидання, вони зменшать межі textarea.
Придбаний для того, щоб стати сучасною нормою, користувач Joost
#reset-this-parent ( all: initial; * ( all: unset; ) )
ПРИКЛАД З W3
Це може бути корисним для кореневого елемента "віджета", включеного в сторінку, який не хоче успадковувати стилі зовнішньої сторінки. Зверніть увагу, однак, що будь-який стиль "за замовчуванням", що застосовується до цього елемента (наприклад, наприклад: відображення: блок із таблиці стилів UA на елементах блоку, наприклад), також буде видалено.
Ніхто не думав про інше, крім css для скидання css? Так?
Існує така невідкладна утиліта:
getElementsByTagName ("*") поверне всі елементи з DOM. Потім ви можете встановити стилі для кожного елемента в колекції:
Var allElements = document.getElementsByTagName("*"); for (var i = 0, len = allElements.length; i< len; i++) { var element = allElements[i]; // element.style.border = ... }
З усім цим сказано; я не думаю, що скидання css є чимось можливим, якщо ми не закінчимо тільки з одним веб-браузером. Якщо в кінці "браузер" буде встановлено "за замовчуванням".
Для порівняння тут наведено список значень Firefox 40.0 для
де font-style: oblique запуск DOM-операції.Align-content: unset; align-items: unset; align-self: unset; animation: unset; appearance: unset; backface-visibility: unset; background-blend-mode: unset; background: unset; binding: unset; block-size: unset; border-block-end: unset; border-block-start: unset; border-collapse: unset; border-inline-end: unset; border-inline-start: unset; border-radius: unset; border-spacing: unset; border: unset; bottom: unset; box-align: unset; box-decoration-break: unset; box-direction: unset; box-flex: unset; box-ordinal-group: unset; box-orient: unset; box-pack: unset; box-shadow: unset; box-sizing: unset; caption-side: unset; clear: unset; clip-path: unset; clip-rule: unset; clip: unset; color-adjust: unset; color-interpolation-filters: unset; color-interpolation: unset; color: unset; column-fill: unset; column-gap: unset; column-rule: unset; columns: unset; content: unset; control-character-visibility: unset; counter-increment: unset; counter-reset: unset; cursor: unset; display: unset; dominant-baseline: unset; empty-cells: unset; fill-opacity: unset; fill-rule: unset; fill: unset; filter: unset; flex-flow: unset; flex: unset; float-edge: unset; float: unset; flood-color: unset; flood-opacity: unset; font-family: unset; font-feature-settings: unset; font-kerning: unset; font-language-override: unset; font-size-adjust: unset; font-size: unset; font-stretch: unset; font-style: oblique; font-synthesis: unset; font-variant: unset; font-weight: unset; font: ; force-broken-image-icon: unset; height: unset; hyphens: unset; image-orientation: unset; image-region: unset; image-rendering: unset; ime-mode: unset; inline-size: unset; isolation: unset; justify-content: unset; justify-items: unset; justify-self: unset; left: unset; letter-spacing: unset; lighting-color: unset; line-height: unset; list-style: unset; margin-block-end: unset; margin-block-start: unset; margin-inline-end: unset; margin-inline-start: unset; margin: unset; marker-offset: unset; marker: unset; mask-type: unset; mask: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; offset-block-end: unset; offset-block-start: unset; offset-inline-end: unset; offset-inline-start: unset; opacity: unset; order: unset; orient: unset; outline-offset: unset; outline-radius: unset; outline: unset; overflow: unset; padding-block-end: unset; padding-block-start: unset; padding-inline-end: unset; padding-inline-start: unset; padding: unset; page-break-after: unset; page-break-before: unset; page-break-inside: unset; paint-order: unset; perspective-origin: unset; perspective: unset; pointer-events: unset; position: unset; quotes: unset; resize: unset; right: unset; ruby-align: unset; ruby-position: unset; scroll-behavior: unset; scroll-snap-coordinate: unset; scroll-snap-destination: unset; scroll-snap-points-x: unset; scroll-snap-points-y: unset; scroll-snap-type: unset; shape-rendering: unset; stack-sizing: unset; stop-color: unset; stop-opacity: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; stroke: unset; tab-size: unset; table-layout: unset; text-align-last: unset; text-align: unset; text-anchor: unset; text-combine-upright: unset; text-decoration: unset; text-emphasis-position: unset; text-emphasis: unset; text-indent: unset; text-orientation: unset; text-overflow: unset; text-rendering: unset; text-shadow: unset; text-size-adjust: unset; text-transform: unset; top: unset; transform-origin: unset; transform-style: unset; transform: unset; transition: unset; user-focus: unset; user-input: unset; user-modify: unset; user-select: unset; vector-effect: unset; vertical-align: unset; visibility: unset; white-space: unset; width: unset; will-change: unset; window-dragging: unset; word-break: unset; word-spacing: unset; word-wrap: unset; writing-mode: unset; z-index: unset;
Від автора:Сайтобудування в Мережі буває схоже на будівництво на хиткіх пісках. Браузери роблять все те ж, але іноді у них виходять дратівливо непередбачувані відмінності. Наприклад, у всіх браузерів є «таблиці стилів user agent» - набір стилів CSS за умовчанням, щоб заголовок виглядав заголовком і т.д., ще до призначення стилів сторінки1. Звичайно, в кожному браузерному двигуні набори за замовчуванням застосовуються трохи різні.
Одним із прикладів були стилі списку за замовчуванням, де спочатку в браузерних таблицях стилів за замовчуванням Internet Explorer і Opera був відступ списку margin-left: 30pt;, тоді як Firefox і KHTML йшли з padding-left: 40px;. Якщо вам хотілося змінити відступ за замовчуванням, визначивши ul (padding-left: 0;), то в браузерах це призводило до різних результатів.
СКИД ВИХІДНИХ НАЛАШТУВАНЬ CSS
Щоб досягти невеликої стабільності, деякі розробники скидаю всі поля та відступи за допомогою універсального селектора:
* (margin: 0; padding: 0;)
* ( 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; )
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 , 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;
Він робить скидання деяких властивостей багатьох (але не всіх) елементів до простого еквівалента тексту. Оскільки скидаються лише відповідні елементи, в такий спосіб обходяться деякі проблеми * (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.
Скидання CSS(скидання стилів) - це обнулення за допомогою CSS, деяких параметрів HTML-елементів, які браузери встановлюють за промовчанням. Наприклад, до таких елементів можна віднести параграфи (тег), у яких спочатку присутні ненульові вертикальні поля (CSS), марковані списки (тег), які мають не тільки поля, а й маркери певного типу (CSS) тощо.
Тепер давайте подумаємо, навіщо потрібне це скидання CSS, що може нам дати? Добре, уявіть, що ви згорнули сторінки свого сайту і при цьому не змінили поля параграфів, які браузери запропонували за умовчанням, тому що їх розмір вас цілком влаштував. Але скажіть мені, будь ласка, а з чого ви вирішили, що всі браузери світу, які вже існують і ще з'являться, створюватимуть поля такого самого розміру? Більше того, чому ви вважаєте, що ті браузери, в яких ви тестували свою верстку, не змінять у своїх наступних версіях розмір цих полів або взагалі їх не приберуть? Чи відчуваєте, чим пахне?
Так ось, скидаючи CSS, верстальники просто підстраховуються від подібних непорозумінь, тобто спочатку обнуляють у елементів всі «критичні» значення властивостей CSS, а потім при необхідності додають назад, але вже зі своїми розмірами. Таким чином, можна бути впевненим, що у всіх браузерах сайт виглядатиме однаково. Можна звичайно і не скидати стилі, а просто по ходу верстки задавати потрібні параметри елементам, але тут є ризик, що десь буде втрачено і в певний момент все «попливе».
Виходячи з вищесказаного, однією з особливостей скидання CSS є те, що після його застосування багато HTML-елементів втрачають свій звичний зовнішній вигляд. І якщо втрата полів у параграфів є для новачків чимось очікуваним, то, наприклад, той факт, що кнопки створені за допомогою тегів або раптом стали зовні схожими на звичайний текст - є повною несподіванкою. Але це не повинно вас бентежити, адже для того стилі й скидаються, щоб верстальник потім не забув вказати їх по новій.
Способів скидання стилів існує дуже багато, і який ви виберете - залежить тільки від вас, але можу вам сказати одне - найкраще скидання це той, який ви створили самі, ґрунтуючись на своєму досвіді та звичках. Якщо такого досвіду у вас поки немає, то можете скористатися одним з варіантів запропонованих нижче.
Завжди вказуйте стилі для скидання CSS на початку коду, інакше деякі з параметрів можуть не спрацювати через пріоритетів стилів, які встановлюються браузерами під час обробки HTML-сторінки та коду CSS.
Скидання CSS за допомогою універсального селектора
* (font-family: inherit; /* всі елементи успадковують від свого батька гарнітуру шрифту */ font-style: inherit; /* успадковують зображення */ font-weight: inherit; /* успадковують жирність */ vertical-align: baseline; /* вертикальне вирівнювання по базовій лінії */ font-size: 100%;/* розмір шрифту 100% */ background: transparent; /* фон всіх елементів прозорий */ border: 0; /* прибираємо контури */ margin: 0; /* прибираємо поля */ padding: 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: normal; font-weight: normal; ) table ( border-collapse: collapse; /* загальні межі для осередків таблиць */ border-spacing: 0; /* обнулення відстані між осередками */ ) caption,th ( text-align: left; /* вирівнювання тексту по лівому краю */ ) ol,ul ( list-style: none; /* прибираємо маркери списків */ ) h1,h2,h3,h4,h5,h6 ( font-size: 100%; font-weight: normal; ) q:before,q :after ( content: ""; /* скасовуємо лапки у тега Q */ )Опис прикладу
Компанія Яху свого часу розробила свій варіант скидання стилів. Тут вже змінюються властивості конкретних елементів, що дозволяє досягти більшої гнучкості в управлінні зовнішнім виглядом. Наприклад, тут прибрані маркери у списків, а у тега - лапки за допомогою властивості 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, 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; ) article,aside,details,figcaption, figure, footer,header,hgroup,menu,nav,section ( display: block; /* робимо елементи блоковими (для старих браузерів) */ ) body ( line-height: 1; /* міжрядковий інтервал тексту на сторінці */ ) ol ,ul ( list-style: none; ) blockquote:before,blockquote:after, q:before,q:after ( content: ""; /* Забираємо лапки у Q і BLOCKQUOTE */ content: none; /* додаємо для вірності */ ) blockquote,q ( quotes: none; /* ще один спосіб прибрати лапки */ ) table ( border-collapse: collapse; border-spacing: 0; )Опис прикладу
Ще один спосіб скидання CSS запропонував Ерік Мейєр (Eric Meyer) - відомий у певних колах веб-розробник. Тут він уже додав скидання стилів для тегів з HTML 5, які, до речі, на момент написання цієї статті і самі ще дуже погано підтримувалися сучасними браузерами. Але ж завжди треба дивитися в перспективу, правда?
Насправді цю статтю можна було б продовжувати до нескінченності, тому що, повторюю в черговий раз, у певний момент кожен верстальник приходить до свого варіанту скидання або не використовує його взагалі, покладаючись на свою уважність.
