Сброс стилей (CSS reset)
Цель сброса стилей состоит в том, чтобы уменьшить разность отступов, размеров шрифтов заголовков и т.д. заданных по умолчанию в разных браузерах.
Eric Meyer’s CSS Reset
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; >html < height: 100%; >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
Сжатая версия:
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 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section html body ol,ul blockquote,q blockquote:before,blockquote:after,q:before,q:after table
Normalize.css
Более расширенный сброс стилей (присутствуют стили для IE, iOS, Safari).
https://necolas.github.io/normalize.css
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html < line-height: 1.15; -webkit-text-size-adjust: 100%; >body < margin: 0; >main < display: block; >h1 < font-size: 2em; margin: 0.67em 0; >hr < box-sizing: content-box; height: 0; overflow: visible; >pre < font-family: monospace, monospace; font-size: 1em; >a < background-color: transparent; >abbr[title] < border-bottom: none; text-decoration: underline; text-decoration: underline dotted; >b,strong < font-weight: bolder; >code,kbd,samp < font-family: monospace, monospace; font-size: 1em; >small < font-size: 80%; >sub,sup < font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; >sub < bottom: -0.25em; >sup < top: -0.5em; >img < border-style: none; >button,input,optgroup,select,textarea < font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; >button,input < overflow: visible; >button,select < text-transform: none; >button,[type="button"],[type="reset"],[type="submit"] < -webkit-appearance: button; >button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner < border-style: none; padding: 0; >button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring < outline: 1px dotted ButtonText; >fieldset < padding: 0.35em 0.75em 0.625em; >legend < box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; >progress < vertical-align: baseline; >textarea < overflow: auto; >[type="checkbox"],[type="radio"] < box-sizing: border-box; padding: 0; >[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button < height: auto; >[type="search"] < -webkit-appearance: textfield; outline-offset: -2px; >[type="search"]::-webkit-search-decoration < -webkit-appearance: none; >::-webkit-file-upload-button < -webkit-appearance: button; font: inherit; >details < display: block; >summary < display: list-item; >template < display: none; >[hidden]
Сжатая версия:
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ html body article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary audio,canvas,progress,video audio:not([controls]) [hidden],template a a:active,a:hover abbr[title] b,strong dfn h1 mark small sub,sup sup sub img svg:not(:root) figure hr pre code,kbd,pre,samp button,input,optgroup,select,textarea button button,select button,html input[type="button"],input[type="reset"],input[type="submit"] button[disabled],html input[disabled] button::-moz-focus-inner,input::-moz-focus-inner input input[type="checkbox"],input[type="radio"] input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button input[type="search"] input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration fieldset legend textarea optgroup table td,th
A simple CSS-Reset
Sometimes, when people talk about CSS resets or when I read something about known CSS reset snippets, I always catch myself thinking “Why is that a topic? Wouldn’t ever need that!”.
But if I’m honest, of course I use a CSS reset too. The thing is, it’s so very tiny and simple that I thought it’s not a topic and nobody would give it a name, publish it and write an article about it …
… well … I wouldn’t have … until now! In the meanwhile, I think it should be a topic because it’s so tiny and simple.
Keep Things Simple and Relevant
The tiny reset is actually very common in different variations but seldom mentioned. I guess because of its incredible simplicity.
The most relevant browser differences are space and font size. Therefore, we reset them first for all elements equally. With margin: 0 and padding: 0 we simply remove all spaces.
The font-size we can set to 1em or 100% , so each element inherits the font-size always from its parent. Because the browser default font size is usually 16 pixels, all elements on the website would inherit that value and would display text always in a 16 pixel size.
But there is a second font-size definition, that is passed to the html element. Its value could be .625em or 62.5% . To see what that would be in pixels, you only need to calculate 16 * 0.625 and you’ll get 10 . Because the html element is the root element, all other elements will inherit this value and will display text now always in a 10 pixel size. That’s pretty small, but there is a good reason for it. I’ll go for it later.
Lastly, the font-family: inherit definition ensures, that everywhere the same font family is used, especially in form elements, where usually font-family not inherits. This is the only definition, that is not always needed, but easily forgotten.
There are other browser differences, but I think it’s good to keep things simple and relevant. Moreover, differences that are not covered with this snippet, usually need to be styled anyway. So a reset would be redundant. If an additional reset makes sense for a specific project, just add it for that project.
Performance of the Universal Selector
The CSS universal selector ( * ) has a bad reputation because of its performance and it’s a common opinion that it is a bad practice to use it at all. But that’s only partially justified. In fact it depends on the use case. For example .anyClassName * < … >would indeed be really slow. Just don’t use it in that way. But if the universal selector stands alone ( * < … >), its actually really fast, so let’s use it.
Thanks to Harry Roberts at this point, from whom I learned this.
10 Pixel Font Size
So, why should it be useful to have a 10 pixel font size? If you already use relative units, which you should do because of accessibility reasons, the answer is pretty simple. It’s just easier to calculate with it. If you have a 10 pixel basis and you want to have a paragraph with a 24 pixel font size, you only need to write p < font-size: 240%; >or p < font-size: 2.4em; >. As you can see it’s only a point shifting, which makes the usage of relative units much easier.
That’s not only useful for font sizes, but for all size specifications, such as section < padding: 2em; >, which results in a padding of 20 pixels for section elements.
Just note that the point shifting technique only works if no parent element already got a font size definition that differs from 10 pixels. So, just define the font size always for the lower most element.
Thanks to Daniela Kerschbaumer, from whom I learned this technique.
Does this article help you?
If you want to help me too, just send me the amount this article is worth to you. It helps me move on and understand what people want to read the most 😉
Conclusion
As you can see, already a very simple CSS reset snippet could be really useful. But keep things relevant, always adjust the snippet to your needs.
So, now I published my very own CSS reset, wrote an article about it, and now it’s time to give it a name … to make clear that it always should be adapted, let’s call it the eHtmlu reset basis 😊
One of my next articles will cover a more modern and advanced technique to use relative units. So keep in touch.
If I was asked to recommend an other reset CSS I would name Eric Meyer’s or normalize.css, depending on the needs and preferences. While Eric Meyer’s erase all styles, normalize.css preserves useful browser defaults. But whatever you choose, I would always recommend to adapt them to your specific needs.
Сброс CSS стилей. Reset CSS
HTML, CSS
При HTML CSS верстке сайта, вы обязательно столкнетесь с тем чтобы изменять или обнулять CSS свойства элементов. Есть разные подходы того как это можно реализовывать.
Первый подход делать полный сброс стилей. Первым решением стал файл rest.css от mayerweb.
Второй подход, вместо полного сброса — приводить все единому виду. Первым популярным решением стал файл normalize.css от necolas.
Что выбрать, полный сброс или нормализацию? Все зависит от ваших задач. Взвесив все за и против, попробовав разные варианты, я пришел к решению полного сброса стилей. Это гораздо удобнее и экономит время при переопределении новых свойств.
За годы практики я выработал собственный вариант файла reset.css который рекомендую и использую сам. Ниже вы сможете увидеть его код. Возможно со временем он будет изменяться и правится. Но на текущем этапе это отличное решение для сброса стилей для HTML CSS верстки нового проекта.
Файл rest.css версия от ВебКадеми:
(обновлено 17.05.2023)
/* Reset and base styles */ * < padding: 0px; margin: 0px; border: none; >*, *::before, *::after < box-sizing: border-box; >/* Links */ a, a:link, a:visited < text-decoration: none; >a:hover < text-decoration: none; >/* Common */ aside, nav, footer, header, section, main < display: block; >h1, h2, h3, h4, h5, h6, p < font-size: inherit; font-weight: inherit; >ul, ul li < list-style: none; >img < vertical-align: top; >img, svg < max-width: 100%; height: auto; >address < font-style: normal; >/* Form */ input, textarea, button, select < font-family: inherit; font-size: inherit; color: inherit; background-color: transparent; >input::-ms-clear < display: none; >button, input[type=»submit»] < display: inline-block; box-shadow: none; background-color: transparent; background: none; cursor: pointer; >input:focus, input:active, button:focus, button:active < outline: none; >button::-moz-focus-inner < padding: 0; border: 0; >label < cursor: pointer; >legend