• Transfer

This article is the first of the cycle on the topic of css taming. Today we will look at technology CSS Reset..

Why do you need it?

Each browser sets its default styles for various HTML elements. With the help of CSS Reset, we can level this difference to ensure styles cross browser.

For example, you use an item a. In your document. Most browsers like Internet Explorer. and Firefox add link blue colour and sharp. However, imagine that in five years someone decided to create new browser (Let's call it UltraBrowser). Browser developers did not like blue and annoyed emphasis, so they decided to allocate links red and bold font. It is based on this if you set the basic value of the styles for the item a., it will be guaranteed to be as you want to see it, and not as preferred to display the developers of UltraBrowser.

But now we have no indents at all, including between individual paragraphs! What to do? Do not lie and not be afraid: Below our discharge we describe the rule we need. Make it can be done different ways: Specify an indent from below or on top of the paragraph, specify it in percent, pixels or in EM.

The most important thing, the browser now plays according to our rules, and not we according to it. I decided to make in this way:

* (Margin: 0; Padding: 0;) P (margin: 5px 0 10px 0;)

As a result, we had what could be seen in the third example.

You can create your own styles for reset, if you solve some particular task in your project. Despite this, there is no step by step leadership By creating your own CSS Reset. Recommend to your own principles and your own style.

To help you make a choice, I will give a couple more links:

1. Less Is More - My Choice of Reset CSS (Ed Elliot).

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

Reset styles after installing your own styles for items is an incorrect approach. In this case, nothing good to wait for the browser display. Remember that you first always connect CSS Reset, and then all other styles.

Yes, I understand it was ridiculous, but this is one of the major mistakes of developers from Mala to Great. Many just forget about it.

Some may ask a logical question: why is it going on? The answer is simple: the rules recorded below the CSS file text (and even lower by their connection in document), overwrite the rules declared earlier.

Let's not move greatly from the topic and continue. Apply Eric Meyer styles to our example, but after Descriptions of our properties, as shown in 4 examples. Mathematics would say the following: "What was required to prove."

3. Use a separate CSS document for CSS Reset

I have to (no, they did not forced me) to mention this advice. Using a separate file for CSS Reset is a common practice that a large number of developers support.

In fact, I adhere to the position of creation one big CSS file Due to greater performance of this approach. BUT B. this issue I tend to agree with most: CSS RESET should be taken into a separate file (usually called reset.css). In this case, you can use it in various projects without making any effort to branch from other CSS rules.

4. Try to avoid using a universal selector

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

This advice is especially important when you develop solutions such as CMS themes. You can not predict in advance how it will be used and how it will be modified. It is better to describe the fundamental CSS rules for all items than to use for this unpredictable (even a smaller volume) mechanism of universal selectors.

5. Avoid redundant properties when using CSS Reset

Another reason why I do not like a separate file for CSS Reset is the potential redundancy of subsequent declarations of CSS properties. Repetition of individuals of your styles among the whole set of CSS files is a movietone and should be avoided. Of course, sometimes we are too lazy to keep up with the style of styles and combine some of them, but at least try!

Let's return to CSS Reset from Eric. It sets default values \u200b\u200bfor Line-Height, Color and Background item body. in the following way:

Body (Line HEIGHT: 1; Color: Black; Background: White;)

Suppose you already know how the element will look like body.:

1. background-Color: #CCCCCC;
2. color: # 996633;
3. You want horizontally to repeat a specific background picture.

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

Body (Line-Height: 1; Color: # 996633; Background: #CCC URL (Tiled-image.gif) Repeat-x Top Left;)

Do not be afraid to modify the CSS Reset itself. Set it up for yourself, make it work on yourself. Change, rebuild, remove and add it as you need in your particular case.

Eric Meyer said about this: "This is not the case when everyone should use CSS Reset without change."

Reset CSS. (Reset styles) is zeroing with CSS, some of the parameters of HTML elements that browsers are installed by default. For example, these elements include paragraphs (tag), which initially present nonzero vertical fields (CSS), marked lists (tag) that have no only fields, but also a certain type markers (CSS) and so on.

Now let's think for what you need this reset CSS, what can he give us? Well, imagine that you glorified the pages of your site and at the same time have not changed the fields of paragraphs that browsers offered by default, since their size has completely arranged. But tell me, please, and where did you decide that all browsers of the world, who already exist and still appear, will create fields of the same size? Moreover, why do you think that browsers in which you tested your layout will not change in their next versions The size of these fields is not completely removed at all? Feel what smells?

So, throwing out CSS, the verses are simply confined from such misunderstandings, that is, they first reset all the "critical" values \u200b\u200bof the CSS properties, and then they add it back, but with their own sizes. Thus, you can be sure that in all browsers the site will look equally. You can certainly not reset the styles, but simply to set the layout the necessary parameters Elements, but there is a risk that somewhere something will be missed and at a certain point everything "swims".

Based on the foregoing, one of the features of the CSS relief is that after its use, many HTML elements lose their usual appearance. And if the loss of fields in paragraphs is for beginners, something expected for beginners, then for example, the fact that the buttons created using tags or suddenly became externally similar to the usual text - is a complete surprise. But this should not be embarrassed, because for that styles and are reset, so that the pedigreer then did not forget to specify them in a new one.

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

Always specify styles to reset CSS at the very beginning of the code, otherwise some of the parameters may not work because style prioritieswhich are installed browsers when processing the HTML page and CSS code.

Reset CSS with a universal selector

* (Font-Family: Inherit; / * All elements inherit from their parent font headset * / font-style: inherit; / * Inherit the design * / font-weight: inherit; / * Inherit the fatty * / vertical-align: baseline; / * Vertical baseline alignment * / font-size: 100%; / * Font size 100% * / background: transparent; / * Background of all elements transparent * / border: 0; / * Remove the frame * / outline: 0; / * Remove contours * / margin: 0; / * Remove the fields * / Padding: 0; / * Remove indents * /)

Description of the example

In this example with universal selector Specified styles are reset immediately at all HTML elements that will be present on the page. As you can see, most properties are specified precisely for the safety net, as their values \u200b\u200band so that browsers must substitute by default according to the CSS specification. But as you already know, in practice, all this is completely different and if the property is indeed inherited by elements from its parents in all leading browsers, the same external fields specified by the CSS property are not always initially equal to zero.

But the sizes of the framework (CSS) and contours (CSS) are not zero by default, but already according to the specification. However, their thickness was reset, so that the gauge would not forget to specify it clearly where it would be necessary.

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 tables of tables * / border-spacing: 0; / * zeroing distance between cells * /) Caption, th (text-align: left; / * text alignment to the left edge * / ) ol, ul (list-style: none; / * Remove markers of lists * /) H1, H2, H3, H4, H5, H6 (font-size: 100%; font-weight: normal;) Q: Before, q : After (CONTENT: ""; / * We cancel the quotes from the tag q * /)

Description of the example

Yahu at one time has developed its own eye reset version. Here, the properties of specific elements are already changing, which makes it possible to achieve greater flexibility in controlling them. external species. For example, markers are removed from lists, and the tag is quotes using the CSS property. The advantages of this approach are obvious, but the minuses include more voluminous and sometimes redundant code. But no one bothers you to change any CSS reset to your needs. Suppose you can delete some unnecessary to you. tag selectors Or not just remove quotes, but immediately ask them the necessary appearance.

Reset CSS from 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: / * We make block items (for old browsers) * /) Body (Line-Height: 1; / * line spacing text on page * /) OL, UL (List-Style: None;) Blockquote: Before, Blockquote: After, Q: Before, Q: After (Content: ""; / * Remove quotes at Q and Blockquote * / Content: None; / * Add for loyalty * /) Blockquote, Q (Quotes: None; / * Another way to remove quotes * /) Table (Border Collapse: Collapse; Border-Spacing: 0;)

