recursal/MDN huggingface dataset:
Web 开发者指南
=========

MDN 文档中有大量的指南，这些文章意在增加用例，或教你如何使用 API 接口或特性。此页面将提供到一些最流行的阅读材料的链接。

HTML
----

使用 HTML 构建网页

HTML 学习区会提供从头开始的 HTML 学习教程。

HTML 基础

这篇文章将会让你对 HTML 有一个基本的了解。在遵循本指南后，你可以进一步探索 HTML 学习区的资料。

CSS
---

学习使用 CSS 给 HTML 添加样式

我们完整的 CSS 指南将带你从头开始，学习如何给文字添加样式、创建布局等更多内容。

CSS 布局指南 (en-US)

MDN 上包含了很多有关 CSS 布局的指南，这个页面将它们收集到了一起。

使用 CSS 动画

CSS 动画使得从一个 CSS 样式配置到另一个样式配置的动画过渡成为可能。本指南将帮助你开始使用动画属性。

JavaScript
----------

JavaScript 学习区

无论是完全的初学者，还是希望提升你的技能，这里都是好的开始。

媒体
--

音视频传输 (en-US)

我们可以通过多种方式在 Web 上传递音频和视频，从“静态”媒体文件到自适应实时流。本文旨在作为探索基于网络的媒体的各种传输机制以及与流行浏览器的兼容性的起点。

音视频操作

Web 的魅力在于你可以结合各种技术来创造新的形式。在浏览器中拥有原生音频和视频意味着我们可以使用这些诸如 `<canvas>`、WebGL 或 Web 音频 API 的数据流技术来直接修改音视频，例如向音频添加混响或压缩效果，或向视频添加灰度或褐色滤镜。本篇文章提供了一个参考，解释了你需要做些什么。

API 接口
------

表单数据对象

`FormData` 对象允许你配置一组键值对并通过 `XMLHttpRequest` 发送它们。虽然它主要用来发送表单数据，但它也可以独立地用于传输其他带键值的数据。若将表单的编码类型设置为“multipart/form-data”，则传输的格式与表单的 `submit()` 方法用于发送数据的格式相同。

渐进式 Web 应用

渐进式 Web 应用（PWA）通过使用现代 Web API 和传统的渐进式策略来开发跨平台的 Web 应用程序。这些应用程序可以在任何设备上运行并提供接近原生应用程序的体验。这是一些教程来告诉你一些你需要知道的关于 PWA 的知识。

XML 解析和序列化

Web 平台提供了解析和序列化 XML 的不同方法，每种方法都有其优点和缺点。

性能
--

优化和性能

在开发现代网络站点及应用时，使内容加载迅速高效很重要。这篇文章将会帮助你在桌面系统和手持设备上都可以提高效率。

字体
--

可变字体指南

了解如何在你的设计中使用可变字体。

网络开放字体格式（WOFF）

WOFF（网络开放字体格式）是在网络上开放给任何人免费使用的字体文件格式。

用户界面开发
------

用户输入和控制 (en-US)

现代 Web 用户输入已经超越了简单的鼠标和键盘：例如，他们在使用触摸屏。本文提供了管理用户输入和在开放网络应用中实现控制的建议，以及常见问题解答、真实世界的例子，并为需要更多底层技术详细信息的人提供了进一步的信息链接。
弱签名算法
=====

在给数字证书签名时，用到的哈希算法的强度对证书的安全性至关重要。本文将提供一些已知的弱签名算法的信息，以便你在适当的时候避免使用它们。

弱的哈希算法可以使攻击者能够伪造证书。技术进步使网络攻击变得更加可行，随着新型的网络攻击不断被发现，我们不鼓励使用旧的算法，并最终移除了对它们的支持。

SHA-1
-----

从 2017 年开始，主流浏览器不再认为 SHA-1 证书安全。应该使用那些采用更安全的哈希算法（如 SHA-256 或 SHA-512）的证书。

MD5
---

对基于 MD5 的签名的支持在 2012 年初被移除。

相关资料
----

* Mozilla Security Blog 关于弃用 SHA-1 的文章
证书透明度
=====

