雅虎工程师推荐的CSS初始化样式表代码

更新时间:2024-05-20 03:57:00   人气:4359
在网页开发中,CSS 初始化样式表是每个项目的重要起点。它旨在消除浏览器之间的默认样式的不一致性,并为开发者提供一个干净、一致的基础环境来构建自定义样式。最近由 Yahoo 工程师团队推荐的一款 CSS 初始化或重置样式表具有很高的实用价值和行业影响力。

Yahoo 的工程专家基于对现代 Web 浏览器深入理解以及多年实战经验制定了一套全面且精简的 CSS 初始化规则:

css

html {
font-size: 100%;
}

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,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}

/* 让 HTML5 元素在 IE 中可以被正确识别 */
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;
}

:focus {
outline: 0;
}

Ins {
text-decoration: none;
}
Del {
text-decoration: line-through;
}

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



上述代码的核心思路是对大部分HTML元素设置统一的基本样式:将边距(margin)、填充(padding)设为零;去除内外边框(border)及轮廓(outline),并设定垂直对齐方式(Vertical alignment)为基础线(baseline),背景色(background-color)透明化。此外,还针对IE等老旧浏览器做了兼容性处理以确保HTML5新标签能正常显示,同时规范化列表项(list items)的表现形式以及其他常见文本格式问题。

通过应用这份精心设计的初始化样式表,前端开发者能够在任何环境下获得更可控和平稳的工作体验,在此基础上进行页面布局与风格定制时可显著减少因不同浏览器渲染差异带来的困扰,从而提升整体项目的质量和维护效率。