关于前端:现代-CSS-解决方案Modern-CSS-Reset

在早年间（其实也不是很早），写过几篇对于 CSS Reset 的文章 – reset.css 知多少。

详细描述了过后业界比拟罕用的，两个 CSS reset 计划：reset.css 与 Normalize.css。

以更为举荐的 Normalize.css 为例，它的核心思想是：

1. 对立了一些元素在所有浏览器下的体现，爱护有用的浏览器默认款式而不是齐全清零它们，让它们在各个浏览器下体现统一；
2. 为大部分元素提供一般化的体现；
3. 修复了一些浏览器的 Bug，并且让它们在所有浏览器下放弃一致性；
4. 通过一些奇妙的细节晋升了 CSS 的可用性；
5. 提供了详尽的文档让开发者晓得，不同元素在不同浏览器下的渲染规定；

现在，Normalize 曾经出到了第八版 — normalize.css V8.0.1，而随之而变的是浏览器市场环境的巨大变化。

IE 曾经逐步退出历史舞台，解决各个浏览器之间微小差别、不同兼容性问题的日子像是一去不复返了。尽管明天不同厂商在看待规范依然存在差别，一些细节上仍旧有出入，然而咱们曾经不须要再像过来般大肆地对浏览器默认款式进行重置。

到明天，咱们更多听到 古代 CSS 解决方案 一词。它除去页面款式最根本的出现外，同时也关注 用户体验 与可拜访性。这也可能是过来，咱们在写 CSS 的时候比拟容易疏忽的环节。

Modern CSS Reset

我最近比拟喜爱的一个 CSS Reset 计划，源自于 — Modern-CSS-Reset。

它的外围观点是：

1. 重置正当的默认值
2. 关注用户体验
3. 关注可拜访性

整个 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;}

Normalize.css 是不举荐这么做的，大部分元素的 box-sizing 其实都是 content-box，然而，对于理论开发，全副元素都设置为 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;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

我已经在 应用 CSS prefers-* 标准，晋升网站的可拜访性与健壮性 介绍过 prefers-reduced-motion。

prefers-reduced-motion 规定查问用于削弱动画成果，除了默认规定，只有一种语法取值 prefers-reduced-motion: reduce，开启了该规定后，相当于通知用户代理，心愿他看到的页面，能够删除或替换掉一些会让局部视觉静止障碍者不适的动画类型。

标准原文：Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.

vestibular motion disorders 是一种视觉运动障碍患者，翻译进去是 前庭运动障碍，是一种会导致眩晕的一类病症，譬如一个动画一秒闪动屡次，就会导致患者的不适。

应用办法，还是下面那段代码：

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

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

如果咱们有一些相似这样的动画：

在用户开启了 prefers-reduced-motion: reduce 时，就应该把这个动画去掉。

而上述 Reset 中的那段代码，正是用于当用户开启对应选项后，削弱页面上的所有动画成果。属于对可拜访性的思考。

结合实际环境

当然，结合实际环境，目前国内整体不太重视可拜访性相干的内容。

而且，许多业务根本无法摈弃一些老旧浏览器，依然须要兼容 IE 系列。

因而，对于现阶段的 Reset 计划，能够灵便搭配：

1. 如果你的业务场景依然须要思考一些老旧浏览器，仍旧须要兼容 IE 系列，Normalize.css 的大部分性能都还是十分好的抉择
2. 如果你的业务场景只专一于 Chrome 或者是 Chromium 内核，Normalize.css 内的许多内容其实可能是一些理论中基本不会遇到或者用上的兼容适配，能够进行必要的精简
3. 如果你的业务是全球化，面向的用户不仅仅在国内，你应该开始思考更多 可拜访性 相干的内容，上述的 Modern CSS Reset 能够借鉴一下

因而，更应该的状况是，依据理论的业务须要，排汇多个业界比拟常见 / 出名的 Reset 计划造成本人业务实用的。

这里再列举一些常见及古代 CSS Reset 计划：

你会看到，其实大家都号称本人是古代 CSS Reset 解决方案，但其实其外部做的 Reset 工作很多是咱们基本用不上的。有人喜爱小而美，有人喜爱大而全，理论应用的时候须要具体取舍，魔改合并成适宜本人的才是最好的。

最初

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。