**证书透明度**（Certificate Transparency，CT）是一个开放的框架，旨在监测和防止证书的误发。它在 RFC 9162 中定义。有了证书透明度机制，新颁发的证书会被“记录”到公开运行的、通常是独立的 *CT 日志*中——这些日志保持着仅允许添加、有密码学保证的已颁发 TLS 证书记录。

这样一来，证书颁发机构（CA）就可以受到更多的公众审查和监督。潜在的恶意证书，如那些违反 CA/浏览器论坛*基线要求*的证书，可以更快地被发现和撤销。浏览器供应商和根存储维护者也被授权对它们可能决定不信任的有问题的 CA 做出更明智的决定。

背景
--

CT 日志是建立在 *Merkle 树*数据结构的基础上的。节点被标记为其子节点的*加密哈希值*。叶子节点包含实际数据片段的哈希值。因此，根节点的标签取决于树中的所有其他节点。

在证书透明的情况下，叶子节点散列的数据是由目前运行的各种不同的 CA 所颁发的证书。证书的包含性可以通过*审计证明*来验证，该证明可以在对数 O(log n) 时间内有效地生成和验证。

证书透明度最初是在 2013 年出现的，背景是 CA 妥协（2011 年的 DigiNotar 漏洞）、有问题的决定（2012 年的 Trustwave 次级根事件）和技术发行问题（马来西亚的 Digicert Sdn Bhd 发行的 512 位弱证书）。

实现
--

当证书被提交到 CT 日志时，一个*证书签署时间戳*（SCT）被生成并返回。这可作为证书已提交的证明，并将被添加到日志中。

该规范指出，符合要求的服务器*必须*在 TLS 客户端连接时向其提供一些这样的 SCT。这可以通过一些不同的机制来实现：

* X.509v3 证书扩展，直接将签名的证书时间戳嵌入叶节点证书中
* 握手过程中发送的 `signed_certificate_timestamp` 类型的 TLS 扩展
* OCSP 装订（即 `status_request` TLS 扩展），并提供具有一个或多个 SCT 的 `SignedCertificateTimestampList`

通过 X.509 证书扩展，所包含的 SCT 由签发的 CA 决定。自 2021 年 6 月以来，大多数积极使用和有效的公开信任的证书都包含嵌入该扩展的透明度数据。这种方法应该不需要对 web 服务器进行修改。

使用后一种方法，服务器将需要更新以发送所需的数据。其优点是，服务器运营商可以定制 CT 日志源，提供通过 TLS 扩展/装订 OCSP 响应发送的 SCT。

浏览器要求
-----

Google Chrome 要求对 notBefore 日期晚于 2018 年 4 月 30 日签发的证书进行 CT 日志收录。用户将被阻止访问使用不符合规定的 TLS 证书的网站。此前，Chrome 浏览器要求对*扩展验证*（EV）和 Symantec 签发的证书进行 CT 收录。

Apple 要求多种数目的 SCT，以使 Safari 和其他服务器信任服务器证书。

Firefox 目前并不检查用户访问的网站或要求使用 CT 日志。
安全上下文
=====

**安全上下文**是 `Window` 与 `Worker` 中满足了最低标准的身份验证和机密性的概念。许多 Web API 仅能在安全上下文中访问。安全上下文的主要目标是防止中间人攻击者访问强大的接口，从而导致更加严重的破坏。

为什么要限制某些功能？
-----------

有些 API 是非常强大的，能给攻击者更强的能力以及更多的操作：

* 侵犯用户隐私。
* 获得对用户计算机的低级访问权限。
* 获得对数据的访问权限，例如用户凭证。
上下文何时是安全的？
----------

当一个上下文满足安全上下文规范中定义的某些最低限度的认证和保密标准时，它是安全的。当一个特定的文档是顶层浏览上下文（基本上是一个包含窗口或标签）的活动文档时，它是在一个安全的上下文中。

例如，在 `<iframe>` 中的文档即使通过 TLS 进行传输，如果它有一个父节点没有通过 TLS 进行传输，其上下文也**不会**视为安全。

然而，需要引起注意的是，如果某个不安全上下文创建了新窗口（无论是否指定 noopener 参数），那么创建新窗口的文档不安全的事实不会影响新窗口的安全性。这是因为，确定一个特定的文档是否在安全上下文中，仅仅需要考虑与之相关的顶层浏览上下文，而与是否碰巧使用了非安全的上下文来创建它无关。

