Things About CSS Reset (3) Normalize-zh.css is released_html/css_WEB-ITnose

Foreword

In the previous chapter, we parsed the Normalize.css source code, but because the code is too long, it is not suitable for browsing, so the Forms and Table parts are introduced in this chapter. This chapter will complete the translation and sorting of all source codes, and finally sort out the Chinese version of Normalize-zh.css and open source it to Github for everyone to communicate and use.

Review: Things About CSS Reset (2) Normalize.css Source Code Interpretation

Normalize Source Code Interpretation (2)

The previous chapter discussed html and body elements, and HTML5 elements , links, semantic text, embedded elements, group elements and other source code content have been analyzed. This chapter continues to complete the Forms and Table parts.

Source code address: https://github.com/necolas/normalize.css/blob/master/normalize.css
Source code version: v3.0.3

Forms

/** * 1. Correct color not being inherited. *    Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */button,input,optgroup,select,textarea {  color: inherit; /* 1 */  font: inherit; /* 2 */  margin: 0; /* 3 */}

Fix the problem that colors are not inherited in all browsers

Fix the problem that fonts are not inherited in all browsers

Fix the different margins in Firefox 3, Safari5 and Chrome Problem

Some browsers will set the font and font color of some elements in the form such as textarea, text, button, and select to the user's font or the browser's font by default, and will not change the font from Parent elements inherit, so the default styles of these elements are reset here.

/** * Address `overflow` set to `hidden` in IE 8/9/10/11. */button {  overflow: visible;}

• Unified IE 8/9/10/11 overflow attribute is visible

The default overflow of button in IE 8/9/10/11 is hidden, here unified as visible

/** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */button,select {  text-transform: none;}

• Unify the problem that text-transform will not be inherited by all browsers

/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` *    and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type *    `input` and others. */button,html input[type="button"], /* 1 */input[type="reset"],input[type="submit"] {  -webkit-appearance: button; /* 2 */  cursor: pointer; /* 3 */}

Avoid WebKit in Android 4.0.* bug, this bug will destroy the native audio and video controllers

Correct the problem that clickable input cannot be set in iOS

Unify the cursor style of other types of input

Here, clickable buttons are unified to set the mouse style to pointer, which improves usability

/** * Re-set default cursor for disabled elements. */button[disabled],html input[disabled] {  cursor: default;}

• Reset the cursor style when the button is disabled

/** * Remove inner padding and border in Firefox 4+. */button::-moz-focus-inner,input::-moz-focus-inner {  border: 0;  padding: 0;}

• Remove the padding in Firefox 4

/** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */input {  line-height: normal;}

• Uniformly set the line height to normal

Firefox browser will set input[type= by default "button"]'s line height is normal !important, the style is unified here

/** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */input[type="checkbox"],input[type="radio"] {  box-sizing: border-box; /* 1 */  padding: 0; /* 2 */}

Fix the problem of IE 8/9 box-sizing being set to content-box

Remove IE 8 /9 extra padding

/** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {  height: auto;}

• Fixed the effect of input [type="number"] in Chrome when at a specific height and font-size, the arrow cursor below becomes cursor: text

/** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */input[type="search"] {  -webkit-appearance: textfield; /* 1 */  box-sizing: content-box; /* 2 */}

Fix the issue where appearance is set to searchfield in Safari 5 and Chrome

Fix the issue where box-sizing is set to border-box in Safari 5 and Chrome

Searchfield is a CSS3 attribute. It can make a div element look like any element, but browser support is not good.

/** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {  -webkit-appearance: none;}

• Remove the native default style and unify it. Search input box style

/** * Define consistent border, margin, and padding. */fieldset {  border: 1px solid #c0c0c0;  margin: 0 2px;  padding: 0.35em 0.625em 0.75em;}

• Define consistent borders, outer margins and inner margins

/** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */legend {  border: 0; /* 1 */  padding: 0; /* 2 */}

Correct colors in IE 6-9 Problems that cannot be inherited

Reset padding

/** * Remove default vertical scrollbar in IE 8/9/10/11. */textarea {  overflow: auto;}

• Remove the default vertical scroll bar in IE8-11

/** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */optgroup {  font-weight: bold;}

• Uniformly set the font-weight of optgroup elements to always be bold

Tables

/** * Remove most spacing between table cells. */table {  border-collapse: collapse;  border-spacing: 0;}td,th {  padding: 0;}

Normalize-zh.css is released

Normalize-zh.css Based on the analysis of the source code of Normalize.css, after studying and organizing, the English annotation documents in the source code were translated into a Chinese version to facilitate domestic developers to learn and use. I know that this version must have many shortcomings, and I hope it can I have everyone's understanding and support, and I am also willing to work with everyone to improve it.

The source code is now open source to Github
Project address: https://github.com/Alsiso/normalize-zh

Summary

After two chapters I studied the source code of Normalize.css and clearly understood its working principle. As a replacement for the traditional CSS Reset, it is well-deserved and provides everyone with a complete cross-browser solution.

However, do you have the same needs as me? For example, when developing a small website or a PC-side system, you may only need some simple basic modules. For example, I only want a simple style reset. , the effect of unifying various browsers is good, and there is no need to fix some problems of HTML5 and CSS3.

So in the next chapter, we will introduce, how to develop your own basic CSS code library?