css - 什么是回退？

Question

我的母语不是英语，我想确定我知道“后备”的含义。我已经检查过它可以引用“计划'B'”。更具体地说，我从文件“For using REM and a fallback”中读到这句话。

// Mixin: Font Size
//
// For using REM and a fallback
//
// usage:
// @include font-size(1.2);
//
@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

我还想知道“后备”在这种情况下的含义。 “后备”是两个选项之一吗？他们使用回退模式吗？

Answer 1

回退示例

假设您想使用媒体查询，但并非每个浏览器都能处理它。

<link rel="stylesheet" media="all" href="fallback.css" />
<link rel="stylesheet" media="screen and (min-width: 900px)" href="advanced.css" />

所以在这种情况下，每个无法处理媒体查询的浏览器至少都会退回到“fallback.css”。如果媒体查询符合设备规范(关键字:progressive enhancement)，那些支持媒体查询的将加载 fallback.css 和 advanced.css!

这同样适用于 font-size: ($sizeValue * 10) + px; 的实际问题是那些不支持 font-size: $sizeValue + rem; 的浏览器的后备方案.或者简而言之:browsers that don't support the rem -unit on CSS values使用 px 回退到 CSS 值-单位。

从这个上下文来看，回退应该提供一个最小状态——可以说……

---

一些常见的回退示例

• 当你声明 CSS body{ font-family: super-fancy-font, Arial, sans-serif }那么那些没有安装字体“super-fancy-font”的字体将回落到“Arial”，但同样只有在安装了 Arial 的情况下，否则你告诉浏览器采用没有衬线的标准字体。
• 如果您使用 <noscript> -tag 这通常是一个后备不支持 javascript 的浏览器。在这个例子中浏览器支持javascript不会加载<noscript>包裹的内容.

---

回退示例 | “烧烤模式”(纯属娱乐)

假设您想要烧烤，并且您希望看到所有观众都开心!您记得上次烧烤时您真正喜欢的那些美味排骨，并将它们列入您的 list 。

等等；你记得你的一些妻子好 friend (来自 Yaga 类(class))是素食主义者和jepp，这是一个没有脑子的人你不能让你的妻子 friend 失望所以让我们为那些不喜欢吃肉的人提供后备，并将马苏里拉奶酪条放在你的名单上.

突然间，您想起了上周日您邀请的那些和尚，当时您邀请他们前来，希望他们说“不”，但他们还是同意了。因此，让我们为那些吃纯素并在您的 list 上放很多美味蔬菜和水果的人提供另一个后备方案。

现在你有一个理想的烧烤设置:

1. 每个人都可以吃到美味的蔬菜和水果。
2. 任何能吃奶酪的人都可以拥有它。
3. 那些想吃肉的人也可以吃。

因此每个组都有其适当的回退，并将获得最佳体验!

---

wikipedia.org

Fallback is a contingency option to be taken if the preferred choice is unavailable. [...]

wiktionary.org

[...] an alternative which can be used if something goes wrong with the main plan [...]