本地传递的资源，如那些带有 `http://127.0.0.1`、`http://localhost` 和 `http://*.localhost` 网址（如 `http://dev.whatever.localhost/`）和 `file://` 网址的资源也是认为经过安全传递的。

**备注：** Firefox 84 及更新的版本支持 `http://localhost` 和 `http://*.localhost` URL 作为信任的源，而早期版本不支持这样做，因为还没有保证 `localhost` 映射到本地或回环地址上。

非本地资源要被认为是安全的，必须满足以下标准：

* 必须通过 `https://` 或 `wss://` URL 提供服务
* 用于传送资源的网络信道的安全属性不能是废弃的
特性检测
----

页面可以通过暴露在全局范围的 `isSecureContext` 布尔属性值真假来判断它是否处于安全上下文中。


```js
if (window.isSecureContext) {
  // 页面在安全上下文中，所以 service worker 可用
  navigator.serviceWorker.register("/offline-worker.js").then(() => {
    // …
  });
}
```

规范
--

| Specification |
| --- |
| Secure Contexts  |

参见
--

* 仅在安全上下文中可用的平台特性——只在安全上下文中可用的特性列表
* `isSecureContext`
* https://permission.site——一个允许你检查你的浏览器在 HTTP 和 HTTPS 上采用何种 API 权限检查的网站
* Strict-Transport-Security HTTP 标头
确保你的站点安全
========

你可以采取一些措施来确保你的网站安全。本文提供了各种建议，以及提供更多有用信息的其他文章的链接。

**备注：** 本篇文章仍未撰写完毕，遵循它的指引不一定能保证你的站点完全安全。

用户信息安全
------

如何关闭表单的自动完成功能

在 Gecko 中表单字段支持自动完成功能；因此它们的值可以被记住，并且在下一次用户访问你的网站时自动被填充。对于某些特定类型的数据，你可能希望禁止这个功能。

隐私和 :visited 选择器

这篇文章讨论对于 `getComputedStyle()` 方法的改动，消除恶意站点获取用户浏览历史的能力。

用安全算法散列密码（OWASP）

使用明文存储密码容易导致攻击者得知且泄露站点用户的密码，令用户处于风险之中。使用陈旧或不安全的散列算法（例如 md5）也会出现相同的问题。应该使用专门用于加密的散列算法（如 Argon2、PBKDF2、scrypt 或 bcrypt），而不是消息摘要算法（例如 md5 和 sha）。这篇文章讲述了存储密码的最好实践。

内容安全
----

正确配置服务器的 MIME 类型

不正确的 MIME 类型配置可以对你的站点造成潜在的安全问题。这篇文章解释了其中的几种方式，并且展示如何配置你的服务器，以让它使用正确的 MIME 类型提供文件服务。

HTTP Strict Transport Security

`Strict-Transport-Security:` 这个 HTTP 头可以使得站点指定其只能通过 HTTPS 访问。

HTTP 访问控制

跨源资源共享标准提供了一种指定可从其他域加载的内容的方法。可以使用它来防止你的网站被不正当地使用；此外，还可以使用它来建立明确允许其他站点使用的资源。

内容安全策略

一种附加的安全层，有助于检测和减轻某些类型的攻击，包括跨站脚本（XSS）以及数据注入攻击。这些攻击可用于从数据窃取到站点破坏或恶意软件分发的所有内容。受害者执行了恶意代码，且令攻击方绕过了访问控制，以使得他们可以假冒合法用户身份。

X-Frame-Options 响应头

`X-Frame-Options:` HTTP 响应头可用于指示是否应允许浏览器在 `<frame>` 中呈现页面。站点可以通过确保其内容未嵌入到其他站点中来避免点击劫持 (en-US)攻击。

通过配置网站实行访问控制

这是保证站点安全的最佳方案。你可以忽略特定的 IP 地址，限制网站只能通过某些特定区域访问，做文件保护、防止盗链等配置。例如，.htaccess 文件是用于在 Apache HTTP 服务器上运行的网站的配置文件。

参见
--

* 开放 Web 应用程序安全项目 (OWASP)
* Mozilla Web 安全速查表
* OWASP 跨站脚本攻击
仅限于安全上下文的特性
===========

