Foreword
Recently, I have read the old historical data and sorted out the controversial CSS Reset problem. However, it seems that more than ten years have passed. Now everyone has unified the caliber and recommended it Normalize.css, including Bootstrap. .
Since the article involves more content, it will be divided into chapters to introduce:
The first chapter is to
sort out the evolution of the history of CSS Reset, from the birth of the first CSS Reset, to the idea of No CSS Reset, to the proud birth of the domestic version of CSS Reset 1.0; the final change of time, CSS Reset was adopted by Normalize.css Substitute;
then start to understand Normalize.css, understand what it has done, tell the difference with CSS Reset, highlight the advantages, and tell you why you should use it.
The second chapter ,
because Normalize.css only provides English documents, does not provide the corresponding Chinese version, so from this chapter to translate and interpret its source code, this chapter contains html and body, HTML5 elements, links, semantic text tags , Inline elements, group elements and other content interpretation.
Chapter 3,
continue to introduce the forms and tables in the source code, and organize a normalized-zh.css Chinese commented version and upload it to Github for your reference, please stay tuned
CSS Reset History
The first CSS Reset
Why CSS Resetdoes it exist? That is because the CSS specifications supported and understood by early browsers are different, resulting in inconsistent results when rendering pages, and many compatibility issues will occur. About default style browser Please click here!
According to Yu Bo's article, the earliest undohtml.cssCSS Reset from Tantek can be seen from the date in the URL. The time is 2004. Tantek simply resets some tags according to his needs. The source code is as follows:
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
Core code and function
Later CSS Reset, more and more Daniels joined the ranks. For example, the industry leaders YUI team and Eric Meyer made the content of this code more substantial, but it is not difficult to find that the core part of the code is still to reset the style. Here we can conclude The early CSS Resetrole was to clear the default styles of all browsers and make it all zero!
* { margin:0; padding:0 }
However, some time after this, some people began to criticize this method of violent zeroing, CSS Resetand then some front-end developers also heard some controversial voices, such as:
-
*{ margin:0; padding:0; }Will cause performance issues - There are hidden problems with using wildcards
- The reset of the transition label is equivalent to adding a snake
- Transitional label reset causes language elements to fail
Note: Because they are all old and old problems, they will not provide a source. I will not discuss them here anymore. I am interested in Google ~
No CSS Reset ideas
In fact, for controversial issues, foreign bull Jonathan Snook was the first to propose the idea of No CSS Reset, the core of which is Less is more, less is more, no longer advocates the use of violence to zero.
Later, Yu Bo also "Reset CSS study," the article comments demonstrated, in fact, Eric Meyer does not expect everyone to download his CSS Resetpost to take it directly with, but should be used in accordance with their needs, and then the amount of crop and modify.
Later updates YUI CSS the Reset , also supporting cssfonts.cssand cssbase.css. cssreset.cssOnly responsible for clearing the default style, while cssfonts.cssand cssbase.cssis responsible for some of the elements of the default style then reset back, thus eliminating the previous controversy, the program quickly accepted by everyone, began to copy enjoyable to use.
Provided by YUIcssfonts.css
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
/**
* Percents could work for IE, but for backCompat purposes, we are using keywords.
* x-small is for IE6/7 quirks mode.
*/
body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
*font-size:small; /* for IE */
*font:x-small; /* for IE in quirks mode */
}
/**
* Nudge down to get to 13px equivalent for these form elements
*/
select,
input,
button,
textarea {
font:99% arial,helvetica,clean,sans-serif;
}
/**
* To help tables remember to inherit
*/
table {
font-size:inherit;
font:100%;
}
/**
* Bump up IE to get to 13px equivalent for these fixed-width elements
*/
pre,
code,
kbd,
samp,
tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssfonts { display: none; }
Domestic CSS Reset
YUI show above is the latest version V3.18.1, but very embarrassing discovery, YUI provided cssfonts.cssand cssbase.cssonly consider the text of Western Europe, does not have much support for Chinese characters, which led to many Chinese users use only cssreset.css, without using the other two.
It is said that some sports technologies, such as nake and adiaos, will shrink when they arrive in Tianchao, but they never expected that the universal code will shrink when they arrive in Tianchao.
So, some big cows are not reconciled, not only tired of the CSS Resetcurrent status of domestic copying , but also fed up with YUI only considering Western European fonts, not considering the defects of Chinese characters, big manufacturers began to find their own CSS Reset, such as The first copy of the Ali Kissy framework in 2009 (the source code connection has expired, and the homepage will be commemorated) CSS Reset:
/* KISSY CSS Reset
理念：清除和重置是紧密不可分的
特色：1.适应中文 2.基于最新主流浏览器
维护：玉伯([email protected]), 正淳([email protected])
*/
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
margin: 0;
padding: 0;
}
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
/* 用 ascii 字符表示，使得在任何编码下都无问题 */
}
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/* 重置列表元素 */
ul, ol { list-style: none; }
/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}
q:before, q:after { content: ''; }
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {
font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 重置 hr */
hr {
border: none;
height: 1px;
}
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }
This should be the first in China CSS Reset. It was done by Yu Bo and another predecessor. Pay tribute to them. Remember that after writing the first version, Yu Bo still finished Qian Ding 咛 at the end of the summary. Wan asked:
Remember: there is never a universal solution, and no silver bullet.
Therefore, my suggestion is the same as that of Eric: please tailor and modify it according to specific needs before use.
Alternatives Normalize.css
Then back to history today, when moved over the border, China's increasingly fiery front-end jobs, developers have become more professional, CSS Resetthe proliferation of the use of the front field of vision gradually fade out, replaced by that is Normalize.css, for about CSS Resetthe Normalize.cssdifference? Can refer to the known almost Zhang Walnut an answer:
CSS Reset is a revolutionary party. The most radical group in CSS Reset advocates that no matter your kid is useful or useless, he usually takes off his clothes. Why do you wear a circle of margin when your body is born? Get fat, why do you wear an arm bead. So * {margin: 0;} and other sports, flattened others. It seems that all beings are equal, but in fact it is a waste of resources and can not take advantage of it. When it comes to others, it must be added back cheaply. What if the default style of others is really needed? Everyone put the pot in the stove and burned it.
Normalize.css is a reformist. They advocate that every element has its own reason for existence, and it is not good to treat people simply and rudely. The body circle does squeeze the living space of the page, then change it. The agricultural, commercial, and agricultural industries, whoever has their role, formulate a specification for them to ensure that they do their job well in any browser.
The following is a brief introduction to Normalize.css. The difference between the two can be found in the Q & A platform:
Problems encountered when using normalize.css?
Is there any essential difference between Normalize.css and Reset CSS?
Normalize.css brief introduction
About introduction to Github, where references to the taste of chewing for the official presentation of translation of the Chinese version .
Brief overview
Normalize.cssIt is the result of @necolas and @jon_neal, two big cows who spent hundreds of hours studying the differences in the default styles of different browsers. Thank you for your contributions.
Normalize.css is just a small CSS file, but it provides a high degree of cross-browser consistency in the default HTML element style. Compared to the traditional CSS Reset, Normalize.css is a modern, high-quality alternative for HTML5. Normalize.css is now used on Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, and many other frameworks, tools, and websites.
At present Normalize.cssit has become CSS Resetthe alternative is undisputed thing. The well-known domestic AliceUI and AmazeUI frameworks are all based on or drawing on the customized version of Normalize.css.
You can download it from here:
Github:https://github.com/necolas/normalize.css/
Did those things
Normalize.css does the following things:
- Preserves useful defaults, unlike many CSS resets.
Protects useful browser default styles instead of completely removing them - Normalizes styles for a wide range of elements
generalized style : most HTML elements to provide - Corrects bugs and common browser inconsistencies to
fix browser bugs and ensure consistency among browsers - Improves usability with subtle improvements
to optimize the availability of CSS : use some tips - Explains what code does using detailed comments
interpreted code : to use notes and detailed documentation
Advantage comparison
CSS ResetThe core function mentioned above is to clear and be too violent; then, as the latter Normalize.css, what are the advantages that can completely replace the former?
1. Normalize.css protects the valuable default value
Reset by applying default styles to almost all elements, forcing the elements to have the same visual effect. In contrast, Normalize.css maintains many default browser styles. This means you no longer need to restyle all common typesetting elements. When an element has different default values in different browsers, it Normalize.csswill try to keep these styles consistent and conform to modern standards as much as possible.
2.Normalize.css fixes browser bugs.
It fixes common desktop and mobile browser bugs. This is often beyond the scope of Reset. In this regard, the Normalize.cssfixed issues include HTML5 element display settings, preformatted text font-sizeissues, SVGoverflow in IE9, and many form-related bugs that appear in various browsers and operating systems.
3.Normalize.css fixes the browser bug. The
most troublesome part of using Reset is the large inheritance chain in the browser debugging tool. In the Normalize.cssmiddle there would be such a problem, because in our guidelines to be very careful when using the multi selector, we will only set the style destination of the target elements.
4.Normalize.css is modular.
This project has been split into multiple related but independent parts, which allows you to easily and clearly know which elements are set with specific values. So this allows you to selectively remove some parts that will never be used (such as generalization of forms).
5.Normalize.cssNormalize.css The code with detailed documentation is based on detailed and comprehensive cross-browser research and testing. This file has detailed code instructions and further instructions in the Github Wiki. This means that you can find out exactly what each line of code does, why you want to write this code, the differences between browsers, and you can more easily conduct your own tests.
The goal of this project is to help people understand how the browser renders elements by default, while also making it easy to understand how to improve browser rendering.
Source code analysis
Although the Normalize.cssfifth advantage is that it provides detailed documentation, it does not provide the corresponding Chinese version. First, the English notes do not look clear, and secondly, the degree of resolution of the problem is not detailed enough, and it does not contain problem cases, so The next chapter will Normalize.csscarry out module interpretation and translation of the source code.