在前端开发中,我们经常会使用 CSS Reset 来统一不同浏览器的默认样式,保证页面在不同环境下的稳定性和一致性。但是,CSS Reset 的使用也存在一些问题,本文将介绍一些 CSS Reset 的重要问题,并提供一些解决方案。
什么是 CSS Reset
CSS Reset 是一种用于取消浏览器默认样式,以便于在不同浏览器中得到一致的样式表现的技术。通过重置所有 HTML 元素的样式,使页面从一个“空白”状态开始构建样式,开发者可以更好地控制页面的样式,而不会受到浏览器的干扰。
CSS Reset 的问题
重置太过宽泛
某些 CSS Reset 的重置范围过宽,会对页面中的某些元素的样式产生一定的干扰,甚至会导致布局的重构。比如以下代码:
* { margin: 0; padding: 0; box-sizing: border-box; }
这个通用的 CSS Reset 会重置所有 HTML 元素的样式,包括表单元素和图片等常用元素,会导致一些细节问题,例如在部分浏览器中表单元素的样式重新被覆盖,导致样式失效。
解决方案:限定重置范围。重置的元素应该根据自己的需求定义,通常只需要对文本元素和布局相关元素进行重置即可。
重置过程破坏网页语义化
一些 CSS Reset 存在语义化丢失的问题,因为这些 Reset 对 HTML 元素进行了过度的样式设置,将元素从原有的语义化定位中脱离出来,从而使得网页的结构不再便于把握,增加代码的理解难度。
例如以下代码:
ol, ul { list-style: none; }
这个 Reset 移除了有序列表和无序列表的默认样式,导致语义化丢失,让列表元素的作用不再明显。
解决方案:恰当地使用 Reset。如果需要清除某些元素的默认样式,需保持一定的语义化,使用合适的选择器和伪类进行重置。
补丁代价过大
有时候,开发者为了优化表现和解决问题,会添加一些 CSS 补丁,但是长期以往会产生代价,特别是在代码越来越多,使用者越来越多的情况下,这种代价会更大。
解决方案:尽量避免添加 CSS 补丁,应该优先使用浏览器默认样式,正确使用 Reset 和清除浮动等技术。
CSS Reset 的正确使用方式
CSS Reset 有其存在的合理性,并且它能解决很多样式不一致的问题。正确使用 CSS Reset,可以使页面的样式得到优化和统一。
以下是一些常用的 CSS Reset 的示例代码:
Eric Meyer
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - -------- -- --------- -- -------- -- ----------- ----- ------ -------- ---------------- --------- - -- ------ -- --- -- - ----------- ----- ------- -- -------- -- -展开代码
Normalize
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- ----- ------- ----------- -------------------------------------------------------------------------- -- --- - ------- ------- ------- --- ------- --- --- ----- ------- -- -- ---- - ------- ------- ------- --- ------- --- --------- -- --------- -- -- ----- --- -------- - ------- ------- ------- --- ------- --- ------ -- -- --- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ----- ---- -------- ------- - -------- ------ - --- - -- ------- -------------- ------- --- ------- -- -- ---- - -- --------- -------- --------- -- ---------- -- ------- -------- --- ------ -- ------ ------- --------- ----- - -------- ------------- --------------- --------- - --- - ------- ------ -------- ---- ---------- ------- ------- --------- - ------ ------ ------ -- --- - -------- -- --------------------- - -------- ----- ------- -- - --- - ------- ---------- ------- --- ------- -- -- ------- - ---- --- ---------- ------- -- -- ------- ------- --- ------- - --- -- --------- -------- - -------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- ----- ---- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - ------- ----------- ---- ------- --- ---- ----- ------- -- --- --------- -- --------- ------- - -------------- -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------- ------- --- ------- -- -- ---------- ------- --- ------- -- ----------- - -------------- ----- - --- - ------- ----- --- -- -------- -- ------- --- ------- --- ------- -- -- ------ - ------------ ------- - --- - ------- ------- --- ------- -- ------ --- ------- -- --- - ----------- ------- - --- - ------- -------- ---- --------- --- ------ ------ --------- --- --------- - -------- -- ------- --- ------- --- ------- -- -- - ---------- ---- ------- ------ -- - --- - ------- ------- --- ------- -- -- ---- -- ---- - ----------------- ----- ------ ----- - --- - ------- ------------ --- -------- ---- ---- -- --- --------- -- ----- - ---------- ---- - --- - ------- ----- --- ----- --------- ------------- -- --- --------- -- ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ---- ------- - --- - ------- -------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ ------ ---- ------ --- ------- -- -- ------- -- --- - ------------- ----- - --- - ---- -------- -------- -------- -- -- ---------- -- ------ - --------- ------- - --- - --- --- ------- -------- --------- -- ------- -------- --- ------ -- -------------- - --------------- ------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------- ------ --- ------- -- -- --- --- ------- -- ------ - ------- --- ----- - --- - ------- ----------- ------- ------- --- ----- --------- -- -- - ----------- ------------ ------- -- --------- -------- - --- - ------- -------- -- --- --------- -- --- - --------- ----- - --- - ------- ------ --------- ----- -- -- ---- -- ---------- - ------- --- ----- - -- ----- -------------------------------------------------------------------------- -- --- - ------ ---------- ------- ------- --- -------- -- -------- - ------- --- ----- -------- ------- - ---- -------- ------ ------- ------- - --- - -- ------- ------- --- ----- --------- -- -- ---------- - -- ------ ------- -- ------ ------ ------ --- -- ---- ---- --- ---------- -- ------ - ------- -- -- ------- ---- -------- -- ---- -- -------- ------ ---------- ----- -------- -- ------------ ------- - --- - ------ ------- -------- --------- -- -- ---------- -- -------- - --------- ----- - --- - ----- ------- --- ------------- -------- -- - ---- ------- - ----- --- ------- ------ ------ -- ------- -- ------ --- ------ -- -- -- -- ------------------ -------------- - ----------- ----------- -------- -- - --- - --- --- ------- ------ --- ---------- --- ------- -- ------------------ -------------- - ------- -------- - --- - ------ ------ ------- -- -- ---------- - ---- -- ------ ---------- -- ------- -- --------- ------ - ------------------------------------------- -- ------------------------------------------- ------------------------------------------ - ------- ----- - --- - --------- ------------ --- -- ------------- -- ------ --- ------- -- --------------- - ------------------- ---------- -- - -- --------------- ----- -- - -- - --- - ------ ----- ------- --- ------ -- ------- --- -- ----------------------------- ------------------ - ------- -- -------- -- - --- - --------- ------- -- ---- ------ ------ --- ------- ------- ------ ------- -- ---------------------------- - ------------------- ------- -- - -- ----- -------- -- - -- - -- - -- ----- --- ------ --- -- ------- ----- ----- --- -------- ------ ------- - --- ------- --------- - -- ------- --------- -- ----- --------- ----- -- --- --- ------- -- ---------------- --------------- ---------------- ------ - ------------------- ------- -- - -- - --- - --------- ------ -------- ------- --------- -- --------------- ---------------- ------------------ ------------- -------------- ------------- -------------- --------------- -------------- -------------- ------------------ ------------------------ ---------------- --------------------------- - ------------ -------- ---------- -------- ------------ -------- -- ------ --- ----- ------- -- ------ --- ------ -- ------ -- -------- -- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- ---- --- -------- -- ------- - -------- ------ - -- - --- --- ------- ------- -- --- --------- -- ------- - -------- ---------- -展开代码
Reset.css
-- -------------------- ---- ------- --- ------------- ------ ----- -- -- ---------- ------ --------- ------- - ---------------- -- -- ----------- --- --- -------- -- ---- - ------------ -- - -- ------ --- ------ ---- ---- -------- ---- -- ------- -- ----- --- --- --- --- --- --- -- ----------- ---- --- --- --- --- ----- --------- ------- ------ --------- ------ - ------- -- - -- ------- ----------- ------- ------- -- -------- ------ -------- ----------- ------- ------- ------- ----- ---- ------- - -------- ------ - -- ------ --- ------- ---- ---- -------- ---- -- ------- -- ----- - ---------------- --------- --------------- -- - -- ------ --- ------ -- ------ ------ ----- -- - --- - ------- ----- - -- --- --- ------- -------- --------- ----- ----- --- ----------- --- ----- -- --- - --------------- ------- - -- ------- ----------- ------- -- ------- -- --------------------------------------- - ------- -- -------- -- - -- ----- --- ---- ---------- --- ------ -------- -- ------- ------ ------- -------- - ---------- ----- ------------ -------- - -- ----- --- ---- ------ --- ---- -------- -- ------ ------- -------- - ------------ -------- - -- ----- --- ---------- --- ---- -------- -- ----------------------- -------------------- ------------------- --------------------- -------------------- ---------------------- --------------------- ------- -------- - ----------- ----------- - -- ----- --- ---------- -- ------ -------- -- ------ - ----------- ---- - -- ------- ------- ------ -- --- ------- -- -------------- - ------- -------- - -- ---- --- ---------- ------- -- -- -- -------- - -------- ----- -展开代码
结论
在使用 CSS Reset 的时候,我们需要重视它所产生的问题,合理应用 CSS Reset 并根据项目需求进行限定范围,恰当的应用会让开发变得更加便捷,在保留语义化的前提下,提升了网页的可读性和稳定性,让用户在各种浏览器环境下获得更好的使用体验。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/674d19d2a336082f2548c2cd