Description of the example

The next way to reset CSS suggested Eric Meyer (Eric Meyer) - a web developer known 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, and themselves are still very poorly supported modern browsers. But you always need to look in perspective, right?

In fact, this article could continue to infinity, since, I repeat once again, at a certain point, each gauge comes to his version of discharge or does not use it at all, relying on its attentiveness.

Many verters are used so-called CSS Reset.serving to eliminate the features of different browsers. Actually, this file Styles resets all CSS default properties. In this article, I will demonstrate the code of this file and tell it is worth using CSS Reset or not.

I have seen many different CSS Reset.All of them are about the same. You can use this:

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 that its use is due to and so understandable, but why, for example, I do not use, like many other vertickers, it is worth telling about it. First, it is an extra file, Secondly, understanding For processing, but most importantly - I like the default properties. For example, the same fields at the table. After all, all the default properties did not just like it, but as the most optimal option Display of various elements. I assure you, reset padding. The cells of the table, most likely, you will return it in the main file. And far from the fact that the value will differ from what was the default. So it turns out that we clean it first, and then the same return. And along with the first shortcomings (an extra file and extra code), many vertellers are not used at all. CSS Reset..

Anyway, using styling discharge is not bad, so you can safely use it if you think that the simplification of the site's adaptation under various browsers will really simplify you on the whole.