本参考列出了仅在安全上下文中可用的 web 平台的特性，有关定义和更多详情，请参阅安全上下文。

当前仅在安全上下文中可用的特性
---------------

本节列出了根据规范要求仅在安全上下文中提供的 API。

* 异步剪贴板 API
* 后台同步（例如 `SyncManager` (en-US)）
* `Cache-Control: immutable`
* 凭据管理 API
* 设备方向 / 设备移动
* 拾色器 API
* 加密媒体扩展 (en-US)
* 通用传感器 API
* `Geolocation`
* 通知 API
* 支付请求 API
* 演示 API (en-US)
* 推送 API
* 报告 API (en-US)
* Service Worker
* 存储 API
* Web 验证 API
* Web 蓝牙 (en-US)
* Web MIDI (en-US)
* Web 加密 API
* WebGPU API
* Web 分享 API (en-US)

此外，以下方法需要安全上下文（即使相关 API 不需要）：

* `MediaDevices.getUserMedia()`
* `Navigator.registerProtocolHandler()`
参见
--

* 安全上下文
* 在 Chrome Platform Status 上搜索“secure context”
如何关闭表单自动填充
==========

本文介绍了网站如何禁用表单字段的自动完成功能。

默认情况下，浏览器会记录用户网页上提交的 `<input>` 框的信息。这使得浏览器能够提供自动补全（在用户开始输入的时候给用户提供可能的内容）和自动填充（在加载的时候预先填充某些字段）功能。

这些功能通常是默认启用的，但可能涉及用户的隐私，因此浏览器允许用户禁用这些功能。然而，一些数据可能会在将来失效（例如一次性密码）或包含敏感信息（例如唯一的政府身份识别码或信用卡安全码）。作为网站作者，你可能更希望浏览器不去记住这些字段的值，即使浏览器的自动填充功能已开启。

注意，规则 WCAG 2.1 Success Criterion 1.3.5: Identify Input Purpose 并不需要自动补全真的能够工作——仅仅只是那些与用户个人信息相关的表单字段能够通过编程的方式分辨出来。意味着即使表单本身的自动补全功能关闭，你也可以通过在相关字段上添加 `autocomplete` 属性来符合这个规则。

禁用自动补全
------

要禁用表单自动补全，你可以将 `autocomplete` 的属性设置为 "off"：
```

autocomplete="off"
```


可以为整个表单设置或为表单中某个输入元素单独设置：


```html
<form method="post" action="/form" autocomplete="off">[…]</form>
```



```html
<form method="post" action="/form">
  […]
  <div>
    <label for="cc">信用卡：</label>
    <input type="text" id="cc" name="cc" autocomplete="off" />
  </div>
</form>
```


设置 `autocomplete="off"` 会有两种效果：

* 这会告诉浏览器，不要为了以后在类似表单上自动填充而保存用户输入的数据。但浏览器不一定遵守。
* 这会阻止浏览器缓存会话历史记录中的数据。若表单数据缓存于会话历史记录，用户提交表单后，再点击返回按钮返回之前的表单页面，则会显示用户之前输入的数据。

如果即使在 autocomplete 已经设置为 off 时，浏览器仍继续提供输入建议，那么你需要更改输入元素的 name 属性。

autocomplete 属性和登录字段
--------------------

现代浏览器实现了内建的密码管理功能：当用户在一个网站上输入了用户名和密码，浏览器会为用户提供记忆功能。当用户再次访问这个网站时，浏览器使用保存的值自动填写登录字段。

另外，浏览器可让用户指定一个主密码用来加密存储的登录信息。

即使没有主密码，浏览器内置的密码管理对安全也有益无害。由于用户不需要记住已被浏览器存储的密码，因此他们可以放心选择更强的密码。

由于这个原因，许多现代浏览器都不支持在登录字段中设置 `autocomplete="off"`：

* 如果一个网站为 `<form>` 设置了`autocomplete="off"`，表单中包含用户名和密码字段，浏览器仍会为这次登录提供记忆功能，并且如果用户同意，用户在下一次访问网站时，浏览器会自动填写这些字段。
* 如果网站给用户名和密码的 `<input>` 框设置了 `autocomplete="off"`，浏览器仍会为这次登录提供记忆功能，并且如果用户同意，用户在下一次访问网站时，浏览器会自动填写这些字段。

