Many layout designers use the so-called CSS Reset, which serves to eliminate the peculiarities of different browsers. Actually, this style file resets all CSS properties to default. In this article I will demonstrate the code of this file and tell you how to Should I use CSS Reset or not?.

I've seen a lot of different CSS Reset, they are all about the same. You can use this one:

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, font, 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 (
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;
}

I think the reasons for its use are already clear, but why, for example, I don’t use it, like many other layout designers, is worth talking about. Firstly, this extra file, Secondly, extra time for processing, but most importantly, I like the default properties. For example, the same fields in the table. After all, all the default properties were made for a reason, but as the most optimal option for displaying various elements. I assure you, having reset padding for table cells, most likely you will return it in the main file. And it’s far from a fact that the value will differ from what it was by default. So it turns out that we first remove it, and then return it. And along with the first drawbacks (an extra file and extra code), many layout designers do not use CSS Reset.

Anyway, using style reset is not a bad thing, so you can safely use it if you think that simplifying the site’s adaptation to different browsers will really simplify your layout as a whole.

• Translation

This article is the first in a series on the topic of taming CSS. Today we will look at technology CSS Reset.

Why is this necessary?

Each browser sets its own default style values ​​for various HTML elements. Using CSS Reset we can level out this difference to ensure cross-browser compatibility of styles.