Everyone has their pre-installed rules for designing web pages and elements on them (User Agent StyleSheet) connected automatically by default. Nevertheless, most of the vestors when creating a new project adds a special file Reset. CSS, which makes a full reset of CSS styles and allows developers to create with "pure sheet". Why and how it is all done - the sieve in the current article.

If you look at the picture-preview of the post, you will see that the usual line in Safari, Chrome and Firefox is displayed absolutely. in different ways. Yes, sometimes the rules in them coincide, for example, everyone hide the Head tag through the Display: None option, however, in many cases there are serious differences when rendering objects on the page. I suspect that some of your customers may not like when the final version of the layout looks not like on the layout.

Therefore, if you are a novice web developer, the publication will be unambiguously useful for general development. It is a translation of this note with an overview of the CSS Resets Conditions in 2018. I am sure that in 2019 and later all this will still be relevant, because This topic has already been more than 10 years (from the moment of release of the first similar solution).

Why do you need a reset CSS settings

As you already understood from the accession, they allow you to eliminate the extension between the basic styles of web browsers and lead them to one plus-minus standardized mind. Always apply at the very beginning to other custom developments. In the article Erik Meyer about RESET CSS for ten years ago, the main reason for this approach is mentioned, which years still relevant:

The problem lies in the fact that different browsers have their default settings, and all of them are not the same. We think that our code changes the initial page design, but this is not entirely so, and with the help of reset files we can make this standard type of document more monasses for all programs. Therefore, there will be less time to spend on combating basic installations Firefox, Chrome, etc. by default.

But now the situation is less contrary to the layout?

Yes, indeed, in our time, many parameters in User Agent have become more similar. Almost everywhere the header H1 sets the font size 2em and the horizontal indent 0.67em. However, these are all relatively new changes, and at a minimum, you need to take into account the support of old versions of programs, where there is no such consistency.

In addition, in some cases, depending on the type of CSS zeroing (about this below), this chip is still useful to us even if only modern web browsers were considered.

But do we apply our styles, overriding the basic?

This approach is one of the main abstracts of the opponents of this approach - in the end, anyway, those or other parameters are replaced with their own style.css, so why add another extra file and reduce? Despite the fact that in this phrase it makes sense, the use of reset is justified by two moments:

• First, it helps to write a cleaner code. We will be able to divide it into several parts: separately for the design of the web project and a set of rules oriented under the specifics of specific browsers. This is not to climb the main CSS file with all sorts of IE hacks, etc.
• Secondly, all resets weigh very little, and their download does not require large number time.

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

