Eric Meyer又更新reset css了

前几天Eric Meyer又思考了一下reset.css的问题,于是有所更新,具体为何要这样做,请看原文Reset Revisited。注意最开始的那句

NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON

使用需谨慎!


/* http://meyerweb.com/eric/tools/css/reset/
v2.0b1 | 201101
NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON */

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, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* remember to define visible focus styles!
:focus {
outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

《Eric Meyer又更新reset css了》有3个想法

    1. 原文就是如此,:focus是用于设定获得焦点时候的样式的。比如鼠标点击链接后,出现的虚线框,这个虚线框就是outline来控制的。这里强调的是可访问性上的要求。有些用户无法使用鼠标,而只是用键盘tab导航,那这个时候如何凸显出当前获得焦点的元素,就是非常重要的了。因此,这里给出问号的目的在于,如果你不喜欢虚线框,虚线框与样式风格不符合,可以在这里重置,但必须给出新的样式,而不是仅仅把虚线框去掉,破坏可访问性。

      1. 这方面 Chrome 做的很好,链接和按钮用鼠标点击的时候没有虚线,用 Tab 键的时候有虚线,不需要专门用 CSS 或 JS 处理。其次是 Opera。

发表评论