For example, you use the element a in your document. Most browsers, like Internet Explorer and Firefox, add a link Blue colour And underlining. However, imagine that five years from now someone decides to create a new browser (let's call it UltraBrowser). The browser developers didn't like the blue color and were annoyed by the underline, so they decided to highlight links in red And bold. It is based on this that if you set the base style value for an element a, then it is guaranteed to be the way you want it to be, and not how the UltraBrowser developers prefer to display it.

But now we have no indents at all, including between individual paragraphs! What to do? Don’t lie and don’t be afraid: below our reset we will describe the rule we need. This can be done in different ways: specify the indent at the bottom or top of the paragraph, specify it in percentage, pixels or em.

Most importantly, the browser now plays by our rules, and not we by its rules. I decided to do it this way:

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

As a result, we got what can be seen in the third example.

You can create your own reset styles if you are solving a specific problem in your project. Despite this, there is no step-by-step guide for creating your own CSS Reset. Rely on your own principles and your own style.

To help you make the right choice, here are a couple more links:

1. Less is more - my choice of Reset CSS (Ed Elliott).

2. Your CSS Reset is the first thing the browser should see

Resetting styles after setting your own styles for elements is the wrong approach. In this case, you should not expect anything good from the browser display. Remember that you should always include CSS Reset first, and then all other styles.

Yes, I understand, it sounded funny, but this is one of the main mistakes of developers, young and old. Many people simply forget about this.

Some may ask a logical question: why is this happening? The answer is simple: rules written lower in the text of the CSS file (and even lower in their order in the document) overwrite the rules declared earlier.

Let's not go too far off topic and continue. Let's apply Eric Meyer's styles to our example, but after descriptions of our properties, as shown in example 4. Mathematicians would say the following: “That’s what we needed to prove.”

3. Use a separate CSS document for CSS Reset

I must (no, I was by no means forced) to mention this advice. Using a separate file for CSS Reset is a common practice supported by a large number of developers.

In fact I take the position of creation one large CSS file due to the higher performance of this approach. But on this issue I am inclined to agree with the majority: CSS Reset should be placed in a separate file (usually called reset.css). In this case, you can use it in different projects without making any effort to separate it from other CSS rules.

4. Try to avoid using a universal selector

Although this concept works, its use is often not desirable due to incompatibility with some browsers (for example, this selector is not processed correctly in Internet Explorer). You should only use this technique for simple, small, static and predictable pages (if you had to do that).

This advice is especially important when you are developing solutions such as CMS themes. You cannot predict in advance how it will be used or how it will be modified. It is better to describe fundamental CSS rules for all elements than to use the unpredictable (albeit smaller) mechanism of universal selectors for this purpose.

5. Avoid Redundant Property Descriptions When Using CSS Reset

Another reason I don't like a separate file for CSS Reset is the potential redundancy of subsequent CSS property declarations. Repeating individual styles of yours among the entire set of CSS files is bad manners and should be avoided. Of course, sometimes we are too lazy to painstakingly go through a set of styles and combine some of them, but we should at least try!

Let's go back to Eric's CSS Reset. It sets default values ​​for the element's line-height, color and background body in the following way:

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

Let's say you already know what the element will look like body:

1. background-color: #cccccc;
2. color: #996633;
3. You want to repeat a certain background image horizontally.

In this case, there is no need to create a new selector to describe your properties - you can simply include them in the CSS Reset. Let's do it:

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

Don't be afraid to modify the CSS Reset itself. Adapt it to yourself, make it work for you. Change, rearrange, remove and add as needed in your specific case.

Eric Meyer said the following about this: “this is not a case where everyone should use CSS Reset without changes.”

Reset CSS(style reset) is a reset using CSS, some parameters of HTML elements that browsers set by default. For example, such elements include paragraphs (tag), which initially have non-zero vertical fields (CSS), bulleted lists (tag), which already have not only fields, but also markers of a certain type (CSS) and so on.

Now let's think about what this CSS reset is for, what can it give us? Well, imagine that you have laid out the pages of your site and have not changed the paragraph margins that browsers offered by default, since their size suited you quite well. But tell me, please, why did you decide that all the browsers in the world that already exist and will appear will create fields of the same size? Moreover, why do you think that the browsers in which you tested your layout will not change the size of these fields in their next versions or remove them altogether? Do you feel what it smells like?

So, by resetting CSS, layout designers simply protect themselves from such misunderstandings, that is, they first reset all “critical” values ​​of CSS properties for elements, and then, as necessary, add them back, but with their own sizes. This way, you can be sure that the site will look the same in all browsers. You can, of course, not reset the styles, but simply set the necessary parameters to the elements as the layout progresses, but there is a risk that something will be missed somewhere and at a certain moment everything will “float”.

Based on the above, one of the features of resetting CSS is that after applying it, many HTML elements lose their usual appearance. And if the loss of margins in paragraphs is something expected for beginners, then, for example, the fact that buttons created using tags or suddenly began to look like regular text is a complete surprise. But this should not confuse you, because the styles are reset for this purpose, so that the layout designer does not forget to specify them again later.

There are a lot of ways to reset styles, and which one you choose depends only on you, but I can tell you one thing - the best reset is the one you created yourself, based on your experience and habits. If you do not have such experience yet, then you can use one of the options proposed below.

Always specify the CSS reset styles at the very beginning of the code, otherwise some of the options may not work due to style priorities, which are set by browsers when processing the page's HTML and CSS code.

Resetting CSS with a Universal Selector

* ( font-family: inherit; /* all elements inherit the font typeface from their parent */ font-style: inherit; /* inherit the style */ font-weight: inherit; /* inherit the boldness */ vertical-align: baseline; /* vertical alignment to the baseline */ font-size: 100%; /* font size 100% */ background: transparent; /* background of all elements is transparent */ border: 0; /* remove borders */ outline: 0; /* remove outlines */ margin: 0; /* remove margins */ padding: 0; /* remove padding */ )

Description of the example

In this example, using universal selector the specified styles are reset immediately for all HTML elements that will be present on the page. As you can see, most of the properties are specified just to be on the safe side, since their values ​​already correspond to those that browsers should set by default according to the CSS specification. But as you already know, in practice all this is completely wrong and if the property is indeed inherited by elements from its parents in all leading browsers, then the same external margins specified by the CSS property are not always initially equal to zero.

But the sizes of frames (CSS) and outlines (CSS) are not equal to zero by default, but according to the specification. However, their thickness was also reset to zero so that the layout designer would not forget to indicate it explicitly where required.

Reset CSS from 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; /* common borders for table cells */ border-spacing: 0; /* reset the distance between cells */ ) caption,th ( text-align: left; /* align text to the left */ ) ol,ul ( list-style: none; /* remove list markers */ ) h1,h2,h3,h4,h5,h6 ( font-size: 100%; font-weight: normal; ) q:before,q :after ( content: ""; /* remove the quotes from the Q tag */ )

