统一了一些元素在所有浏览器下的表现,保护有用的浏览器默认样式而不是完全清零它们,让它们在各个浏览器下表现一致;
IE 已经逐渐退出历史舞台,处理各个浏览器之间巨大差异、不同兼容性问题的日子像是一去不复返了。虽然今天不同厂商在对待标准仍然存在差异,一些细节上仍旧有出入,但是我们已经不需要再像过去般大肆地对浏览器默认样式进行重置。
到今天,我们更多听到现代 CSS 解决方案一词。它除去页面样式最基本的呈现外,同时也关注用户体验与可访问性。这也可能是过去,我们在写 CSS 的时候比较容易忽略的环节。
Normalize.css 是不推荐这么做的,大部分元素的 box-sizing 其实都是 content-box ,但是,对于实际开发,全部元素都设置为 border-box 其实是更便于操作的一种方式。
scroll-behavior: smooth 意为平滑滚动,当然这里是设置给了 html:focus-within 伪类,而不是直接给 html 赋予平滑滚动,这样做的目的是只对使用键盘 tab 键切换焦点页面时,让页面进行平滑滚动切换,带来更好的使用体验。
可能会起到一起副作用,譬如,当我们在页面查找元素时候(使用 Ctrl + F、或者 Mac 的 Commond + F),这段 CSS 代码可能会严重延缓我们的查找速度:
prefers-reduced-motion 规则查询用于减弱动画效果,除了默认规则,只有一种语法取值 prefers-reduced-motion: reduce ,开启了该规则后,相当于告诉用户代理,希望他看到的页面,可以删除或替换掉一些会让部分视觉运动障碍者不适的动画类型。
vestibular motion disorders 是一种视觉运动障碍患者,翻译出来是前庭运动障碍,是一种会导致眩晕的一类病症,譬如一个动画一秒闪烁多次,就会导致患者的不适。
而上述 Reset 中的那段代码,正是用于当用户开启对应选项后,减弱页面上的所有动画效果。属于对可访问性的考虑。
如果你的业务场景仍然需要考虑一些老旧浏览器,依旧需要兼容 IE 系列,Normalize.css 的大部分功能都还是非常好的选择
如果你的业务场景只专注于 Chrome 或者是 Chromium 内核,Normalize.css 内的许多内容其实可能是一些实际中根本不会遇到或者用上的兼容适配,可以进行必要的精简
如果你的业务是全球化,面向的用户不仅仅在国内,你应该开始考虑更多可访问性相关的内容,上述的 Modern CSS Reset 可以借鉴一下
因此,更应该的情况是,根据实际的业务需要,吸收多个业界比较常见/知名的 Reset 方案形成自己业务适用的。
你会看到,其实大家都号称自己是现代 CSS Reset 解决方案,但其实其内部做的 Reset 工作很多是我们根本用不上的。有人喜欢小而美,有人喜欢大而全,实际使用的时候需要具体取舍,魔改合并成适合自己的才是最好的。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

