Heim > Web-Frontend > HTML-Tutorial > 关于CSS Reset 那些事(三)之 Normalize-zh.css 出炉_html/css_WEB-ITnose

关于CSS Reset 那些事(三)之 Normalize-zh.css 出炉_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:40:05
Original
1117 Leute haben es durchsucht

前言

上一章节我们对Normalize.css源码进行解析,但是由于其代码过长导致不宜浏览,所以表单Forms,表格Table部分内容放在此章节介绍。本章节会完成所有源代码翻译整理,最终会整理出Normalize-zh.css中文版本并开源至Github供大家交流使用。

回顾:关于CSS Reset 那些事(二)之 Normalize.css 源码解读

Normalize 源码解读 (2)

上章节对 html与body元素,HTML5元素,链接,语义化文本,内嵌元素,群组元素 等源码内容已经做了解析,这章节继续完成表单Forms,表格Table部分。

源码地址:https://github.com/necolas/normalize.css/blob/master/normalize.css
源码版本: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 */}
Nach dem Login kopieren
  • 修正所有浏览器中颜色不继承的问题
  • 修正所有浏览器中字体不继承的问题
  • 修正 Firefox 3+, Safari5 和 Chrome 中外边距不同的问题
  • 有一些浏览器会把form表单中的一些元素 textarea,text,button,select 中的字体和字体颜色默认会设置成用户的字体或者是浏览器的字体,并不会从父元素继承,所以这里重置了这些元素的默认样式。

    /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */button {  overflow: visible;}
    Nach dem Login kopieren
    • 统一 IE 8/9/10/11 overflow属性为visible

    在 IE 8/9/10/11里的button默认的overflow是hidden,这里统一为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;}
    Nach dem Login kopieren
    • 统一各浏览器text-transform不会继承的问题
    /** * 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 */}
    Nach dem Login kopieren
  • 避免 Android 4.0.* 中的 WebKit bug ,该bug会破坏原生的audio和video的控制器
  • 更正 iOS 中无法设置可点击的input的问题
  • 统一其他类型的input的光标样式
  • 这里将可点击的按钮,统一设置鼠标样式为pointer,提高了可用性

    /** * Re-set default cursor for disabled elements. */button[disabled],html input[disabled] {  cursor: default;}
    Nach dem Login kopieren
    • 重置按钮禁用时光标样式
    /** * Remove inner padding and border in Firefox 4+. */button::-moz-focus-inner,input::-moz-focus-inner {  border: 0;  padding: 0;}
    Nach dem Login kopieren
    • 移除 Firefox 4+ 的内边距
    /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */input {  line-height: normal;}
    Nach dem Login kopieren
    • 统一设置行高为normal

    Firefox浏览器会默认设置input[type="button"]的行高为normal !important,这里统一样式

    /** * 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 */}
    Nach dem Login kopieren
  • 修正 IE 8/9 box-sizing 被设置为content-box的问题
  • 移除 IE 8/9 中多余的内边距
  • /** * 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;}
    Nach dem Login kopieren
    • 修正 Chrome 中 input [type="number"] 在特定高度和 font-size 时,下面一个箭头光标变成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 */}
    Nach dem Login kopieren
  • 修正 Safari 5 和 Chrome 中appearance被设置为searchfield的问题
  • 修正 Safari 5 和 Chrome 中box-sizing被设置为border-box的问题
  • searchfield是CSS3的属性,它可以让一个div元素看上去像任何元素,但是浏览器支持性并不好,

    /** * 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;}
    Nach dem Login kopieren
    • 移除原生默认样式,统一search的输入框样式
    /** * Define consistent border, margin, and padding. */fieldset {  border: 1px solid #c0c0c0;  margin: 0 2px;  padding: 0.35em 0.625em 0.75em;}
    Nach dem Login kopieren
    • 定义一致的边框、外边距和内边距
    /** * 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 */}
    Nach dem Login kopieren
  • 修正 IE 6-9 中颜色不能继承的问题
  • 重置内边距
  • /** * Remove default vertical scrollbar in IE 8/9/10/11. */textarea {  overflow: auto;}
    Nach dem Login kopieren
    • 移除 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;}
    Nach dem Login kopieren
    • 统一设置optgroup元素font-weight始终为bold

    表格 Tables

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

    Normalize-zh.css 出炉

    Normalize-zh.css是根据对Normalize.css的源码分析后,经过学习与整理,将源代码中的英文注释文档翻译为中文版本,方便国内的开发者学习和使用,我深知此版本一定有很多不足,希望能得到大家的理解和支持,同样也很愿意和大家一起完善。

    现已将源代码开源至Github
    项目地址:https://github.com/Alsiso/normalize-zh

    总结

    经过两个章节对Normalize.css的源码进行了学习,清晰的了解了它的工作原理,作为传统CSS Reset替代者,它当之无愧,为大家提供一套很完整的跨浏览器解决方案。

    不过,你是否会有和我一样的需求,比如开发一个小站,或者一个PC端的系统时,也许只需要一些简单的基础模块,比如我只想要简单的样式重置,统一各浏览器的效果就好,并不需要HTML5以及CSS3的一些问题修复。

    那么下一章,我们来介绍,如果制定属于自己的 CSS基础代码库?

    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage