CSS reset and cssreset

CSS reset and cssreset
Previous

Most of the time, as the front end, we need to add a copy before writing the CSS style.reset.css. CSS reset is not only used to clear the default style, but also a global style definition. If the CSS reset is not customized in the early stage of the project and is modified in the later maintenance stage, the system will be changed. This article will introduce CSS reset in detail

 

Reset

Take CSS reset of Netease NEC as an example to describe it.

/* reset */html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}table{border-collapse:collapse;border-spacing:0;}caption,th{text-align:left;font-weight:normal;}html,body,fieldset,img,iframe,abbr{border:0;}i,cite,em,var,address,dfn{font-style:normal;}[hidefocus],summary{outline:0;}li{list-style:none;}h1,h2,h3,h4,h5,h6,small{font-size:100%;}sup,sub{font-size:83%;}pre,code,kbd,samp{font-family:inherit;}q:before,q:after{content:none;}textarea{overflow:auto;resize:none;}label,summary{cursor:default;}a,button{cursor:pointer;}h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}del,ins,u,s,a,a:hover{text-decoration:none;}body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}body{background:#fff;}a,a:hover{color:#333;}

The following describes the CSS reset problem.

1. unreasonable style resetting

For example, html, div, dt, and other labels are not default.paddingAndmarginOf

2. Reset the style of the uncommon tag

For example, fieldset, blockquote, q, and other labels are rarely used. Then, set the style.

3. Performance burden

CSS reset usually increases the cost of style computing for browsers (that is, there is a certain performance burden), because it introduces many global rules for elements, almost all elements in a web page will match one or more reset rules, and attribute settings in the rules will be overwritten by more special rules (such as padding and margin ). In extreme cases, all attribute settings in a reset rule do not actually take effect on any element (because they are all overwritten by more special rules ), all cascade computing for this rule is a waste.

Based on these problems, the following is a modified version of CSS reset.

Body {margin: 0; font: 12px/22px Arial, ""; color: #333;} header, footer, section, article, aside, nav, figure {display: block} ul, ol {margin: 0; padding: 0; list-style: none;} p, dl, dd {margin: 0;} h1, h2, h3, h4 {margin: 0; font-size: 100%;} img {border: none;} a {color: #21a557; cursor: pointer; text-decoration: none;}: active, a: hover {outline: none;} a: hover {text-decoration: underline;} strong {font-weight: normal;} em, I {font-style: normal;} table {border-collapse: collapse; table-layout: fixed; border-spacing: 0 ;}th, td {padding: 0 ;}button, input {box-sizing: border-box; padding: 0; border: none; background: none ;}

 

Normalize

Normalize.css and reset.css have the opposite style. Pay attention to common solutions, reset the reset style (for example, the default margin of the body), and retain the reserved user agent style, fixing bugs at the same time is lacking in reset. Normalize focuses on versatility and maintainability instead of style consistency.

Html {/* unified Row height */line-height: 1.15;/* prevents the content from being in winPhone and ISO, font size changes due to screen rotation */-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100% ;} body {/* remove margin */margin: 0;} article, aside, footer, header, nav, section, figcaption, figure, main {/* reset display */display: block of IE8-browser;} h1 {/* unified font size and margin */font-size: 2em; margin: 0.67em 0 ;} figure {/* reset the margin */margin: 1em 40px;} hr {/* reset the box-sizing of firefox */Box-sizing: content-box; height: 0;/* Reset Internet Explorer overflow */overflow: visible ;} pre {/* unified font size and font system */font-family: monospace, monospace; font-size: 1em ;} a {/* remove the gray background in IE10 */background-color: transparent;-webkit-text-decoration-skip: objects ;} abbr [title] {/* remove border-bottom */border-bottom: none from Chrome57-and Firefox 39-;/* Unified text */-decoration text-decoration: underline; text-decoration: under Line dotted;} B, strong {/* unified font weight */font-weight: bolder;} code, kbd, samp {/* unified font family and font size */font-family: monospace, monospace; font-size: 1em ;} dfn {/* reset Android4.3-font style of the browser */font-style: italic;} mark {/* reset IE8-background color and text color of the browser */background-color: # ff0; color: #000;} small {/* unified font size */font-size: 80%;} sub, sup {/* remove the influence of sub and sup on Row height */font-size: 75%; line-height: 0; position: relative; vertical-align: baseli Ne;} sub {/* unified location */bottom:-0.25em;} sup {/* unified location */top:-0.5em;} audio, video {/* reset IE8-Browser display */display: inline-block;} audio: not ([controls]) {/* reset the display and height */display: none; height: 0;} img {/* reset the border-style */border-style in IE9-Browser: none;} svg: not (: root) {/* reset overflow */overflow: hidden;} button, input, optgroup, select, textarea {/* uniform style * // * remove margin in Firefox and Safari */font -Family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0;} button, input {/* reset overflow in IE */overflow: visible;} button, select {/* reset the text-transform */text-transform: none;} button, html [type = "button"] in the firefox browser, [type = "reset"], [type = "submit"] {/* reset the appearance attribute of the webkit browser */-webkit-appearance: button;} button :: -moz-focus-inner, [type = "button"]:-moz-focus-inner, [type = "reset"]:-moz-focu S-inner, [type = "submit"]:-moz-focus-inner {/* reset border and padding */border-style: none in firefox; padding: 0;} button:-moz-focusring, [type = "button"]:-moz-focusring, [type = "reset"]:-moz-focusring, [type = "submit"]:-moz-focusring {/* unified outline */outline: 1px dotted ButtonText;} fieldset {/* reset the padding of the firefox browser */padding: 0.35em 0.75em 0.625em;} legend {box-sizing: border-box; color: inherit; display: tab Le; max-width: 100%; padding: 0; white-space: normal;} progress {/* reset IE9-Browser display */display: inline-block; /* reset Chrome */, vertical-align: baseline;} textarea {/* remove the default vertical scroll bar in IE */overflow: auto ;} [type = "checkbox"], [type = "radio"] {/* reset the box-sizing and padding */box-sizing: border-box; padding: 0;} [type = "number"]:-webkit-inner-spin-button, [type = "number"]:-webkit- Outer-spin-button {/* modify the cursor style of the add and subtract buttons in Chrome */height: auto ;} [type = "search"] {/* reset the appearance and outline-offset of Chrome and Safari */-webkit-appearance: textfield; outline-offset:-2px ;} [type = "search"]:-webkit-search-cancel-button, [type = "search"]: -webkit-search-decoration {/* Delete the padding and cancel buttons in Chrome and Safari on macOS. */-Webkit-appearance: none; }::-webkit-file-upload-button {/* in iOS and Safari, correct the unclickable type. */-Webkit-appearance: button; font: inherit;} details, menu {/* reset IE8-Browser display */display: block ;} summary {/* unified display */display: list-item;} canvas {/* reset the display */display: inline-block of IE8-browser ;} template {/* reset IE browser's display */display: none;} [hidden] {/* reset IE9-browser's display */display: none ;}

 

Use

Is Normalize.css really better than reset.css?

Unfortunately, many bugs fixed in normalize.css are reset. In fact, none of the TEN projects in our project can be used. In a sense, these reset or repair operations are also called redundant code.

Therefore, a reset suitable for the team project should be compiled based on the project requirements, mixed part of the reset or normalize, and a fine-tuning choice should be made. Appropriate adjustments and modifications should be made before use.