作为 Web 开发者,我们期望用户在浏览网页时,无论使用何种浏览器,HTML 元素的外观都能保持一致。然而,由于浏览器的工作原理,这一愿望往往难以实现。每个浏览器都配备有自己的默认样式表,其中包含了一些针对元素的基本规则。在大多数情况下,这些默认样式是有益的。但是,由于不同浏览器的默认值存在差异,有时会导致在特定浏览器中出现不一致的表现,从而影响用户的浏览体验。
为了消除这些不一致性,CSS Reset 应运而生!
Modern CSS Reset 是一种先进的 CSS 样式重置方案,其目标是通过重置合理的默认值,关注用户体验和可访问性,为开发者提供一个统一的起点,以便更轻松地实现自定义的样式效果。
本文将首先对 CSS Reset 的发展历程进行全面回顾,然后深入剖析 Modern CSS Reset 的源码。
CSS Reset 发展回顾
CSS Reset 由最初的极简版本不断发展和进化,形成了大家共享的 CSS Reset 模板。
极简版本 CSS Reset
最基本的全局重置方法是使用通配符选择器将所有元素的 padding 和 margins 重置为零。根据浏览大多数网站 CSS 样式得出的结论,下面应该是最常用的 CSS 重置方法,简单粗暴。
* {
padding: 0;
margin: 0;
}
Tantek Çelik 的 CSS Reset
2007 年,根据杰夫-斯塔尔(Jeff Starr)收集的大量不同的 CSS 重置方法。最早的应该是 Tantek Çelik 的 undohtml.css
。Tantek 的 CSS Reset 可移除一些比较突出和不需要的默认浏览器样式。特别是,它能去除链接和点击链接上通常不受欢迎的下划线和边框,消除大多数块元素的边距和填充,甚至将通用字体大小设为 1em。