您的位置:时时app平台注册网站 > web前端 > 关于CSS Reset那些事(3):架构CSS基础库彩世界网

关于CSS Reset那些事(3):架构CSS基础库彩世界网

2019-10-11 04:39

表单 Forms

CSS

/** * 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 */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
* 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 */
}
  1. 改良全部浏览器中颜色不接二连三的主题材料
  2. 考订全体浏览器中字体不继续的主题素材
  3. 纠正 Firefox 3 , Safari5 和 Chrome 中外边距分歧的难点

有局地浏览器会把form表单中的一些元素 textarea,text,button,select 中的字体和字体颜色默认会设置成用户的字体或者是浏览器的字体,并不会从父元素继承,所以这里重置了这些元素的默认样式。

CSS

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

1
2
3
4
5
6
7
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
 
button {
  overflow: visible;
}
  • 统一 IE 8/9/10/11 overflow属性为visible

在 IE 8/9/10/11里的button默认的overflow是hidden,这里统一为visible

CSS

/** * 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; }

1
2
3
4
5
6
7
8
9
10
11
/**
* 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;
}
  • 联合各浏览器text-transform不会继承的问题

CSS

/** * 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 */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
* 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 */
}
  1. 避免 Android 4.0.* 中的 WebKit bug ,该bug会毁掉原生的audio和video的控制器
  • 更正 iOS 中无法设置可点击的input的问题
  • 统一别的连串的input的光标样式

此间将可点击的按键,统一设置鼠标准样品式为pointer,提高了可用性

CSS

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

1
2
3
4
5
6
7
8
/**
* Re-set default cursor for disabled elements.
*/
 
button[disabled],
html input[disabled] {
  cursor: default;
}
  • 重新载入参数按键禁止使用时光标准样品式

CSS

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

1
2
3
4
5
6
7
8
9
/**
* Remove inner padding and border in Firefox 4 .
*/
 
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
  • 移除 Firefox 4 的内边距

CSS

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

1
2
3
4
5
6
7
8
/**
* Address Firefox 4 setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
 
input {
  line-height: normal;
}
  • 集结安装行高为normal

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

CSS

/** * 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 */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* 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 */
}
  1. 改正 IE 8/9 box-sizing 被设置为content-box的问题
  • 移除 IE 8/9 中多余的内边距

CSS

/** * 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; }

1
2
3
4
5
6
7
8
9
10
/**
* 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;
}
  • 修正 Chrome 中 input [type="number"] 在特定高度和 font-size 时,下面一个箭头光标变成cursor: text 效果

 

CSS

/** * 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 */ }

1
2
3
4
5
6
7
8
9
/**
* 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 */
}
  1. 修正 Safari 5 和 Chrome 中appearance被设置为searchfield的问题
  • 修正 Safari 5 和 Chrome 中box-sizing被设置为border-box的问题

searchfield是CSS3的属性,它可以让一个div元素看上去像任何元素,但是浏览器支持性并不好,

CSS

/** * 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; }

1
2
3
4
5
6
7
8
9
10
/**
* 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;
}
  • 移除原生暗中同意样式,统一search的输入框样式

 

CSS

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

1
2
3
4
5
6
7
8
9
/**
* Define consistent border, margin, and padding.
*/
 
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
  • 概念一致的边框、外边距和内边距

CSS

/** * 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 */ }

1
2
3
4
5
6
7
8
9
/**
* 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 */
}
  1. 改进 IE 6-9 中颜色无法一而再的难题
  2. 复位内边距

CSS

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

1
2
3
4
5
6
7
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
 
textarea {
  overflow: auto;
}
  • 移除 IE8-11 中私下认可的垂直滚动条

CSS

/** * 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; }

1
2
3
4
5
6
7
8
/**
* 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;
}
  • 联合安装optgroup元素font-weight始终为bold

//

表格 Tables

CSS

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

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* Remove most spacing between table cells.
*/
 
table {
  border-collapse: collapse;
  border-spacing: 0;
}
 
td,
th {
  padding: 0;
}

//

//

// Remove most spacing between table cells.

//

table{

border-collapse:collapse;

border-spacing:0;

}

td,

th{

padding:0;

}

前言

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

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

margin:0;

总结

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

唯独,你是或不是会有和作者一样的供给,比方开拓三个小站,也许二个PC端的系统时,可能只必要有的简练的底子模块,譬喻笔者只想要轻便的体制重新设置,统一各浏览器的意义就好,并无需HTML5以至CSS3的一对难题修复。

那正是说下一章,大家来介绍,若是制订属于自身的 CSS基础代码库?

1 赞 1 收藏 评论

彩世界网址 1

//

//

// Address styling not present in IE 8/9/10/11, Safari, and Chrome.

//

abbr[title] {

border-bottom:1pxdotted;

}