Description of the example

The Yahoo company at one time developed its own version of resetting styles. Here the properties of specific elements are already changed, which allows for greater flexibility in controlling their appearance. For example, here bullets have been removed from lists, and quotes have been removed from tags using the CSS property. The advantages of this approach are obvious, but the disadvantages include more voluminous and sometimes redundant code. But no one is stopping you from changing any CSS reset to suit your needs. Let's say you can remove some that you don't need tag selectors or not just remove the quotes, but immediately give them the required appearance.

Resetting CSS by Eric Meyer

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; /* make elements block (for older browsers) */ ) body ( line-height: 1; /* line spacing of text on the page */ ) ol ,ul ( list-style: none; ) blockquote:before,blockquote:after, q:before,q:after ( content: ""; /* Remove the quotes from Q and BLOCKQUOTE */ content: none; /* add for good measure */ ) blockquote,q ( quotes: none; /* another way to remove quotes */ ) table ( border-collapse: collapse; border-spacing: 0; )

Description of the example

Another method of resetting CSS was proposed by Eric Meyer, a well-known web developer in certain circles. Here he has already added a reset of styles for tags from HTML 5, which, by the way, at the time of writing this article are still very poorly supported by modern browsers. But you always need to look into the future, right?

In fact, this article could be continued indefinitely, since, I repeat once again, at a certain moment each layout designer comes to his own reset option or does not use it at all, relying on his own attentiveness.

Each has its own preset rules for the design of web pages and elements on them (user agent stylesheet), which are connected automatically by default. However, when creating a new project, most layout designers add a special Reset CSS file to it, which completely resets CSS styles and allows developers to create from scratch. I will explain why and how this is all done in the current article.

If you look at the preview image for the post, you will see that a regular line is displayed in completely different ways in Safari, Chrome and Firefox. Yes, sometimes the rules are the same, for example, everyone hides the head tag via the display: none! option, but in many cases there are serious differences in how objects are rendered on the page. I suspect that some of your clients may not like it when the final layout looks different from the layout.

Therefore, if you are a beginner web developer, the publication will definitely be useful for your overall development. It is a translation of this note with an overview of the state of affairs in the field of CSS Resets in 2018. I am sure that in 2019 and later all this will still be relevant, because... This topic is already more than 10 years old (since the release of the first such solution).

Why do you need to reset CSS settings?

As you already understood from the introduction, they allow you to eliminate differences between the basic styles of web browsers and bring them to one give or take a standardized look. They are always used at the very beginning before other user developments. Eric Meyer's article on Reset CSS from ten years ago mentions the main reason for this approach, which is still relevant years later:

The problem is that different browsers have their own default settings, and they are not all the same. We think that our code changes the initial design of the page, but this is not entirely true, and with the help of reset files we can make this standard document view more uniform for all programs. Therefore, you will have to spend less time fighting with the basic default settings of Firefox, Chrome, etc.

But now the situation in layout is less controversial?

Yes, indeed, nowadays many parameters in the user agent have become more similar. Almost everywhere, the H1 heading is given a font size of 2em and a horizontal margin of 0.67em. However, these are all relatively new changes, and at a minimum, you need to consider support for older versions of programs where such consistency does not exist.

Additionally, in some cases, depending on the type of CSS nulling (more on that below), we would still need this feature even if we were only looking at modern web browsers.

But we apply our own styles, overriding the base ones?

