CSS Reset与Reboot

解析reset与新的reboot概念

CSS的reset通常是为了处理跨浏览器间的样式一致性问题,比如在页面中放置一个无样式的<button>,Chrome中会应用padding: 1px 6px;的样式,Firefox中会应用padding: 0px 8px;的样式,使用CSS reset会对元素的padding属性赋予一个新值,这样在所有浏览器上都会保持一致性。

关于Reset的历史

  • 2007年Jeff Starr整理了一些不同的reset方案
  • 最早的是04年Tantek Çelik的undohtml.css,去除了默认样式
  • 之后是很热门的the Meyar reset,加入了一些H5元素,不过思路还是移除默认样式,如下这种经典的代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
  • 随着HTML5的发展,出现了如Richard Clark的HTML5 Reset,依然保留了Meyar reset的魂

    1
    2
    3
    4
    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section {
    display:block;
    }

随之而来的Normalize.css

Normalize.css是CSS reset中一次较大的变革,体现在如下几处:

  1. 分析评估了所有跨浏览器中样式不同的元素。以前的CSS reset是寥寥几行代码,而未压缩与规范文本的Normalize.css是447行
  2. 没有移除跨浏览器已具有一致性的元素样式。比如h2-h6元素就没有样式区别,而对于古怪的h1元素就有一定的重置。
  3. 推荐的使用方法是适当alter,而不仅仅是include。比如对于<pre>标签的设置有一行是font-family,你可以改成想要的字体就会有对应的reset效果。

它的代码很易读,无需spec即可获知代码含义

1
2
3
4
5
6
7
8
9
10
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}

Opinionated Reset

关于Opinionated的意思参见这里

  1. Vanilla CSS Un-Reset
    Vanilla CSS Un-Reset在reset样式后还re-style了元素。包括将body的字体尺寸设为pt,设置特殊的单间隔字体栈(比如使用ol ol ol ol这样的选择器),助于排版的类等等。
  2. MiniReset.css
    抹掉字体样式,保留了一些默认值,添加一些不存在跨浏览器问题不过通用的属性(box-sizing),添加有助于响应式设计的属性。
  3. santize.css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /*
    * Remove the text shadow on text selections (opinionated).
    * 1. Restore the coloring undone by defining the text shadow (opinionated).
    */
    ::-moz-selection {
    background-color: #b3d4fc; /* 1 */
    color: #000000; /* 1 */
    text-shadow: none;
    }
    ::selection {
    background-color: #b3d4fc; /* 1 */
    color: #000000; /* 1 */
    text-shadow: none;
    }

    对于定制的属性在文档说明处都添加了opinionated字样,均是作者经过调查和现在浏览器最佳实践后作出的修改。

上面的library或者reset都是作者或多或少根据自己的需求所构建的,有自己的范式与规则习惯,也就是为何称为”Opinionated Reset”

Reboot

reboot是一个新成员,追溯到2015年的Bootstrape 4。它是基于Normalize.css的,仅使用元素选择器来设置opinionated样式,额外的样式使用类选择器设置。比如重置<table>的基础样式为baseline,并提供.table.table-bordered等其他样式。

Reboot中重载的属性

  • 使用rem设置块元素的margin属性
  • 对所有元素应用border-box
  • 避免使用margin-top
  • 在font-相关属性使用inherit

reboot并没有单独的仓库,是bootstrap的一部分,它的文件文档

你可以使用类来定义样式,不过若使用reset的话,则无需重载那个用来处理跨浏览器一致性reset类型的类。

根据浏览器支持情况裁剪reset

需要关注一下Browserslist这个工具,可以用来声明项目所支持的浏览器版本并用标准化格式表现。

可以构建一个声明了所支持浏览器和版本的reset,对于browserslist配置中该项目不支持的特定浏览器,可移除其对应的CSS。PostCSS Normalize就是这样的一个实现。

参考

文章目录
  1. 1. 关于Reset的历史
  2. 2. 随之而来的Normalize.css
  3. 3. Opinionated Reset
  4. 4. Reboot
  5. 5. 根据浏览器支持情况裁剪reset
  6. 6. 参考
|