Resetting indents in css. Resetting CSS styles, examples of working solutions. CSS Reset or reset to default settings

In this article we will talk about resetting styles and look at an example of creating such a reset.css file.

The idea of ​​throwing styles appeared about 10 years ago. Which actually consisted of making the page look the same in all browsers using a small set of CSS styles. Of course, this doesn’t always work out, but some things can be corrected - for example, border is not clear where it comes from in some versions of IE. Or a blue outline (outline) near the fields.

It's no secret to any front-end developer that browsers are very picky and each processes HTML elements in their own way, adding their own standard styles.

Since this idea has been around for a long time, it is not surprising that there are already ready-made reset files, usually called reset.css, and connected to all projects.

Why in separate file? Yes, simply because it’s more convenient to transfer them from project to 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, 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: collapse; border-spacing: 0; )

This is just a standard for this file adopted by a certain circle of web developers.

I advise you, whether you are an experienced programmer or just starting out, to develop your own reset file. You can take the standard described above as a basis, supplement it with your own 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; padding:0; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border-collapse: collapse; border-spacing: 0; )

You can copy any of the above code for personal use, but if you use it in your articles, please provide a link to the source.

CSS Default CSS for HTML Elements (2)

It's different for each browser, so:

• Firefox (Gecko):. Or go to resource://gre-resources/ and look at html.css.
• Chrome/Safari (WebKit):
  • Chrome (Blink):
• Internet Explorer(Trident), more early versions: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Where can I find the CSS for the browser's default CSS?

Many HTML elements have some default CSS properties which can sometimes lead to unknown/unwanted behavior. For example, input fields display differently in different browsers. I'm looking for a place that covers the new CSS3 properties and the new HTML5 elements.

I've seen in other (much older) questions (such as default CSS stylesheets in browsers) that suggest a CSS reset solution. This solution is sometimes not needed, often I would like to preserve some basic properties (like highlighting input fields in Chrome). In other words: I don't want to get rid of things just because I don't know what they do. .

So, is there a site that can give me all of this information (or perhaps most)?

A GitHub repository for all W3C HTML specifications and default CSS stylesheets for developers can be found

1.

2. Standard styles for Internet Explorer

3.

4. Standard styles for Opera

5. Standard styles for HTML4 (W3C specification)

6. Standard styles for HTML5 (W3C specification)

Example, according to the default W3C HTML4 specification:

Html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre ( display: block; unicode-bidi: embed ) li ( display: list-item ) head ( display: none ) table ( display: table ) tr ( display: table-row ) thead ( display: table-header- group ) tbody ( display: table-row-group ) tfoot ( display: table-footer-group ) col ( display: table-column ) colgroup ( display: table-column-group ) td, th ( display: table-cell ) caption (display: table-caption) th (font-weight: bolder; text-align: center) caption (text-align: center) body (margin: 8px) h1 (font-size: 2em; margin: .67em 0) h2 ( font-size: 1.5em; margin: .75em 0 ) h3 ( font-size: 1.17em; margin: .83em 0 ) h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu ( margin: 1.12em 0 ) h5 ( font-size: .83em; margin: 1.5em 0 ) h6 ( font-size: .75em; margin: 1.67em 0 ) h1, h2, h3, h4, h5, h6, b, strong (font-weight: bolder) blockquote (margin-left: 40px; margin-right: 40px ) i, cite, em, var, address ( font-style: italic ) pre, tt, code, kbd, samp ( font-family: monospace ) pre ( white-space: pre ) button, textarea, input, select ( display: inline-block ) big ( font-size: 1.17em ) small, sub, sup ( font-size: .83em ) sub ( vertical-align: sub ) sup ( vertical-align: super ) table ( border-spacing: 2px; ) thead, tbody, tfoot ( vertical-align: middle ) td, th, tr ( vertical-align: inherit ) s, strike, del ( text-decoration: line-through ) hr ( border: 1px inset ) ol, ul, dir, menu, dd ( margin-left: 40px ) ol ( list-style-type: decimal ) ol ul, ul ol, ul ul, ol ol ( margin-top: 0; margin-bottom: 0 ) u, ins ( text-decoration: underline ) br:before ( content: "\A"; white-space: pre-line ) center ( text-align: center ) :link, :visited ( text-decoration: underline ) :focus ( outline: thin dotted invert ) /* Begin bidirectionality settings (do not change) */ BDO ( direction: ltr; unicode-bidi: bidi-override ) BDO ( direction: rtl; unicode-bidi: bidi-override ) * ( direction: ltr; unicode-bidi: embed ) * ( direction: rtl; unicode-bidi: embed ) @media print ( h1 ( page-break-before: always ) h1, h2, h3, h4, h5, h6 ( page-break-after: avoid ) ul, ol, dl ( page-break-before: avoid ) )

