Sanitize.css 规范元素表现一致性

Question

Sanitize.css 是一个CSS库，它提供了一致的、跨浏览器的HTML元素的默认样式以及有用的默认值。

它是与 Normalize.css 并驾齐驱的，这意味着每一次标准化都包括在内，每一次正常化和意见都有明确的标记和记录。

使用

<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />

或者只支持常绿浏览器。

<link href="https://unpkg.com/sanitize.css/evergreen.css" rel="stylesheet" />

表格CSS

一个单独的样式表，使表单控件规范化，而不产生副作用。

<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />

或者只支持常绿浏览器。

<link href="https://unpkg.com/sanitize.css/forms.evergreen.css" rel="stylesheet" />

资产CSS

一个单独的样式表，将舒适的度量应用于普通文档。

<link href="https://unpkg.com/sanitize.css/assets.css" rel="stylesheet" />

排版CSS

一个单独的样式表，它使用系统接口字体来规范字体。

<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />

减少运动CSS

一个单独的样式表，用于当用户在系统级别请求时限制移动。

<link href="https://unpkg.com/sanitize.css/reduce-motion.css" rel="stylesheet" />

页面CSS

一个单独的样式表，将舒适的度量应用于普通文档。

<link href="https://unpkg.com/sanitize.css/page.css" rel="stylesheet" />

安装

npm install sanitize.css --save

Webpack 中用法

引入 Sanitize.css 在 CSS 中：

@import '~sanitize.css';
@import '~sanitize.css/forms.css';
@import '~sanitize.css/typography.css';

或者在 JS 文件中导入 Sanitize.css：

import 'sanitize.css';
import 'sanitize.css/forms.css';
import 'sanitize.css/typography.css';

在 webpack.config.js 文件中配置，请确保使用适当的加载器：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

是干什么的呢？

• 规范多种元素的样式。
• 纠正错误和常见的浏览器不一致。
• 提供常见的、有用的默认值。
• 解释使用详细注释的代码。

浏览器支持

• Chrome (last 3)
• Edge (last 3)
• Firefox (last 3)
• Firefox ESR
• Opera (last 3)
• Safari (last 3)
• iOS Safari (last 2)
• Internet Explorer 9+

差异性

Normalize.css 和 Sanitize.css 在仔细测试和记录更改时纠正浏览器错误。CSS 样式符合 CSS 规范。CSS 样式符合开发人员的共同期望和偏好。Reset.css取消所有元素的样式。CSS 和 Norize.css 都保持同步。

特征

框大小默认值为边框

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

背景在默认情况下不重复

*, ::before, ::after {
  background-repeat: no-repeat;
}

伪元素继承文本装饰和垂直对齐。

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

游标只更改为提示非显而易见的接口。

html {
  cursor: default;
}

文本在所有浏览器中都有一个舒适的线条高度。

html {
  line-height: 1.5;
}

选项卡在web上的显示与典型编辑器中的相同。

html {
  tab-size: 4;
}

单词中断以防止溢出

html {
  word-break: break-all;
}

文档不对外部填充使用边距。

body {
  margin: 0;
}

导航列表不包括标记样式

nav ol, nav ul {
  list-style: none;
  padding: 0;
}

媒体元素与其他内容的文本中心对齐。

audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}

SVGS返回到当前文本颜色。

svg:not([fill]) {
  fill: currentColor;
}

表不包括额外的边框间距。

table {
  border-collapse: collapse;
}

默认情况下，Textrea仅垂直调整大小。

textarea {
  resize: vertical;
}

对可单击的元素立即进行单次点击。

a, area, button, input, label, select, summary, textarea, [tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

ARIA角色包括可视游标提示。

[aria-busy="true"] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled="true"], [disabled] {
  cursor: default;
}

视觉上隐藏的内容仍然可以访问

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

---

表格

Sanitize.css 包含一个单独的样式表，用于使用最小的、类似标准的样式来规范表单。

<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/forms.css" rel="stylesheet" />

形式特征

窗体控件在视觉上是一致的，并且重新样式是一致的。

button, input, select, textarea {
  background-color: transparent;
  border: 1px solid WindowFrame;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  padding: 0.25em 0.375em;
}

[type="color"],
[type="range"] {
  border-width: 0;
  padding: 0;
}

可扩展的选择控件在视觉上是一致的。

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: no-repeat right center / 1em;
  border-radius: 0;
  padding-right: 1em;
}

select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
}

::-ms-expand {
  display: none;
}

在 InternetExplorer 中占位符在视觉上是一致的

:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.54);
}

资产

Sanitize.css 包括一个单独的样式表，用于规范限制所有浏览器中资产的大小。

<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/assets.css" rel="stylesheet" />

资产特征

在所有浏览器中，资产都使用舒适的度量。

iframe,
img,
input,
select,
textarea {
  height: auto;
  max-width: 100%;
}

排版

Sanitize.css包括一个单独的样式表，用于使用系统接口字体规范排版。

<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/typography.css" rel="stylesheet" />

排版特征

排版使用默认的系统字体。

html {
  font-family:
    system-ui,
    /* macOS 10.11-10.12 */ -apple-system,
    /* Windows 6+ */ Segoe UI,
    /* Android 4+ */ Roboto,
    /* Ubuntu 10.10+ */ Ubuntu,
    /* Gnome 3+ */ Cantarell,
    /* KDE Plasma 5+ */ Noto Sans,
    /* fallback */ sans-serif,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";
}

预先格式化和代码格式化的文本使用单空间系统字体。

code, kbd, pre, samp {
  font-family:
    /* macOS 10.10+ */ Menlo,
    /* Windows 6+ */ Consolas,
    /* Android 4+ */ Roboto Mono,
    /* Ubuntu 10.10+ */ Ubuntu Monospace,
    /* KDE Plasma 5+ */ Noto Mono,
    /* KDE Plasma 4+ */ Oxygen Mono,
    /* Linux/OpenOffice fallback */ Liberation Mono,
    /* fallback */ monospace;
}

减少运动

Sanitize.css包含一个单独的样式表，用于当用户在系统级别上请求时限制移动。

<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
<link href="https://unpkg.com/sanitize.css/reduce-motion.css" rel="stylesheet" />

约简运动特征

在所有浏览器中，动画、滚动效果和转换都会减少。

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}