这是 Firefox（38+）、Google Chrome（34+）、Internet Explorer（11+）上的表现。

### 使用 autocomplete="new-password" 阻止自动填充

如果你定义了一个用户管理页面，其中用户可以为其他人指定新的密码，因此你想阻止密码字段的自动填充，你可以使用 `autocomplete="new-password"`。

这只是一个提示，浏览器不一定要遵守。但现代浏览器都已停止在设置了 `autocomplete="new-password"` 的 `<input>` 元素上使用自动填充。例如，Firefox 67 版（见 Firefox bug 1119063）在这种情况下会停止自动填充；而 Firefox 70 版（见 Firefox bug 1565407）则可以建议一个安全生成的密码，而不自动填充已保存的密码。更多细节参见 `autocomplete` 兼容性表格。
max-content
===========

`max-content` 尺寸关键字代表了内容的最大宽度或最大高度。对于文本内容而言，这意味着内容即便溢出也不会被换行。

语法
--


```css
/\* 作为长度使用 \*/
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;

/\* 在 grid track 中使用 \*/
grid-template-columns: 200px 1fr max-content;

/\* 全局值 \*/
max-content: inherit;
max-content: initial;
max-content: revert;
max-content: revert-layer;
max-content: unset;
```

示例
--

### 使用 max-content 调整盒子大小

#### HTML


```html
<div id="container">
  <div class="item">Item</div>
  <div class="item">
    Item with more text in it which will overflow the fixed width box.
  </div>
</div>
```


#### CSS


```css
#container {
  background-color: #8cffa0;
  padding: 10px;
  width: 200px;
}

.item {
  width: max-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
```


#### 结果

### 使用 max-content 调整网格列的大小

#### HTML


```html
<div id="container">
  Item
  <div>Item with more text in it.</div>
  Flexible item
</div>
```


#### CSS


```css
#container {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # valdef-width-max-content |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 其他尺寸关键字：`min-content`、`fit-content`
CSS 流式布局
========

"文档流"或"流式布局"是在对布局进行任何更改之前，在页面上显示"块"和"内联"元素的方式。这个"流"本质上是一系列的事物，它们都在你的布局中一起工作，并且互相了解。一旦某部分脱离了"流"，它就会独立地工作。

在文档流中，内联元素按内联方向显示，即词语在依据文件写作模式的句子中表示的方向。块元素则一个接一个地显示，就像该文档的写作模式中的段落一样。因此在英语中，内联元素从左边开始一个接一个地显示，块元素从顶部开始向下显示并移动页面。

示例
--

下面的示例演示块和内联级别框。两个带有绿色边框的段落元素是"块"级，其中一个在另一个下面显示。

第一个句子还包括一个带有蓝色背景的 span 元素。这是行内级别，因此显示在句子的适当位置。

参见
--

* Block and Inline Layout in Normal Flow
* In Flow and Out of Flow
* Formatting Contexts Explained (en-US)
* Flow Layout and Writing Modes
* Flow Layout and Overflow
参考
--

### Glossary Entries

* Block (CSS)

1. **CSS**
2. **CSS Reference**
inherit
=======

**`inherit`** 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性，包括 CSS 简写 `all`。

对于继承属性，inherit 关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用。

继承始终来自文档树中的父元素，即使父元素不是包含块。

示例
--


```css
/\* 设置二级标题的颜色为绿色 \*/
h2 {
  color: green;
}

/\* ...but leave those in the sidebar alone so they use their parent's color \*/
#sidebar h2 {
  color: inherit;
}
```


在下面这个例子中，如果 sidebar 中`h2`元素的 div 匹配下面的规则的话，颜色会变成蓝色。


```css
div#current {
  color: blue;
}
```

规范
--

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # inherit |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Inheritance
* Use `initial` to set a property to its initial value.
* Use `unset` to set a property to its inherited value if it inherits, or to its initial value if not.
* Use `revert` (en-US) to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
* The `all` property lets you reset all properties to their initial, inherited, reverted, or unset state at once.
widows
======

CSS 属性 **`widows`** 可以用来设置一个块级容器在新的分页，区域或者列的**顶部**需要结合在一起的最小行数。


```css
/\* <integer> values \*/
widows: 2;
widows: 3;

