现代 CSS 解决方案：Modern CSS Reset

早些年（不是很早），我写过几篇关于 CSS Reset 的文章——你对 reset.css 了解多少。

详细介绍了当时业界常用的两种CSS重置方案：reset.css和.css。

以比较推荐的.css为例，其核心思想是：

统一所有浏览器中某些元素的性能，保护有用的浏览器默认样式，而不是将它们完全归零，而是使它们在浏览器中的行为一致；为大多数元素提供通用行为；修复一些浏览器错误并使它们在浏览器之间保持一致；细节提升了 CSS 的可用性；提供详细的文档，让开发者了解不同元素在不同浏览器中的渲染规则；8.0.1，随之而来的是浏览器市场环境的巨大变化。

IE已经逐渐退出历史舞台，处理浏览器之间巨大差异和不同兼容性问题的日子似乎一去不复返了。虽然现在不同厂商对标准的处理还是有差异，在一些细节上也有差异，但我们不再需要像过去那样重新设置默认浏览器样式了。

直到今天，我们更经常听到现代 CSS 解决方案这个词。它去掉了最基本的页面样式展示，但也侧重于用户体验和可访问性。这也可能是我们过去在编写 CSS 时往往会忽略的一个链接。

CSS 重置

我最近最喜欢的 CSS 重置解决方案之一来自 — CSS-Reset。

它的核心思想是：

重置合理的默认值，关注用户体验，关注可访问性

整个Reset的源码比较简单：

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,

dd {
  margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
/* Make images easier to work with */

img,
picture {
  max-width: 100%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@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;
  }

}

一些比较有趣的点，只看盒子模型：

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

.css 是不建议这样做的。大多数元素的box-实际上是-box。但是，对于实际开发来说，将所有元素设置为-box其实是一种更方便的操作方式。

看看用户体验和可访问性方面的一些做法：

html:focus-within {
  scroll-behavior: smooth;
}

-:表示平滑滚动，当然这里设置为html:focus-伪类，而不是直接给html平滑滚动。这样做的目的是为了让页面只有在使用键盘tab键切换焦点页面时才能进行流畅的滚动切换，从而带来更好的用户体验。 .

如果我们设置如下 CSS：

html {
  scroll-behavior: smooth;
}

它可能会产生副作用，例如，当我们在页面上查找元素时（使用 Ctrl + F，或者在 Mac 上使用 + 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;
  }
}

我曾经使用 CSS -* 规范来提高网站的可访问性和健壮性。

— 规则查询用于削弱动画效果。除了默认规则之外，只有一个语法值 –: 。启用此规则后，相当于告诉用户代理，他想看的页面，某些类型的动画对于某些视觉运动障碍的人来说不舒服，可以去掉或替换。

规范性文本：该用户具有他们的那个或基于类型的那个。

是患有视觉运动障碍的患者，即前庭运动障碍，是一种可导致头晕的疾病。例如，动画每秒闪烁多次，这会给患者带来不适。

使用方法还是上面的代码：

.ele {
    animation: aniName 5s infinite linear;
}
@media (prefers-reduced-motion: reduce) {
    .ele {
        animation: none;
    }
}

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

当 –: 被用户启用时，这个动画应该被移除。

上面Reset中的代码是用来削弱用户打开相应选项时页面上的所有动画效果。属于可访问性的考虑。

结合实际环境

当然，结合实际环境，目前国内整体对无障碍相关的内容不太重视。

而且，很多企业根本无法放弃一些老旧的浏览器，仍然需要兼容IE系列。

因此，对于目前的Reset方案，可以灵活搭配：

如果你的业务场景还需要考虑一些老旧的浏览器，还是需要兼容IE系列，.css大部分功能还是很不错的选择。如果你的业务场景只关注或内核，.css 中的很多内容实际上可能是在实践中从未遇到或使用过的兼容适配。必要的精简 如果您的业务是全球性的，并且用户不仅在中国，您应该开始考虑更多与可访问性相关的内容。上面的 CSS Reset 可以参考一下。

所以应该是这样的，根据实际业务需求，吸纳多个业内常见/知名的Reset解决方案，形成自己的业务应用。

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

星数重置方案介绍

.css

现代 CSS 重置替代方案

47.1K

.css

为 HTML 元素提供一致的跨浏览器默认样式和有用的默认样式

4.8K

.css

.css 和 CSS 重置的未来替代品

981

-CSS-重置

小而美，一种现代的 CSS 重置方案，可重置合理的默认值

2.4K

你会看到，其实大家都号称是现代的CSS Reset解决方案，但其实很多内部做的Reset工作根本用不上。有人喜欢小而美，有人喜欢大而全面。实际使用时，需要做出具体的取舍。最好将魔法变化组合成适合自己的变化。

终于

好了，本文到此结束，希望对你有所帮助

分类：

技术要点：

相关文章：