现代CSS解决方案：现代CSS重置

IE已经逐渐退出历史舞台，浏览器之间巨大差异和各种兼容性问题的日子似乎一去不复返了。尽管如今不同的厂商对标准的处理仍然不同，并且在一些细节上仍然存在差异，但不再需要像以前那样积极地重置浏览器默认样式。

今天，我们更频繁地听到术语现代 CSS 解决方案。除了最基本的页面风格呈现之外，还注重用户体验和可访问性。它也可能是我们过去在编写 CSS 时往往忽略的参考。

现代 CSS 重置

这些天我最喜欢的 CSS 重置解决方案之一来自 Modern-CSS-Reset。

本质：

1. 恢复合理的默认值
2. 注重用户体验
3. 注重可访问性

完整Reset的源码比较简单：更多有趣的东西，我们只看一下盒子的型号：

*,
*::before,
*::after {
  box-sizing: border-box;
}

Normalize.css不推荐。 box-sizing中的大部分元素实际上是content-box。然而，在实际开发中，所有元素都设置为 border-box ，这实际上是一种更方便的做法。

查看有关用户体验和辅助功能的一些练习：：、平滑滚动或：滚动模式：设置 html:focus-infl 这个其目的是只使用键盘上的tab键来改变焦点，在打开页面时，可以平滑地滚动和切换页面，以获得更好的用户体验。

如果我们设置以下CSS：

html {
  scroll-behavior: smooth;
}

可能会有副作用。例如，如果我们在页面上查找元素（使用 Ctrl + F 或 Mac Command + F），则此 CSS 代码可能会导致严重问题。放慢搜索速度：

重温一下这段代码：

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

我曾经引入过CSSprefers-*规范来提高网站的可访问性和健壮性prefers-reduced-motion。查询

prefers-reduced-motion规则用于减少动画效果。除了默认规则之外，只有一个语法值prefers-reduced-motion：reduction。一旦规则开启，就相当于告诉Agent，它正在查看的页面可以删除或替换某些类型的动画，这些动画可能会给一些残疾人带来不适。

原始规范文本：表示用户已通知系统，他们更喜欢删除或替换基于运动的动画的界面，这些动画会导致前庭运动障碍患者感到不适。

前庭运动障碍患有视觉运动障碍的患者相反，来自：前庭运动障碍，一种可导致头晕的疾病。例如，动画每秒闪烁几次，导致患者不适。

如何使用还是上面的代码：

.ele {
    animation: aniName 5s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
    .ele {
        animation: none;
    }
}

如果我们有一些像这样的动画：

如果用户开启了reduced-motion: reducible❀去掉了。

上面的Reset代码用于当用户打开相应选项时减弱页面上的所有动画效果。它属于可访问性方面。

基于实际环境

当然，基于实际环境，国家整体并没有特别关注与无障碍相关的内容。

另外，很多商家根本无法放弃一些旧的浏览器，仍然需要兼容IE系列。

因此，您可以在当前的 Reset 方案中灵活添加以下内容：

1. 如果您的业务场景仍然需要考虑一些老浏览器，并且仍然兼容 IE 系列，则 Normalize.css 中的大部分功能仍然是非常好的选择
2. 如果你的业务场景只关注Chrome或者Chromium内核，Normalize.css的很多内容实际上可能是你在实践中不会看到或使用的兼容适配，必要时可以进行简化。
3. 如果您的业务是全球化的，并且用户不仅限于国内，那么值得处理更多可访问性内容。上面提到的Modern CSS Reset可以作为参考

因此，更合适的做法是包括几个业界常见/众所周知的重置解决方案，以便根据自己的业务制定合适的重置方案实际业务需求。

以下是一些常见且现代的 CSS 重置解决方案：

您会看到每个人都声称这是一个现代 CSS 重置解决方案。然而，实际上，大部分内部重置工作对我们来说根本没有用处。 有人喜欢小而美，有人喜欢大而全。具体的选择需要您在实际使用过程中做出决定。最好以任何适合您的方式结合魔法修改。