//

// Address style set to `bolder` in Firefox 4 , Safari, and Chrome.

//

b,

strong{

font-weight:bold;

}

//

// Address styling not present in Safari and Chrome.

//

dfn{

font-style:italic;

}

//

// Address variable `h1` font-size and margin within `section` and `article`

// contexts in Firefox 4 , Safari, and Chrome.

//

h1{

font-size:2em;

margin:0.67em0;

}

//

// Address styling not present in IE 8/9.

//

mark{

background:#ff0;

color:#000;

}

//

// Address inconsistent and variable font size in all browsers.

//

small{

font-size:80%;

}

//

// Prevent `sub` and `sup` affecting `line-height` in all browsers.

//

sub,

sup{

font-size:75%;

line-height:0;

position:relative;

vertical-align:baseline;

}

sup{

top:-0.5em;

}

sub{

bottom:-0.25em;

}

// Embedded content

Normalize 源码解读 (2)

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

源码地址:

源码版本:v3.0.3

//

//

// Remove the gray background color from active links in IE 10.

//

a{

background-color:transparent;

}

//

// Improve readability of focused elements when they are also in an

// active/hover state.

//

a:active,

a:hover{

outline:0;

}

// Text-level semantics

关于CSS Reset那些事(3):架构CSS基础库

2015/08/03 · CSS · CSS Reset

原著出处: Alsiso   

//

//

// Correct `block` display not defined for any HTML5 element in IE 8/9.

// Correct `block` display not defined for `details` or `summary` in IE 10/11

// and Firefox.

// Correct `block` display not defined for `main` in IE 11.

//

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

menu,

nav,

section,

summary{

display:block;

}

//

// 1. Correct `inline-block` display not defined in IE 8/9.

// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.

//

audio,

canvas,

progress,

video{

display:inline-block;// 1

vertical-align:baseline;// 2

}

//

// Prevent modern browsers from displaying `audio` without controls.

// Remove excess height in iOS 5 devices.

//

audio:not([controls]) {

display:none;

height:0;

}

//

// Address `[hidden]` styling not present in IE 8/9/10.

// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.

//

[hidden],

template{

display:none;

}

// Links

Normalize-zh.css 出炉

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

现已将源代码开源至Github

项目地址:

//

//

// Known limitation: by default, Chrome and Safari on OS X allow very limited

// styling of `select`, unless a `border` property is set.

//

//

// 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

}

//

// Address `overflow` set to `hidden` in IE 8/9/10/11.

//

button{

overflow: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;

}

//

// 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,

htmlinput[type="button"],// 1

input[type="reset"],

input[type="submit"] {

-webkit-appearance: button;// 2

cursor:pointer;// 3

}

//

// Re-set default cursor for disabled elements.

//

button[disabled],

htmlinput[disabled] {

cursor:default;

}

//

// Remove inner padding and border in Firefox 4 .

//

button::-moz-focus-inner,

input::-moz-focus-inner{

border:0;

padding:0;

}

//

// Address Firefox 4 setting `line-height` on `input` using `!important` in

// the UA stylesheet.

//

input{

line-height:normal;

}

//

// 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 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;

}

//

// 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

}

//

// 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;

}

//

// Define consistent border, margin, and padding.

//

fieldset{

border:1pxsolid#c0c0c0;

margin:02px;

padding:0.35em0.625em0.75em;

}

//

// 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

}

//

// Remove default vertical scrollbar in IE 8/9/10/11.

//

textarea{

overflow:auto;

}

//

// 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;

}

// Tables

// Remove default margin.

// HTML5 display definitions

body{

//

//

// Remove border when inside `a` element in IE 8/9/10.

//

img{

border:0;

}

//

// Correct overflow not hidden in IE 9/10/11.

//

svg:not(:root) {

overflow:hidden;

}

// Grouping content

// 2. Prevent iOS and IE text size adjust after device orientation change,

//

//

// Address margin not present in IE 8/9 and Safari.

//

figure{

margin:1em40px;

}

//

// Address differences between Firefox and other browsers.

//

hr{

box-sizing:content-box;

height:0;

}

//

// Contain overflow in all browsers.

//

pre{

overflow:auto;

}

//

// Address odd `em`-unit font size rendering in all browsers.

//

code,

kbd,

pre,

samp{

font-family:monospace,monospace;

font-size:1em;

}

// Forms

// 1. Set default font family to sans-serif.

-webkit-text-size-adjust:100%;// 2

-ms-text-size-adjust:100%;// 2

font-family:sans-serif;// 1

//

html{

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

}

//

}

//

//    without disabling user zoom.

本文由时时app平台注册网站发布于web前端,转载请注明出处:关于CSS Reset那些事(3):架构CSS基础库彩世界网

关键词: