早些年（其实不是很早），写过几篇关于CSSReset的文章——reset.css你知多少[1]。详细描述了当时业界常用的两种CSS重置方案：reset.css和Normalize.css。以比较推荐的Normalize.css为例。它的核心思想是统一一些元素在所有浏览器下的表现，保护好用的浏览器默认样式而不是完全清除，让它们在各个浏览器下都能显示出来。始终如一。为大多数元素提供通用表示。修复了一些浏览器错误并使它们在所有浏览器中保持一致。CSS的可用性已通过一些简洁的细节得到改进。提供详细文档，让开发者了解不同元素在不同浏览器中的渲染规则。如今，Normalize已经到了第八个版本——normalize.cssV8.0.1[2]，随之而来的是浏览器市场环境的巨大变化。IE已经逐渐退出历史舞台，处理浏览器之间巨大差异和不同兼容性问题的日子似乎一去不复返了。虽然现在不同厂商的标准还是有差异的，在一些细节上还是有出入，但是我们已经不需要像过去那样去重新设置浏览器的默认样式了。时至今日，我们越来越多地听到现代CSS解决方案这一术语。除了最基本的页面样式渲染外，它还注重用户体验和可访问性。这可能也是我们以往写CSS时容易忽略的一个环节。ModernCSSReset最近我最喜欢的CSSReset解决方案之一来自——Modern-CSS-Reset[3]。它的核心思想是：重置合理的默认值。注重用户体验。专注于可访问性。整个重置的源码比较简单：/*Boxsizingrules*/*,*::before,*::after{box-sizing:border-box;}/*Removedefaultmargin*/body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0;}/*删除具有列表角色的ul、ol元素的列表样式，这表明默认样式将被删除*/ul[role='list'],ol[role='list']{list-style:none;}/*设置核心根默认值*/html:focus-within{scroll-behavior:smooth;}/*设置核心主体默认值*/body{min-height:100vh;文本渲染：optimizeSpeed；line-height:1.5;}/*没有类的元素获得默认样式*/a:not([class]){text-decoration-skip-ink:auto;}/*使图像更容易工作with*/img,picture{最大宽度：100%；display:block;}/*继承输入和按钮的字体*/input,button,textarea,select{font:inherit;}/*移除所有动画、过渡和平滑滚动，以供不想看到它们的人使用*/@media(prefers-reduced-motion:reduce){html:focus-within{sc滚动行为：自动；}*,*::before,*::after{animation-duration:0.01ms!important;动画迭代计数：1！重要；过渡持续时间：0.01毫秒！重要；滚动行为：自动！重要；}}一些比较有意思的点，只看盒子模型：*,*::before,*::after{box-sizing:border-box;}不推荐使用Normalize.css，大部分的box-sizing元素实际上是内容框。不过对于实际开发来说，将所有元素都设置为border-box其实是一种更方便的操作方式。我们来看一些用户体验和无障碍方面的方法：html:focus-within{scroll-behavior:smooth;}scroll-behavior:smooth表示平滑滚动。当然，这里设置的是html:focus-within伪类，而不是直接给html平滑滚动。这样做的目的是为了在使用键盘tab键切换焦点页面时，只允许页面平滑滚动，带来更好的用户体验。如果我们设置如下CSS:html{scroll-behavior:smooth;}可能会产生副作用，例如当我们在页面上寻找元素时（使用Ctrl+F，或者Mac的Commond+F），这段CSS代码可能严重减慢我们的查找速度：再次查看这段代码：@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto;}*,*::before,*::after{animation-duration:0.01ms!important;动画迭代计数：1！重要；过渡持续时间：0.01毫秒！重要；滚动行为：自动！重要；}}我使用CSSprefers-*specification来提高网站的可访问性和健壮性[4]引入了prefers-reduced-motion。prefers-reduced-motion规则查询用于减少动画效果。除了默认规则之外，只有一个语法值prefers-reduced-motion：reduce。启用这条规则后，就相当于告诉用户代理他想看的页面，可以去掉或者替换一些对某些视障人士来说可能不舒服的动画类型。规范的原始文本：表示用户已通知系统他们更喜欢一个界面，该界面可以删除或替换基于运动的动画类型，这些动画会引发前庭运动障碍患者的不适。前庭运动障碍是患有视觉运动障碍的患者。翻译过来就是前庭运动障碍，这是一种会引起眩晕的疾病。例如，每秒闪烁多次的动画会给患者带来不适。使用方法还是上面的代码：.ele{animation:aniName5sinfinitelinear;}@media(prefers-reduced-motion:reduce){.ele{animation:none;如果我们有这样的动画：当用户打开prefers-reduced-motion:reduce时，这个动画应该被移除。上面Reset中的代码是用来在用户开启相应选项时，弱化页面上的所有动画效果。这是对可访问性的考虑。结合实际环境当然，结合实际环境，目前国内总体上对无障碍相关的内容关注度不高。而且很多商家根本无法舍弃一些老浏览器，仍然需要兼容IE系列。所以对于现阶段的Reset解决方案，可以灵活搭配：如果你的业务场景还是需要考虑一些老浏览器，还是需要兼容IE系列，Normalize.css的大部分功能还是很不错的好的选择。如果你的业务场景只关注Chrome或者Chromium内核，那么Normalize.css中的很多内容实际上可能是实践中永远不会遇到和用不到的兼容适配，可以根据需要进行精简。如果您的业务是全球化的，而不仅仅是针对国内用户，您应该开始考虑更多与无障碍相关的内容。上面提到的ModernCSSReset可以参考。因此，根据实际业务需求，吸纳多种业内常见/知名的Reset方案，形成适合自己业务的方案，应该是比较合适的。下面是一些常见的、现代的CSSReset解决方案：你会看到，其实大家都号称是现代的CSSReset解决方案，但实际上很多内部完成的Reset工作，我们根本用不到。有的人喜欢小而美，有的人喜欢大而全，在实际使用中，需要具体选择，最好结合魔变组合成适合自己的。最后，本文到此结束，希望对你有所帮助：）参考资料【1】你对reset.css了解多少：https://github.com/chokcoco/iCSS/issues/5。[2]normalize.cssV8.0.1：https://github.com/necolas/normalize.css。[3]现代CSS重置：https://github.com/hankchizljaw/modern-css-reset。[4]使用CSSprefers-*规范来提高网站的可访问性和健壮性：https://github.com/chokcoco/iCSS/issues/118。[5]规范化.css：https://github.com/necolas/normalize.css。[6]sanitize.css：https://github.com/csstools/sanitize.css。[7]reseter.css：https://github.com/resetercss/reseter.css。[8]现代CSS重置：https://github.com/hankchizljaw/modern-css-reset。[9]Github——iCSS：https://github.com/chokcoco/iCSS。