By definition, developing a style file involves setting the properties CSS new values. Complex style files eventually grow to the point where CSS values need to be removed completely, i.e., reset to their default values. In some cases, these default values ​​are well known and easy to remember, but this is not true for all properties. Fortunately, modern CSS features provide us with an easy way to reset property values.

Reset

Let's assume that you set the images to float to the left:

Img ( float : left ; )

After that, images in special cases, such as those with a .recall class, need to be set to not bubbling, but you can't remember how exactly this property is written.

In other words, you know that the default is no float, but you don't remember how to set no float. Instead of trying to figure out how to write this, you can simply add the following line to your style sheet:

Img.recall ( float : initial; )

There is a common misconception that a default value resets the value of a property to the first value that was set for that property in the stylesheet file, or to the default value in the CSS spec. But both of these options are wrong: applying a default value resets the property to its default value for the user's browser.

In most cases the default value will be the same or similar for all browsers. This value is especially useful in the following situations:

Examples of using

The default value can be used to reset color settings. The default text color in most browsers is black, and the CSS code below will reset the color settings for header elements:

Body ( color : hsl(333 , 50 % , 25 % ) ; ) h1, h2, h3 ( color : initial; )

Please note that black will not necessarily be the default color, as this value depends on the browsers and ultimately the users themselves. Likewise the following entry:

Aside ( font-family : initial; )

will give different results in different browsers, and the output font will not necessarily be Times New Roman, since different browsers There may be different default fonts.

There are several other uses for the default value:

Resetting the z-index value of an element to its default value.

Reset padding and transform values ​​to their default values.

Restrictions on use

One of the main reasons for the relatively rare use of the CSS default is the complete lack of support for it in Internet browser Explorer, although other browsers have supported it for many years. However, the Edge browser supports this value, so it's likely that the default value will appear more frequently in style files in the future.

Translation – Desk

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

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

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 default styles 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 secure cross-browser 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.

By default, the browser sets its own settings for some properties in css. But the trouble here is that there are many web browsers and each can set their own rules. What solution? Find out how to reset the default css settings and overwrite them with your own. But this article will be devoted to how this can be done.

CSS Reset or reset to default settings

CSS Reset is a set of styles that reset some parameters, installed by browser default. Each web developer writes this file for himself individually, and some take ready-made solution. This is where I propose to start. There are many good options style reset, but my favorite was this one compiled by Eric Meyer:

/* 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, 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: collapse;
border-spacing: 0;
}

I'll comment a little on the code. Firstly, the internal and margins for all the necessary elements. Secondly, there is support for HTML5 elements. They have a rule set that will allow them to display correctly in some browser versions. Thirdly, typical settings for convenient work with tables (spaces between cells and double borders). The standard bullets for lists and quotation marks for quotations have also been reset. These parts of the code are worth removing if you want to use the default styling.

How to reset css settings yourself

If you have a more or less normal command of CSS, you can try to write a couple of rules yourself. For example:

*{
margin: 0;
padding: 0;
}

This is perhaps the most simple command. The asterisk in this case represents all selectors, so the styles will be applied to all elements on the web page, resetting their padding and padding. You might be surprised, but these simple lines of code can be enough to provide cross-browser compatibility in many web browsers. All other rules can be added at your own discretion. I recommend adding display: block for all HTML5 tags.

Where to place css reset rules

I offered you the code above, but where to insert it? There are two options here:

• Insert it at the very beginning of the main style sheet on your site
• Create a new css file on the server and save the code into it, then save it and connect it to all pages BEFORE main table style.css .

For more information about connecting a css style sheet to html, see

In my opinion, the second option is worse in that it degrades performance by adding one extra file. On the other hand, this will make it easier for you to manage these rules. But for the sake of performance, I recommend using the first option.

Resetting settings is one of the measures to ensure cross-browser compatibility of the site, that is, the same display in different web browsers. Of course, these are not all measures that will ensure the same appearance, I will write about the rest later on this blog. Subscribe if interested.