前言
在编写前端样式时,很多开发者都会遇到浏览器差异带来的排版问题。为了解决这个问题,CSS Reset 和 Normalize.css 等工具应运而生。 CSS Reset 是一种重置 CSS 样式的技术,能够将网页元素的默认样式清空,实现跨浏览器的样式一致性。而 Normalize.css则是一种 CSS 样式工具,更注重统一不同浏览器之间的默认样式,使得不同浏览器中的 HTML 元素更有序、更一致。
两种技术各有优缺点,那么我们该如何选择呢?本文将会从多个角度进行详细比较和指导。
常用的CSS Reset和Normalize.css
1. CSS Reset
CSS Reset 意为重设 CSS,去掉浏览器默认样式,可让你的 Web 站点以自己期望的样式呈现。它卸载浏览器默认样式后,会给一些 HTML 元素设置默认的样式。
以下是常用的 CSS Reset 的代码:
-- ------ ----- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----- ------ -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- - -- - ---- -- - - ---------------- ----- ------ -------- ------- -------- - -- ------------- -- ------ --------- ------- ------ - ---------- -------- ------------ -------- -------- ----- ----------- ----- ------ -------- ------------------- ----- ---------------- ----- ----------- ----- -
代码来自于 Eric Meyers Reset CSS
2. Normalize.css
Normalize.css 不是重置 CSS 排版样式,而是解决了前缀、一些 bug、一些不一样的默认属性和值以及一些样式的差异。Normalize.css 使浏览器标准化不同的默认值。
以下是 Normalize.css 的代码:
--- ------------- ------ - --- ------- - -------------------------------- -- -- ------------ ------------------ ---- -- -- ------ -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - ---- - ------- -- - -- ------------- -- -- - ---------- ---- -- - -- ------- ------ -- - -- ----- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ----- -- - - ----------------- ------------ - ----------- - -------------- ----- -- --------- -- ---------------- ---------- -- --------- -- ---------------- --------- ------- -- --------- -- - -- --------- --------------- -- -- ------ - ------------ ------- - ----- ---- ---- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ------------- -- ----- - ---------- ---- - ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ------- -------- - --- - ---- ------- - -- ------------------ -- -- - -- - ------- --- ------- ------ -- --- --------- -- ------- -- -- - --- --- ------- ------------------- ----- ---- --- - ------ -- --- --- --- ------ ----- ----- -------- --- ------ -- --- - ---- ---- -- -------- -- -- ------- -- ----------------- ---- ------- -- -- ---- -- ------ ----- ------ -------- -------- ------ ------ ----- -- ---- -- ------ ----- ------------------ -- ------------------ -- ---------- -- -------------------- -- ------------------ -- ------------ -- ------------------- ------------ ----------- ------------ - -- ------------------------------------- -- ------ - -- - --- --- ------- -------- --------- -- ------ --- -------- -- -------------- -- -- ----------------------------------- -- ------ -------- -- - ------- --- ---- -------- -- ---- --- --- -- -------- ------ -- - --- --- ------- ----- -- -------- -- ---------- ----- -- - ------ --- ------- -- -- ----- ------- ---- --- ------ -------- -- -------- -- -- - ------ --- ------ -- -- ----- ---------- -------- - ----- -------- ---- -- ---- -------------- ------ ------- -- --- --------- -- ------- -- - -- ---------------- -- --- - ------------- ----- -- ----- -- ------ ----- ------- ----- - -- --------------- -- ------- ------ --------- ------- -------- - ------------ -------- ---------- ----- ------------ ----- ------- -- - -- - ------ --- ----------- -- ---- --------- -- ---- --- -------- - -- ------ --- ----------- -- ---- --------- -- -------- - -- ------ --- ----------- -- ---- --------- -- ----- -- ------- ----- - -- - -- --------- -------- - -- - ---- --- -------- -- --- - -- ---- --- -------- -- ----- -- ------- ------ - -- - -- --------------- ----- - -- - -- ------- - ------ --- ----- --- -------- ------ ------- --- ------- - -------- -- ------- -- - -- ------- --- --------- -- ----- --------- ----- -- --- --- ------- -- ------- ---- ---------------- --------------- --------------- - ------------------- ------- -- - -- - -- - ------ --- ----- ------ --- ------- -- -------- -- ------------------ - ------------- ----- -------- -- - -- - ------- --- ----- ------ ----- -- --- -------- ----- -- --------------- - -------- --- ------ ----------- - -- - ------ --- ---------- ---------- ------ -- -------- - --- ------ ----------------------------------------------------------- -- ---------------- - ----------- ----- - -- ---------- -- ----- - ---------------- --------- - -- ----------------------- -- -------- - --------- ----- ------- ----- - -- ------------ -- ------------------- - ------ ---- ------- ---- -------------- -- - ------------------------- - ------------------- ----- - - --- ----- -------------- -- - ------------------------- - ------------------- ----- - - --- ------- -- -- ----- -------------- -- - -- - ------- -- -------- -- -
选择方式和注意事项
- 推荐使用 Normalize.css,因为 Normalize.css 相对于 CSS Reset,它更灵活,可以在保留默认效果的同时进行一定程度上的样式通用化。同时,Normalize.css 也是更加健全的解决方案,能够很好的兼容各个浏览器。
- 当仅仅是想去掉一些不必要的默认效果时建议使用 CSS Reset。
- 建议阅读并了解这些 CSS Reset 或 Normalize.css 的代码,特别是一些不同的解决方案。
- 基础的 Reset 大多被包含在 Normalize.css 中,一般不需要再引入 CSS Reset。
总结
CSS Reset 与 Normalize.css 旨在解决的问题虽然类似,但实现的方式以及设计理念却完全不同。根据具体情况,开发者可以选择合适的工具,从而加速自己的前端样式开发。需要注意的是,在选择前尽可能地了解工具的使用方式、功能、以及与其需要搭配的技术,以落实最优选择。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64e630c9f6b2d6eab319bcea