This is one of the main theses of opponents of this approach - in the end, anyway, certain parameters are replaced by their own style.css, so why add another extra file and reduce ? Despite the fact that this phrase makes sense, the use of a reset is justified by two points:

• First, it helps you write cleaner code. We can divide it into several parts: separately for the design of the web project itself and a set of rules focused on the specifics of specific browsers. This will allow you not to clutter up the main CSS file with all sorts of IE hacks, etc.
• Secondly, all resets weigh very little, and loading them does not require a lot of time.

Types of CSS Reset (you can download from the links in the article)

Since the distant 2004, when the first such developments appeared, there are now quite a lot of methods that differ in complexity and specificity. Essentially, there are 3 goals that resetting CSS styles tries to solve:

1. Fixing bugs in user agent stylesheet.
2. Removal of non-standard original design in Internet browsers.
3. Creation of a universal compatible style base.

There are options that solve all three problems and those that are tailored only to one specific problem.

Correction/error correction

Let's consider the first of the goals stated above. As you already understand, eliminating various shortcomings and jambs of browsers is most relevant for supporting outdated releases. One good example of this situation is when, after the advent of HTML5, the same Internet Explorer 9 did not apply the correct display type to new objects.

Therefore, in solutions like Normalize.css, all errors are taken into account and processed:

/** * Add the correct display in IE. */ main (display: block; )

/** * Add the correct display in IE. */ main ( display: block; )

Since these actions are only needed for older software, it makes sense to use a PostCSS post-processor such as PostCSS Normalize in conjunction with Browserlist to add them only when you need to implement support for specific browsers.

Another example of code from Pure CSS, which is also suitable for modern web programs, is the correction of display elements and the hidden attribute.

[ hidden] ( display: none ! important; // One of the good use cases of !important }

( display: none !important; // One of the good use cases of !important )

Removing peculiar browser styles

This is the second reason for resetting CSS settings. In principle, everyone has their own opinion regarding what design in the user-agent stylesheet is considered “peculiar”. The definition of the author of the original note is quite logical: this is a style that is not a "naked" version of the element's display. For example, adding 2em padding for headings (as many do) is not a bad idea, but why 2em and not 3em or 4em. In this case, the basic option would be the absence of any indentation, that is, zero margin.

The simplest universal approach that removes padding/margins from tags is:

* ( margin: 0 ; padding: 0 ; )

* ( margin: 0; padding: 0; )

This method is too radical, because applies to all objects, even those where you don't expect (in the same input). As an alternative, Eric Meyer Reset CSS is more often used, which removes the margin/padding parameters, borders and font size (to 0 or none) where it is logically justified:

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; )

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; )

Overriding styles

Unlike the previous section, here the main task is not to reset the CSS of certain objects, but to redefine them with their own actual values.

For example, instead of setting all fonts to 1em size and margins = 0, Sanitize.css is set to other values:

