• 推荐一份不错的清除默认样式的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:

    /*
    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 的差异点:

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

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

    如何使用

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

  • 相关阅读:
    c/c++ 继承与多态 容器与继承2
    c/c++ 继承与多态 容器与继承1
    c/c++ 继承与多态 静态调用与动态调用
    c/c++ 继承与多态 子类隐藏父类的同名非虚函数
    mysql 开发进阶篇系列 26 数据库RPM安装演示
    mysql 开发进阶篇系列 25 数据库RPM安装目录介绍
    mysql 开发进阶篇系列 24 查询缓存下
    (后端)org.springframework.dao.EmptyResultDataAccessException: Incorrect result size: expected 1,actual 0
    (后端)sql server 按时间段查询
    (网页)javascript如何用递归写一个简单的树形结构
  • 原文地址:https://www.cnblogs.com/ymj0906/p/2994591.html
Copyright © 2020-2023  润新知