推荐一份不错的reset.css

梦想在一起和你

梦想在一起和你

2016-02-20 00:08

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享推荐一份不错的reset.css,希望可以对大家能有小小的帮助。

时间过得真快,离 Reset CSS 研究(八卦篇) 已经 3 个多月了。废话少说,赶紧将技术篇写完吧。

回顾与反思

第一份 reset css 是 Tantek 的 undohtml.css, 很简单的代码,Tantek 根据自己的需要,对浏览器的默认样式进行了一些重置。

Eric 的也是如此。

YUI 除了 cssreset, 还配套有 cssfonts 和 cssbase. cssreset 清除默认样式,cssfonts 和 cssbase 则将一些元素的默认样式重设回来。

很长一段时间,* { margin: 0; padding: 0; }和 YUI cssreset 模糊了我对 reset 的理解,让我认为 reset 就应该清除掉所有样式,将一切归零。

后来阅读 Eric 的博客,发现 Eric 并不期望大家下载他的 reset.css 后直接拿去用。而是期待能根据具体需求,适量裁剪和修改后再使用。

世间的事总会有些戏剧化,Eric 的期待没有如意。大家都想得到通用解决方案,期待银弹。在这种渴求下,YUI cssreset 很彻底很干净,广为流传。

更戏剧化的是,由于 YUI 的 cssfonts 和 cssbase 只考虑了西欧文字,对汉字的考虑不多。这导致国内用户大部分只会用 cssreset. 比喻成武林秘籍的话,我们一直在用残卷。

调节显示器,有一个重置为出厂设置的选项。这有两重含义:一是去掉当前的设置,二是还原为出厂时的设置。CSS Reset 也一样,第一步是清除浏览器的默认样式,第二步是重设浏览器的默认样式。很明显,* { margin: 0; padding: 0; }和 YUI cssreset 偏向于第一步。

这两步并不是截然分开的。reset 的初始意图,是想减少各种浏览器下默认样式的差异。对于没有差异的默认样式,则可以根据情况,选择性重置或不重置。比如 strong, 默认都是粗体,这符合预期,就可以不重置。又比如 a, 现在的主流浏览器下默认样式无差别,但为了某些因素,比如可读性,也会考虑将下划线重置为无。

以上,是回顾,是反思,是接下来技术实现的指导思想。

技术实现

天下一大抄,抄来抄去,种种 reset 代码,长得都差不离。这没什么不好,不光解决了问题,还促进了技术传播。

但从 2004 年到现在,已经一晃眼 5 年了。曾经的一些考虑,比如针对 ie 5.5 的代码,目前已经可以大胆舍弃了。抄的过程中,努力去做到求实求证,努力求一份自己的理解,很难很难。但只要孜孜不倦,终究会有所获,有所得,有所悟。

这是我和好友正淳一起整理的一份 reset.css:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
/*KISSY CSS Reset理念:清除和重置是紧密不可分的特色:1.适应中文 2.基于最新主流浏览器*//* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */fieldset, lengend, button, input, textarea, /* form elements 表单元素 */th, td { /* table elements 表格元素 */margin: 0;padding: 0;}/* 设置默认字体 */body,button, input, select, textarea { /* for ie *//*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */}h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }h2 { font-size: 16px; }h3 { font-size: 14px; }h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 *//* 重置列表元素 */ul, ol { list-style: none; }/* 重置文本格式元素 */a { text-decoration: none; }a:hover { text-decoration: underline; }abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */border-bottom: 1px dotted;cursor: help;}q:before, q:after { content: ''; }/* 重置表单元素 */legend { color: #000; } /* for ie6 */fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 *//* 注:optgroup 无法扶正 */button, input, select, textarea {font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */}/* 重置表格元素 */table {border-collapse: collapse;border-spacing: 0;}/* 重置 hr */hr {border: none;height: 1px;}/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */html { overflow-y: scroll; }

用途在注释里都标明了,就不多解释。测试页面在这里:CSS Reset Test. 这份测试页面花了我们很大心血,如果转载,请注明下出处,呵呵。

先说明下测试过的浏览器:IE 6+, Firefox 3.5+, Safari 4+, Chrome 2+, Opera 10+

下面解释一些和 YUI cssreset 的差异点:

清除内外边距的元素,去掉了 div, code(在测试浏览器中,没发现有边距), 增加了 button(感觉是 YUI 遗漏了). 去掉了 YUI 里对 html 颜色和背景色的设置。在测试浏览器中,没有发现差异。(要设的话,推荐background: transparent) 对于 address, caption, , em, strong 等文本格式元素,做了调整。保留了 strong 和 th 的粗体。 对 abbr 和 acronym 做了调整,使得在非 ie6 下可视性更好。 去掉了 sup 和 sub 的样式,直接用浏览器默认的即可。 对于 input, select, textarea 表单元素,去掉了针对 ie 的 inherit, 只保留了 font-size 的 inherit hack. 因为其它 hack 经测试已失效。 增加了一些元素的默认样式。

此外,对整体代码的组织形式做了调整,按照元素的类别将代码进行了分组。

如何使用

请记住:永远不存在万能解决方案,永远没有银弹。

因此我的建议和 Eric 是一样的:请根据具体需求,适量裁剪和修改后再使用

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

比如针对淘宝,可以在 reset.css 的基础上,修改为 .

如果是个人博客,我个人喜欢的一个方案是:.

相关测试页面请查看:.
真实使用时,请用压缩后的版本:.

对于 本身,我们期待它能尽量多的适用于各种场景,但不期待它能解决所有问题。目前而言,reset.css 里的默认样式,是我和正淳等各位同事和朋友们实践经验的总结,算是精挑细选,但不期待能解决所有问题。

最后,期待你的参与和建议。如果这份 reset.css 能有幸在你的项目中得到使用,则非常期待你的反馈。

展开更多 50%)
分享

猜你喜欢

推荐一份不错的reset.css

Web开发
推荐一份不错的reset.css

编写适合所有项目的通用的reset.css

Web开发
编写适合所有项目的通用的reset.css

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

最近整理的一份CSS文字隐藏的demo

Web开发
最近整理的一份CSS文字隐藏的demo

一份代码编写标准

ASP
一份代码编写标准

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

孕中期注意事项 多一份注意胎儿多一份健康

孕中期 孕妇
孕中期注意事项 多一份注意胎儿多一份健康

如何去看一份设计作品

设计
如何去看一份设计作品

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS教程:CSS制作漂亮的灵活的图表

CSS教程:CSS制作漂亮的灵活的图表

网页重构:由网页图标处理引发的思考

网页重构:由网页图标处理引发的思考
下拉加载更多内容 ↓