Jadual Kandungan
前言
Normalize 源码解读 (2)
表单 Forms
表格 Tables
Normalize-zh.css 出炉
总结
Rumah hujung hadapan web html tutorial 关于CSS Reset 那些事(三)之 Normalize-zh.css 出炉_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:40 AM

前言

上一章节我们对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 */}
Salin selepas log masuk
  • 修正所有浏览器中颜色不继承的问题
  • 修正所有浏览器中字体不继承的问题
  • 修正 Firefox 3+, Safari5 和 Chrome 中外边距不同的问题
  • 有一些浏览器会把form表单中的一些元素 textarea,text,button,select 中的字体和字体颜色默认会设置成用户的字体或者是浏览器的字体,并不会从父元素继承,所以这里重置了这些元素的默认样式。

    /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */button {  overflow: visible;}
    Salin selepas log masuk
    • 统一 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;}
    Salin selepas log masuk
    • 统一各浏览器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 */}
    Salin selepas log masuk
  • 避免 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;}
    Salin selepas log masuk
    • 重置按钮禁用时光标样式
    /** * Remove inner padding and border in Firefox 4+. */button::-moz-focus-inner,input::-moz-focus-inner {  border: 0;  padding: 0;}
    Salin selepas log masuk
    • 移除 Firefox 4+ 的内边距
    /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */input {  line-height: normal;}
    Salin selepas log masuk
    • 统一设置行高为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 */}
    Salin selepas log masuk
  • 修正 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;}
    Salin selepas log masuk
    • 修正 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 */}
    Salin selepas log masuk
  • 修正 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;}
    Salin selepas log masuk
    • 移除原生默认样式,统一search的输入框样式
    /** * Define consistent border, margin, and padding. */fieldset {  border: 1px solid #c0c0c0;  margin: 0 2px;  padding: 0.35em 0.625em 0.75em;}
    Salin selepas log masuk
    • 定义一致的边框、外边距和内边距
    /** * 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 */}
    Salin selepas log masuk
  • 修正 IE 6-9 中颜色不能继承的问题
  • 重置内边距
  • /** * Remove default vertical scrollbar in IE 8/9/10/11. */textarea {  overflow: auto;}
    Salin selepas log masuk
    • 移除 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;}
    Salin selepas log masuk
    • 统一设置optgroup元素font-weight始终为bold

    表格 Tables

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

    Normalize-zh.css 出炉

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

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

    总结

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

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

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

    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    AI Hentai Generator

    AI Hentai Generator

    Menjana ai hentai secara percuma.

    Artikel Panas

    R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
    2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Repo: Cara menghidupkan semula rakan sepasukan
    4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
    4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

    Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

    Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

    Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

    Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

    Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

    Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

    Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

    Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

    Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

    Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

    Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

    Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

    Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

    Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

    Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

    See all articles