CSS Reset 是一个前端开发中经常用到的工具,它的任务是将浏览器对 HTML 元素的默认样式进行重置,目的是为了让所有浏览器展现出一致的样式,即使存在浏览器差异,也可以减少样式修正的工作量。但如何选择适合自己的 CSS Reset 方案,却是很多前端开发者不得不面对的问题。在此,我们将介绍不同的 CSS Reset 方案,并帮助你选择适合自己的方案。
normalize.css
normalize.css 是很多开发者首选的 CSS Reset 方案。它是由 Nicolas Gallagher 于 2011 年创建的,这个方案致力于消除浏览器之间标签的差异,使默认样式在不同的浏览器中保持一致。与其他 reset 方案相比,它不仅对简单而常见的元素进行了重置,还对很多其他元素进行了标准化的样式设置。因此,你不需要再去处理一些特殊的样式情况。但需要注意的是,normalize.css 并不能完全清除浏览器默认样式,在样式上,normalize.css 依然存在一些继承样式。normalize.css 的代码如下:
--- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- ---------------------------- ------------ - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - -------------- ----- -- - -- ---------------- ---------- -- - -- ---------------- --------- ------- -- - -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------------ ----- -- - -- ------- -- -- - -- - ------- ----- - -- - -- --------- -------- - --- - ---- --- -------- -- --- - ------ -------- -- --------- -- ---- --- ------ -- --- -- ----------------- - --------- -------- - --- - ------ --- ------- -------- --------- -- --- -- ------------------------------------------- ------------------------------------------ - ------- ----- - --------------- - ------------------- ---------- -- - -- --------------- ----- -- - -- - ------------------------------------------ - ------------------- ----- - --- - -- ------- --- ---- -------- -- ---- --- --- - -- ------ --- ----- ------- --- ------ ------ ------ -- ------ --- ------- -- --------------------------------------- - --------- ------- -- - -- -------- -- -- - -- ----------- ----- -- - -- - ---------------------------------------------- ------------------------------------------ - ------------------- ----- - --- - ------ --- ------- -------- --------- -- ------- -------- --- ------ -- -------------- - --------------- ------- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- ---- --- -------- -- ------- - -------- ------ - -- - --- --- ------- ------ -- ----- -- ---- --- -------- -- ------- - -------- ---------- - -- ---- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- ---- -- -------- - -------- ----- - --- - --- --- ------- ------- -- -- ---- -- -------- - -------- ----- -
reset.css
reset.css 是 Eric Meyer 创建的一个 CSS Reset 方案。相较于 normalize.css,reset.css 对所有元素进行了重置,例如,独立的样式表包含类似于下面这样的样式:
----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -
可以看到,reset.css 的代码可以清除所有的浏览器默认元素样式,显然,它的重置范围更广泛,其中大量的样式都无法通过 normalize.css 进行操作。但值得注意的是,reset.css 会导致很多元素失去预设的基本样式,需要经过重新设置才能正常使用。
其他方案
除了 normalize.css 和 reset.css 这两个主流方案之外,还有一些其他的 CSS Reset 方案,例如:
这些方案也可根据需求选择。
了解了不同的 CSS Reset 方案后,如何选择适合自己的呢?我们总结了几个建议:
- 对于跨浏览器相同的样式可选择使用 normalize.css;
- 对于更广泛的样式清除需求,可以选择 reset.css;
- 根据自身需要自行定制或修改 CSS Reset 方案;
- 选择已经得到广泛应用并持续更新维护的方案;
- 建议使用浏览器兼容性好、支持范围广的方案。
示例代码
下面是使用 normalize.css 和 reset.css 的示例代码:
--------- ----- ----- ---------- ------ ----- --------------- -- ----- --------------- ---------------------------- ------------------ -- ---------- ----- -------------- ----- ---------------- -------------------- -- ----- ---------------- ---------------- -- ------- -- --------- ---- ------ -- ---- - ------------ ------ ----------- ---------- ----- ------------ ---- ------ ----- - -------- ------- ------ ---------- ----------- --- ----- ----- ----- --- ---- ----------- ----------- ----- ------- ------- ----- --- ---- ----------- -------- --------- ---- ---- ---------- ------- --- ---- ------ --------- ------ -------- ----- --- -------- ----- ---- ------- -------
希望以上的介绍能帮助你选择适合的 CSS Reset 方案,并减少你的样式修正工作。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64b0cf9748841e9894cfd75d