Обнулення відступів у CSS. Скидання стилів за допомогою CSS Reset. Проблеми скидання налаштувань css

Усі 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, 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 ; ) /* 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: c ollapse; 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 on 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 Detect ion 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 and in 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. Створення фону в 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. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ 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 the 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 and 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 в Firefox. */ button, select ( /* 1 */ text-transform: none; ) /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Використовуйте здатність до стилю clickable types в iOS і Safari. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner ( border-style: none; padding: 0; ) /** * Збереження фокусних стилів не встановлюється за допомогою попередньої сторінки. */ button:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring (outline: 1px dotted ButtonText; ) /** * 1. Correct the text wrapping in Edge and IE. * 2. Використовуйте барвистість від 'fieldset' елементів в IE. * 3. Remove 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. Додайте прямі vertical alignment в Chrome, Firefox, і Opera. */ progress ( display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * Remove the 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 */ ) /** * Correct the cursor style of increment and decrement buttons in 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 in Safari. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Використовуйте способи стилю clickable types в 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. Додайте відповідний дисплей в Edge, IE, і 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 нічим особливим не виділяється.

Подяки

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

Від автора:сайтобудування в Мережі буває схоже на будівництво на хистких пісках. Браузери роблять все те ж, але іноді у них виходять дратівливо непередбачувані відмінності. Наприклад, у всіх браузерів є «таблиці стилів 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, мало, 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, 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.

У цій статті ми поговоримо про скидання стилів та розглянемо приклад створення такого файлу 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, 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 ; ) /* 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: c ollapse; 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; ) table (border-collapse: collapse; border-spacing: 0; )

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

Ця стаття - перша з циклу на тему приборкання CSS. Сьогодні ми розглянемо технологію CSS Reset.

Навіщо це потрібно?

Наприклад, ви використовуєте елемент aу документі. Більшість браузерів, як Internet Explorer і Firefox, додають посилання синій колірі підкреслення. Однак уявіть, що за п'ять років хтось вирішив створити новий браузер (назвемо його UltraBrowser). Розробникам браузера не подобався синій колір і дратувало підкреслення, тому вони вирішили виділяти посилання червоним кольоромі напівжирним шрифтом. Саме тому, якщо ви встановите базове значення стилів для елемента a, то він гарантовано буде таким, яким ви хочете його бачити, а не як вважають за краще його відображати розробники UltraBrowser.

Але тепер у нас взагалі немає жодних відступів, зокрема, між окремими параграфами! Що робити? Не брехати і не боятися: нижче від нашого скидання ми опишемо потрібне нам правило. Зробити це можна різними способами: вказати відступ знизу або зверху параграфа, вказати його у відсотках, пікселях або em.

Найголовніше, браузер тепер грає за нашими правилами, а не ми його. Я вирішив зробити так:

* ( margin: 0; padding: 0; ) p ( margin: 5px 0 10px 0; )

У результаті у нас вийшло те, що можна побачити у третьому прикладі.

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

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

1. Less is more - my choice of Reset CSS (Ед Елліот).

2. Ваш CSS Reset – це перше, що має побачити браузер

Так, я розумію, це прозвучало смішно, але це одна з основних помилок розробників від малого до великого. Багато хто просто про це забуває.

Дехто може поставити логічне запитання: чому так відбувається? Відповідь проста: правила, записані нижче за текстом CSS-файлу (і навіть нижче за їх порядком підключення в документі), перезаписують правила, оголошені раніше.

Давайте не сильно відходитимемо від теми і продовжимо. Застосуємо стилі Еріка Мейєра до нашого прикладу, але післяописи наших властивостей, як показано на 4 прикладі . Математики сказали б таке: «Що й потрібно було довести».

3. Використовуйте окремий CSS-документ для CSS Reset

Насправді я дотримуюсь позиції створення одного великого CSS-файлучерез більшу продуктивність подібного підходу. Але в цьому питанні я схильний погодитись з більшістю: CSS Reset слід винести в окремий файл (зазвичай його називають reset.css). У такому разі ви можете використовувати його в різних проектах, не докладаючи при цьому жодних зусиль щодо його відокремлення від інших правил CSS.

4. Намагайтеся уникати використання універсального селектора

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

5. Уникайте надмірних описів властивостей під час використання CSS Reset

Повернемося до CSS Reset від Еріка. Він встановлює значення за замовчуванням для line-height, color та background елемента bodyнаступним чином:

body ( line-height: 1; color: black; background: white; )

1. background-color: #cccccc;
2. color: #996633;
3. Ви хочете по горизонталі повторювати певну фонову картинку.

У цьому випадку немає необхідності створювати новий селектор для опису ваших властивостей - ви можете їх просто увімкнути у CSS Reset. Зробимо це:

body ( line-height: 1; color: #996633; background: #ccc url (tiled-image.gif) repeat-x top left; )

Ерік Мейєр з цього приводу сказав таке: "це не той випадок, коли всім слід використовувати CSS Reset без змін".

За визначенням розробка файлу стилів передбачає завдання властивостям 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 підтримує це значення, тому, ймовірно, значення за промовчанням частіше з'являтиметься у файлах стилів у майбутньому.

Переклад — Черевичка