/** * 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; )

/** * 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; )

In Bootstrap's Reboot you will find another illustration of the current task. The developers went a little further and specified the fonts and background color for the body.

// Body // // 1. Remove the margin in all browsers. // 2. As a best practice, apply a default `background-color`. // 3. Set an explicit initial text-align value so that we can later use the // the `inherit` value on things like `	`elements. body ( margin: 0 ; // 1 font- family: $font - family- base; font- size: $font - size- base; font- weight: $font - weight- base; line- height: $line - height - base; color: $body - color; text- align: left; // 3 background- color: $body - bg; // 2 )

// Body // // 1. Remove the margin in all browsers. // 2. As a best practice, apply a default `background-color`. // 3. Set an explicit initial text-align value so that we can later use the // the `inherit` value on things like ` `elements. body ( margin: 0; // 1 font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-base; line-height: $line-height -base; color: $body-color; text-align: left; // 3 background-color: $body-bg; // 2 )

Total. What to choose

The original note contains the result of a corresponding survey from

From the author: Website building on the Internet can be like building on quicksand. Browsers do the same thing, but from time to time they make annoyingly unpredictable differences. For example, all browsers have "user agent style sheets" - a default set of CSS styles to make the header look like a header, etc., even before you assign styles to the page1. Of course, each browser engine uses slightly different default sets.

One example was default list styles, where Internet Explorer and Opera's default browser style sheets initially had list padding margin-left: 30pt;, while Firefox and KHTML came with padding-left: 40px;. If you wanted to change the default padding by defining ul (padding-left: 0;), this would produce very different results in browsers.

RESET CSS SETTINGS

To achieve a little stability, some developers reset all margins and padding using a universal selector:

* (margin: 0; padding: 0;)

* ( margin : 0 ; padding : 0 ; )

By defining the list's indentation and starting your stylesheet there, you'll get what you expect. However, using * meant that the default margin and padding crashed for all elements, and as soon as you added a form element, things got really bad.

The purpose of a reset is to reset everything you can... [and] serve as a starting point for your own basic styles- Eric Meyer

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; )

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 ;

It does reset some properties of many (but not all) elements to the plain text equivalent. Since only matching elements are reset, this avoids some problems * (margin: 0; padding: 0;). We can then define styles for these discarded "unstyled" properties, confident that we are building on a stable cross-browser foundation. This style assignment also acts as a signal for the need to consciously set appropriate styles for these elements.

ISSUES RESETING CSS SETTINGS

CSS resets were a lifesaver, but now, especially with the rise of wireframes, they are often used as-is. For example, Eric assumed that other developers would start building sites around his proposed reset styles, overriding them accordingly, and the first version of Meyer Reset temporarily included this rule:

/* remember to define focus styles! */ :focus ( outline: 0; )

Unfortunately, not everyone actually defined focus styles, and Eric removed it from the second version.

Using resets makes you feel like a bit of a pervert. Resetting browser default styles forces you to think about how each element should be displayed, helping to ensure that elements are applied based on semantics rather than default styles. But for elements like i and em there is almost always a default browser style. Other browser default styles, such as the once ridiculously large header text size, have changed and are now fairly tolerable by default. The problems start when someone wants to post-pass a reset HTML element with only the assigned "unstyled" reset styles.

For me, the biggest problem with resets is inheritance, which leads to spam in browser tools. When trying to track down a deeply nested element CSS issue in someone else's code, this won't help:

CSS reset rules repeated due to inheritance

NORMALIZE.CSS

Nicholas Gallagher and Jonathan Neal took a different approach with Normalize.css, "a small CSS file that ensures better cross-browser consistency in the default styles of HTML elements." As with CSS resets, it gives us a strong cross-browser starting point - the main reason for using a reset in the first place - but the two approaches are philosophically different.

CSS resets override user agent styles and return many elements to their "unstyled" state, some level ground on which to safely build. However, we then need to style most of the elements before we can build with them. Instead, Normalize.css only addresses user agent style inconsistencies, choosing the most appropriate default settings to make the difference. Here too we get a cross-browser secure foundation, but one that includes normalized user agent styles as ready-to-use basic building blocks. It's basically something like an idealized cross-browser version of the default CSS 2.1 stylesheet. In both cases, we then have to add our own dominant styles to create the image, but because the default browser settings in Normalize.css remain, there are fewer styles to add overall.

Because the changes in Normalize.css are more targeted, there is no cascade of inheritance of the rewritten rules in your browser development tools. Here's a simple ul:, destyled with Meyer Reset and Normalize.css versions 1 and 2:

"Unstyled" element of an unordered list

Applying Meyer Reset

Apply Normalize.css v1

Applying Normalize.css v2

There's a clear difference in philosophy when the Meyer Reset example appears as a couple of lines of plain text with no margins, indentation, or bullets, whereas the Normalize.css examples look like default styles. The difference in the styles applied to this ul is also easily noticeable.

However, these are not all the styles applied to the ul. For comparison, here is the same “unstyled” screenshot, but with visible user agent styles, in Firefox 21 and Opera Next 15.