Reset or normalize ?, Resetnormalize

Reset or normalize ?, Resetnormalize

As we all know, browsers will create basic styles for us. For example, We do not need to write any css style for it, it is displayed in the browser, just know it is a big title at a glance. The problem is that the default effects vary between different browsers, so the style is very beautiful in Chrome, the entire page may become a mess when you go to Firefox (of course there may be other reasons ).

For example<ul>Labelmargin-leftThe value is30pt, But inFirefox,Chrome,SafariLower<ul>The default attribute ispadding-left:40px. Therefore, we need to consider browser compatibility.

Reset

At this time, someone proposed it. Isn't it very easy? It's done with two sentences of code.

* {    margin: 0;    padding: 0;}

Indeed, these two solutions can be used.paddingAndmarginAnd now many websites in China are doing this, but doing so will bring a lot of pain.

• This is easy to understand. Wildcards are used here.*No matter what elements, you must set them based on the default settings.marginAndpadding0. (Note thatForce)
• The whole page becomes very crowded, without the default breathing interval of the browser, the page will become very crowded, and the elements will be crowded together, which is very difficult to see.
• Loading time... I found this picture on the Internet.
• Cool = _ =

Based on the above reasons, some people have proposed a strong version of the solution. Reset.css.

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

Reset.css does help a lot. It resets most elements. The wildcard character does not exist.

However, handsome people will think that the Reset method is still too stiff. Another big problem is that when you write a div, the browser will generate a large string of duplicate code, especially when manydivThis is not conducive to debugging when nesting.

# Normalize

Reset tends to set most elements to a State without adding styles. However, this causes us to rewrite most styles without styles when they are used... Normalize.css tends to overwrite the default style of most browsers. No matter which method you use, we eventually need to write our own code, but Normalize will be less, and will not cause a large number of repeated code overwrites.

Someone may ask, but Normalize is still unsolved.<ul>Ah, (amount... The above example only shows that the browser is different.) This is not a concern of Normalize. It does not mean to forcibly modify the default style, but thinks<ul>There should be left spacing, which is no big problem. You can customize it later. So Normalize creates a proper wheel and you have to build your own car.

For example

/** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */audio,canvas,progress,video {  display: inline-block; /* 1 */  vertical-align: baseline; /* 2 */}

The comments are clearly written (one of the advantages is that other advantages can be viewed and recommended), which is to fix the similarities and differences between browsers. There will be pitfalls in a browser, so it will be much safer to fix them here and write your own style sheet.

Normalize.css is now widely used. Twitter Bootstrap, HTML5 Boilerplate, GOV. UK, Rdio, CSS Tricks, and so on.

Of course, the final use of Normalize or Reset depends on the specific project and personal preferences.
Finally, we hope there will be no browser compatibility problems in the future...

Recommended reading

• About Normalize.css
• Hello-Normalize-css
• CSS: reset or normalize?

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.