/\* Global values \*/
widows: inherit;
widows: initial;
widows: unset;
```


**备注：** 在排版中，*widow* 指的是在新页面顶部单独出现的段落的最后一行。（这一行来自于上一个页面的段落）

语法
--

### 值

`<integer>`

在一个片段打断后，新的片段顶部需要结合在一起的最小行数。该值必须为正值。

形式定义
----

|  |  |
| --- | --- |
| 初始值 | `2` |
| 适用元素 | block container elements |
| 是否是继承属性 | yes |
| 计算值 | as specified |
| Animation type | by computed value type |

形式语法
----
```

widows =   
  <integer [1,∞]>    
  
```

示例
--

### 控制列布局中的 widows

#### HTML


```html
<div>
  <p>This is the first paragraph containing some text.</p>
  <p>
    This is the second paragraph containing some more text than the first one.
    It is used to demonstrate how widows work.
  </p>
  <p>
    This is the third paragraph. It has a little bit more text than the first
    one.
  </p>
</div>
```


#### CSS


```css
div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `orphans` (en-US)
* 分页媒体
<string>
========

在 CSS 中，**`<string>`** 是用来表示一串字符的数据类型，它被用在众多 CSS 属性中，例如`content`、`font-family`、和`quotes`。

使用规则
----

**`<string>`** 数据类型是由包含在英文双引号（**`"`**）或英文单引号（**'**）中的任意数量的 Unicode 字符组成。

大多数字符都可以写成字面量的形式，并且所有字符都可以写成以反斜线（**`\`**）开头的十六进制 Unicode 码点的形式。比如说：**`\22`**表示一个双引号，**`\27`**表示一个单引号，**`\A9`**表示版权声明符号（**`©`**）。

需要注意的是，在使用某些特殊字符时需要在前面加上反斜线来转义，包括但不限于在双引号字符串中使用双引号字符，在单引号字符串中使用单引号字符，以及反斜线字符，比如 **`\\`** 表示一个反斜线字符。

当你想换行的时候，必须使用像 **`\A`** 或者 **`\00000A`** 这样的换行符。不过在你的代码中，可以通过在每行末尾增加一个反斜线（**`\`**）的方式来创建一个多行的字符串。

**备注：** CSS **`<string>`** 中不能使用像 **`&nbsp;`** 或者 **`&#8212;`** 这样的实体。

例子
--
```

/* Simple strings */
"This string is demarkated by double quotes."
'This string is demarkated by single quotes.'

/* Character escaping */
"This is a string with \" an escaped double quote."
"This string also has \22 an escaped double quote."
'This is a string with \' an escaped single quote.'
'This string also has \27 an escaped single quote.'
"This is a string with \\ an escaped backslash."

/* New line in a string */
"This string has a \Aline break in it."

/* String spanning two lines of code (these two strings will have identical output) */
"A really long \
awesome string"
"A really long awesome string"
```

规范
--

| Specification |
| --- |
| CSS Values and Units Module Level 4 # strings |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<system-color>
==============

CSS 数据类型 **`<system-color>`** 通常反映了用于网页不同部分所选的默认颜色。

然而用户代理可以提供名为*强制颜色模式*的无障碍特性，颜色在此模式中被限制于用户和用户代理所定义的色组中，在特定属性中改写作者所选的颜色。在强制颜色模式中，`<system-color>` 暴露了所选颜色，页面的其余部分可由此融入其中。强制颜色模式的一个例子为 Windows 上的高对比度模式。

在强制颜色模式中，作者应为所有颜色*未*被改写的属性使用 `<system-color>` 类型中的颜色。由此确保页面在所有属性上一致使用相同的色组。

作者可使用媒体特性 `forced-colors` (en-US) 检测强制颜色模式。

在可使用 `<color>` 的任意位置均可使用 `<system-color>` 值。

语法
--

注意这些关键字虽然*不区分大小写*，但此处为了可读性以混合的大小写列出。

`AccentColor`

突显的用户界面控件的背景颜色

`AccentColorText`

突显的用户界面控件的文本颜色

`ActiveText`

活跃链接的文本颜色

`ButtonBorder`

控件的边框底色

`ButtonFace`

控件的背景颜色

`ButtonText`

控件的文本颜色