Starting from the distant 2004, when the first such developments appeared, now there are quite many methods that differ in difficulty and their specificity. In fact, there are 3 goals who are trying to solve the reset of CSS styles:

1. Fix error in User Agent StyleSheet.
2. Cancellation of non-standard original design in Internet browsers.
3. Creating a universal compatible style base.

There are options that decide all three tasks and those that are sharpened only under one particular problem.

Correction / Error Correction

Consider the first of the goals voiced above. As you already understood, the elimination of different shortcomings and shoals of browsers is most relevant to support obsolete releases. One of the good examples of such a situation - when after the appearance of HTML5 the same Internet Explorer 9 did not apply the correct type of Display to new objects.

Therefore, in solutions by type 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 needed only for the old software, it makes sense to use Postcss postprocessor such as Postcss Normalize together with the browserlist in order to add them only when you need to implement the support of certain browsers.

Another example of code from PURE CSS, which is suitable including modern web programs - fix Display elements and attribute Hidden.

[Hidden] (Display: None! Important; // One of the Good Use Cases Of! Important }

(Display: None! Important; // One of the Good Use Cases Of! Important)

Remove the peculiar styles of browsers

This is the second reason for resetting CSS settings. In principle, each of their opinions on what execution in User-Agent StyleSheet is considered "peculiar." The author's definition of the original note is quite logical: this is a style that is not a "naked" version of the display of the element.. For example, adding indents for headlines in 2EM (how many do it), the idea is not bad, but why it is 2EM, and not 3EM or not 4EM. In this case, the basic option would be the absence of any incidence, that is, zero margin.

Simplest universal approachremoving indents / field tags:

* (Margin: 0; Padding: 0;)

* (Margin: 0; Padding: 0;)

This method is too radical, because Applies to all objects, even where you do not expect (in the same Input). Alternatively, Eric Meyer Reset CSS is often used, which removes the parameters of margin / padding, borders and font size (in 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;)

Override styles

In contrast to the previous section, here the main task is not to reset CSS from certain objects, but override them with their own current values.

For example, instead of setting all the size of 1EM and margins \u003d 0 in Sanitize.css, other values \u200b\u200bare set:

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

Bootstrap's reboot will find another illustration of the current task. The developers went a little further and prescribed fonts and background color for 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-face-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

In the original note there is the result of the corresponding survey from

In this article we will talk about resetting styles and consider an example of creating such a Reset.css file.

The idea of \u200b\u200bthrowing styles appeared about 10 years ago. Which actually concluded that with the help of a small set of CSS styles, brought the view of the page in all browsers to the same. Of course it does not always work, but some moments can be corrected - for example, Border does not understand where the IE taking place in some versions. Or Blue Stroke (Outline) in the fields.

Not for one front-end developer is no secret that browsers are very picky and each processes hTML elements In its own way, adding your standard styles.

Since this ideas caught fire for a long time, it is not surprising that there is already ready files Reset, usually called reset.css, and connect to all projects.

Why in separate file? Yes, just because it is more convenient to transfer them from the project to the project.

Here is an example reset.css from 2007:

/ * http://meyerweb.com/eric/Tools/css/Reset/ v2.0 | 20110126 License: None (Public Domain) * / 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, 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: Afterter, Q: Before, Q: After (Content: ""; Content: None;) Table (Border- COLLAPSE: C. OLLAPSE; Border-Spacing: 0; )

This is just the standard of this file taken by a certain circle of web developers.

I advise you, whether you are an experienced programmer or just beginners to develop your reset file. As a basis, you can take the standard described above, supplement it with its selectors or change existing ones. Here is an example of such a file that I developed for myself:

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: Afterter, Q: Before, Q: After (Content: ""; Content: None;) Table (Border Collapse: Collapse; Border-Spacing: 0;)

You can kip any of the above code for personal use, but if you use it in your articles - put a link to the source.