Normalize.css introduction and source code explanation

Normalize.css introduction and source code explanation
Malize.css is a customizable CSS file that makes all elements displayed by the browser more consistent and compliant with modern standards. It is an alternative to CSS reset in modern browser environments. It is for elements that only need to be unified. This project depends on studying the differences between the default element styles of browsers and precisely locates the styles to be reset. This is a modern, HTML5-ready CSS reset style set. The famous bootstrap uses it. The github address is: https://github.com/necolas/normalize.css/ As the author said, normalize.css does the following: Preserves useful defaults, unlike using CSS resets. -Protect useful browser default styles instead of completely removing them Normalizes styles for a wide range of elements. -provides a general style Corrects bugs and common browser inconsistencies for most HTML elements. -Fixed bugs in the browser and ensured the consistency of various browsers. Improves usability with subtle improvements. -Use some tips to optimize CSS availability. Explains what code does using detailed comments. -Explain the advantages of Normalize compared with Reset with comments and detailed documents. normali Ze.css protects valuable default value Reset by applying a default style to almost all elements to force the elements to have the same visual effect. In contrast, normalize.css maintains many default browser styles. This means that you do not need to reset the style for all common typographical elements. When a element is on a different page view, normalize.css strives to keep these styles consistent and as consistent as possible with modern standards. 2. Normalize.css fixes the browser bug. It fixes Common Desktop and mobile browser bugs. This is often beyond the scope of Reset. In this regard, the problems fixed by normalize.css include the display settings of HTML5 elements, the font-size Problem of pre-formatted text, SVG overflow in IE9, and many forms related in various browsers and operating systems.. 3. Normalize.css won't make your debugging tools messy. The most disturbing part of using Reset is the inheritance chain of a large segment in the browser debugging tool, as shown in. This problem won't occur in normalize.css, because we are very cautious when using multiple selectors in our guidelines, and we will only set the style for the target element in the destination. 4. Normalize.css is a modular project that has been split into multiple related but independent parts, so that you can easily and clearly know which elements are set with specific values. Therefore, this allows you to selectively remove some parts that will never be used (such as the generalization of forms ). 5. Normalize.css the detailed document Normalize.css code is based on detailed and comprehensive cross-browser research and testing. This file contains detailed code instructions and further instructions in Github Wiki. This means that you can find the specific work done by each line of code, why to write the code, and the differences between browsers, and you can perform your own testing more easily. The goal of this project is to help people understand how browsers render elements by default, while also making it easy for people to understand how to improve browser rendering. The source code can be found here for reference. The following modules are analyzed one by one: HTML and BODY html {font-family: sans-serif; // 1-ms-text-size-adjust: 100%; // 2-webkit-text-size-adjust: 100%; // 2} body {margin: 0 ;} set all fonts to sans-serif. The text-size-adjust is as follows: the iOS device may automatically adjust the font size (e.g. it is 14px when it is vertical, and it is automatically adjusted to 20px when it is horizontal ). If this attribute is set to 100%, Will Safari adjust the size of the property itself. The difference between setting to 100% and setting to none is that the former prevents the browser from automatically interfering with the font size while allowing users to adjust the font size through scaling, the latter makes it annoying for users to zoom in or out Their fonts. As mentioned in the MDN document, if this attribute is set to none, webkit-based computer browsers will also be affected and cannot be zoomed in or out. Some people used this feature to bypass the computer chrome font size cannot be smaller than 12px limit, but chrome 27 has canceled support for this feature. However, in general, do not set none as well, which gives users a little freedom to control. For details, see text-size-adjust and cannot be set to-webkit-text-size-adjust: none. As for the default margin of the body, they are also inconsistent in different browsers and are configured in a unified manner. Display compatibility of HTML5 new labels solves article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;} audio, canvas, progress, video {display: inline-block; // 1 vertical-align: baseline; // 2} audio: not ([controls]) {display: none; height: 0;} [hidden], template {display: none;} IE8 does not know the HTML5 new element. IE9 of beta recognizes the new element, however, the details and summary of IE10/11 are not correctly defined. It is block-level Chrome, Firefox, and Opera's progress are not vertically aligned with baseline. If the audio tag does not have a control bar, it should be hidden, a little violent! The hidden attribute is a newly added attribute in HTML5. Some people may think that it is different from the style separation that has been advocated by the standard. However, an important principle of HTML5 design is practicality. This attribute helps screen readers easily identify the issue. The template tag is used for HTML templates. In modern Web development, many HTML templates are used. This tag conforms to actual needs. However, the template must not be displayed on the interface, so the style is uniform and compatible with the old browser. For vertical center, see the CSS vertical-align attribute and my understanding of css-vertical-align (1) link to fix a {background-color: transparent;}: active, a: hover {outline: 0;} under IE10, a gray background is displayed when you click the hyperlink (active. When active or hover, remove the default outline style (for all browsers ). Semantic text label repair abbr [title] {border-bottom: 1px dotted;} B, strong {font-weight: bold;} dfn {font-style: italic ;} h1 {font-size: 2em; margin: 0.67em 0 ;}mark {background: # ff0; color: #000 ;}small {font-size: 80% ;}sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup {top:-0.5em;} sub {bottom: -0.25em;} the meaning of the abbr tag is reduced. The complete version of this abbreviation is added to the title attribute of the tag. By default, this label has a bottom border (1px dotted) in FF, which is not available in Safari and Chrome. The bottom border is set here. Firefox 4 +, Safari and Chrome set bolder rather than bold for B and strong. For some websites that have a complete set of web font, they will fall into unwanted words. However, bolder is already mentioned in the HTML standard. If it is set to bold, the increasingly coarse dfn labels cannot be used to mark the definitions of special terms or phrases, in Safari and Chrome, if the h1 style mark tag is not reset in italic, It is a tag in HTML5. IE8/9 is not supported, so you need to reset the style. Limit sets 80% for small and 75% for sub and sup. Here, we set the line-height of the two to 0 to ensure consistency + does not affect the Row height of other elements, vertical-align starts from baseline, and then uses top and bottom to manually set the offset between the two. Other tag fixes img {border: 0;} svg: not (: root) {overflow: hidden;} figure {margin: 1em 40px;} hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;} pre {overflow: auto;} code, kbd, pre, samp {font-family: monospace, monospace; font-size: 1em;} in the old IE browser, a blue outer box is displayed by default. In IE 9/10/11, SVG hidden shows that the margin of figure is invalid in IE 8/9 and Safari. In FF, there are many default hr elements, the main difference with other browsers is that the height is set to 2px, the box-sizing is border-box, and the style is resetting the two styles that affect the layout. For details about box-sizing, see: CSS3 Box-sizing most browsers directly overflow the pre during overflow. Here, overflow: auto is added to make it appear as a Form button, input, optgroup, select, textarea {color: inherit; // 1 font: inherit; // 2 margin: 0; // 3} button {overflow: visible;} button, select {text-transform: none;} button, html input [type = "button"], // 1 input [type = "reset"], input [type = "submit"] {-webkit-appearance: button; // 2 cursor: pointer; // 3} button [d Isabled], html input [disabled] {cursor: default;} button:-moz-focus-inner, input:-moz-focus-inner {border: 0; padding: 0;} input {line-height: normal;} input [type = "checkbox"], input [type = "radio"] {box-sizing: border-box; // 1 padding: 0; // 2} input [type = "number"]:-webkit-inner-spin-button, input [type = "number"]: -webkit-outer-spin-button {height: auto;} input [type = "search"] {-webkit-appearanc E: textfield; // 1-moz-box-sizing: content-box;-webkit-box-sizing: content-box; // 2 box-sizing: content-box;} input [type = "search"]:-webkit-search-cancel-button, input [type = "search"]: -webkit-search-decoration {-webkit-appearance: none;} fieldset {border: 1px solid # c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;} legend {border: 0; // 1 padding: 0; // 2} textarea {overflow: auto;} op Tgroup {font-weight: bold;} Some browsers will put the input boxes (textarea, text, button, select) in form) the font is set to the user's system font or the font (and color) of the browser itself, and does not inherit from the parent element. Therefore, you need to reset the default style of the input box. In IE 8/9/10/11, the default overflow of the button is hidden, which is set to the visible clickable button consistent with the masses. The mouse style is set to pointer, which improves availability. For more information about-webkit-appearance, see: Use the appearance attribute of CSS3 to change the appearance of the element and add a cursor to disabled: default removes the internal padding of Firefox 4 + and unifies the default style of the search type input box, so that the search type input box has the same style as the ordinary input box. The default styles of fieldset elements vary greatly in different browsers, especially in IE and other browsers. Even if the text height in IE does not exceed the specified height, a scroll bar without a scroll bar is added by default. Setting overflow: auto can remove the box-sizing method of form, continue to refer to the CSS3 Box-sizingTable system table {border-collapse: collapse; border-spacing: 0 ;}td, th {padding: 0 ;}the Default table style is ugly, most browsers set the border-collapse of table to separate and border-spacing to 2. This style is reset in general projects. Reference