`Canvas`

应用内容或文档的背景颜色

`CanvasText`

应用内容或文档中的文本颜色

`Field`

输入框的背景颜色

`FieldText`

输入框中的文本颜色

`GrayText`

禁用元素（如禁用控件）的文本颜色

`Highlight`

选中项的背景颜色

`HighlightText`

选中项的文本颜色

`LinkText`

非活跃且未访问链接的文本颜色

`Mark`

被专门标记（如用 HTML `mark` 元素）的文本的背景颜色

`MarkText`

被专门标记（如用 HTML `mark` 元素）的文本颜色

`VisitedText`

已访问链接的文本颜色

### 弃用的系统颜色关键字

在 CSS 颜色模块的先前版本中定义了下列关键字。现在不推荐在公共网页上使用这些关键字。

`ActiveBorder` 
已弃用

活跃窗口的边框颜色。

`ActiveCaption` 
已弃用

活跃窗口的标题栏颜色。应与前景色 `CaptionText` 一同使用。

`AppWorkspace` 
已弃用

多文档界面的背景颜色。

`Background` 
已弃用

桌面背景颜色。

`ButtonHighlight` 
已弃用

因有一层环绕边框而有立体感的立体元素面向光源的边框颜色。

`ButtonShadow` 
已弃用

因有一层环绕边框而有立体感的立体元素背向光源的边框颜色。

`CaptionText` 
已弃用

标题栏、尺寸框和滚动条箭头框中的文本颜色。应与背景色 `ActiveCaption` 一同使用。

`InactiveBorder` 
已弃用

非活跃窗口的边框颜色。

`InactiveCaption` 
已弃用

非活跃窗口的标题栏颜色。应与前景色 `InactiveCaptionText` 一同使用。

`InactiveCaptionText` 
已弃用

非活跃窗口的标题栏中的文本颜色。应与背景色 `InactiveCaption` 一同使用。

`InfoBackground` 
已弃用

提示框控件的背景颜色。应与前景色 `InfoText` 一同使用。

`InfoText` 
已弃用

提示框控件的文本颜色。应与背景色 `InfoBackground` 一同使用。

`Menu` 
已弃用

菜单背景颜色。应与前景色 `MenuText` 或 `-moz-MenuBarText` 一同使用。

`MenuText` 
已弃用

菜单中的文本颜色。应与背景色 `Menu` 一同使用。

`Scrollbar` 
已弃用

滚动条的背景颜色。

`ThreeDDarkShadow` 
已弃用

因有两层同心环绕边框而有立体感的立体元素背向光源的较暗（通常为外侧）的边框颜色。

`ThreeDFace` 
已弃用

因有两层同心环绕边框而有立体感的立体元素正面的背景颜色。应与前景色 `ButtonText` 一同使用。

`ThreeDHighlight` 
已弃用

因有两层同心环绕边框而有立体感的立体元素面向光源的较亮（通常为外侧）的边框颜色。

`ThreeDLightShadow` 
已弃用

因有两层同心环绕边框而有立体感的立体元素面向光源的较暗（通常为内侧）的边框颜色。

`ThreeDShadow` 
已弃用

因有两层同心环绕边框而有立体感的立体元素背向光源的较亮（通常为内侧）的边框颜色。

`Window` 
已弃用

窗口的背景颜色。应与前景色 `WindowText` 一同使用。

`WindowFrame` 
已弃用

窗口的边框颜色。

`WindowText` 
已弃用

窗口中的文本颜色。应与背景色 `Window` 一同使用。

示例
--

### 使用系统颜色

在此示例中有一个按钮使用 `box-shadow` 属性在正常情况下形成对比。在强制颜色模式中，`box-shadow` 被强制变为 `none`，故此示例使用 `forced-colors` 媒体特性确保有颜色合适（此例为 `ButtonBorder`）的边框。

#### HTML


```html
<button class="button">按我！</button>
```


#### CSS


```css
.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /\* 改用边框，这是因为在强制颜色模式中 box-shadow 被强制变为“none” \*/
    border: 2px ButtonBorder solid;
  }
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # css-system-colors |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<color>`——这些关键字所属的数据类型
border-right-color
==================

**`border-right-color`** CSS 属性用来设置元素右边的 `border`. 这个属性的值也可以通过简写的 CSS 属性 `border-color` 或`border-right`来设置。

尝试一下
----

Syntax
------


```css
/\* <color> values \*/
border-right-color: red;
border-right-color: #ffbb00;
border-right-color: rgb(255, 0, 0);
border-right-color: hsla(100%, 50%, 25%, 0.75);
border-right-color: currentColor;
border-right-color: transparent;

/\* Global values \*/
border-right-color: inherit;
border-right-color: initial;
border-right-color: unset;
```


The `border-right-color` property is specified as a single value.

### Values

`<color>`

The color of the right border.

### Formal syntax
```

border-right-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### A simple div with a border

#### HTML


```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```


#### CSS


```css
.mybox {
  border: solid 0.3em gold;
  border-right-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

|  |  |
| --- | --- |
| 初始值 | `currentcolor` |
| 适用元素 | all elements. It also applies to `::first-letter`. |
| 是否是继承属性 | 否 |
| 计算值 | computed color |
| Animation type | a color |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The border-related CSS shorthand properties: `border`, `border-right`, and `border-color`.
* The color-related CSS properties for the other borders: `border-left-color`, `border-bottom-color`, and `border-top-color`.
* The other border-related CSS properties applying to the same border: `border-right-style` and `border-right-width`.
scroll-behavior
===============

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 **`scroll-behavior`** 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

|  |  |
| --- | --- |
| 初始值 | `auto` |
| 适用元素 | scrolling boxes |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| Animation type | Not animatable |

尝试一下
----

用户代理可以忽略此属性。

语法
--


```css
/\* Keyword values \*/
scroll-behavior: auto;
scroll-behavior: smooth;

/\* Global values \*/
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;
```

### 值

`auto`

滚动框立即滚动。

`smooth`

滚动框通过一个用户代理预定义的时长、使用预定义的时间函数，来实现平稳的滚动，用户代理应遵循其平台的约定，如果有的话。

### 形式语法
```

scroll-behavior =   
  auto    |  
  smooth    
  
```

示例
--

### HTML


```html
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>
```

### CSS


```css
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
继承
==

在 css 中，每个CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

继承属性
----

当元素的一个**继承属性**（inherited property）没有指定值时，则取父元素的同属性的计算值 computed value (en-US)。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值）。

继承属性的一个典型例子就是 `color` 属性。给出以下样式规则：


```css
p {
  color: green;
}
```


若将其应用在下面这段 HTML 代码上…


```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```


…文本 "emphasized text" 就会呈现为绿色，因为 `em` 元素继承了 `p` 元素 `color` 属性的值，而没有获取 `color` 属性的初始值（这个 `color` 值用于页面没有指定 `color` 时的根元素）。

非继承属性
-----

当元素的一个**非继承属性**(在 Mozilla code 里有时称之为**reset property** ) 没有指定值时，则取属性的初始值 initial value（该值在该属性的概述里被指定）。

非继承属性的一个典型例子就是 `border` 属性。给出以下样式规则：


```css
p {
  border: medium solid;
}
```


若将其应用在下面这段 HTML 代码上…


```html
<p>This paragraph has <em>emphasized text</em> in it.</p>
```


…文本 "emphasized text" 就没有边框，因为 `border-style` 属性的初始值为`none`。

注意
--

`inherit` 关键字允许显式的声明继承性，它对继承和非继承属性都生效。

可以使用 `all` 简写属性一次控制所有属性的继承，该属性将其值应用于所有属性，例如：
```

font {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}
```


这会将 `font` 属性的样式恢复为用户代理（浏览器）的默认值，除非存在用户样式表，在这种情况下使用该样式表。然后它将字体大小加倍并应用 `font-weight` 属性 为`"bold"`

参见
--

* 控制继承：`inherit`, `initial`, `unset`, and `revert` (en-US)
* CSS 层叠
* 层叠和继承
* CSS 重要概念：
    + CSS 语法
    + @ 规则
    + 注释
    + 优先级
    + 继承
    + 盒模型
    + 布局模式
    + 视觉格式化模型
    + 外边距合并
    + 值
        - 初始值
        - 计算值
        - 解析值
        - 指定值
        - 应用值
        - 实际值
    + 属性值定义语法
    + 简写属性
    + 可替换元素