平台新闻：默认使用逻辑 CSS、Fugu API、自定义媒体查询以及 WordPress 与 斜体

看起来 2021 年是开始使用 CSS 逻辑属性的时候了！此外，Chrome 最近发布了一些引起人们注意的 API，SVG 允许我们禁用它的纵横比，WordPress 专注于其排版的可访问性，并且关于 CSS 自定义媒体查询开发的更新（或进展）仍然没有。

让我们直接进入新闻……

逻辑 CSS 很快就会成为新的默认值

在 Mozilla 在 Firefox 中发布 最初的片段 CSS 逻辑属性 六年后，此功能现在正在 2021 年实现全浏览器支持的道路上。下表中列出的逻辑属性和值的类别已经在 Firefox、Chrome 和最新的 Safari 预览版中得到支持。

CSS 属性或值	逻辑等效
margin-top	margin-block-start
text-align: right	text-align: end
bottom	inset-block-end
border-left	border-inline-start
(n/a)	margin-inline

逻辑 CSS 还引入了几个有用的简写方法，用于以前需要多个声明的任务。例如，margin-inline 设置 margin-left 和 margin-right 属性，而 inset 设置 top、right、bottom 和 left 属性。

/* BEFORE */
main {
  margin-left: auto;
  margin-right: auto;
}

/* AFTER */
main {
  margin-inline: auto;
}

网站可以通过 替换所有实例 left 和 right，将其逻辑对应项替换为网站的 CSS 代码，以添加对 RTL（从右到左）布局的支持。切换到逻辑 CSS 对所有网站都有意义，因为用户可能会使用机器翻译服务将网站翻译成 从右到左书写 的语言。使用 RTL 脚本的最大语言是阿拉伯语 (3.1 亿 名母语使用者)、波斯语 (7000 万 人) 和乌尔都语 (7000 万 人)。

/* Switch to RTL when Google translates the page to an RTL language */
.translated-rtl {
  direction: rtl;
}

David Bushell 的个人网站现在 使用 逻辑 CSS 并依赖于 Google 的 translated-rtl 类来切换网站的 内联基本方向。尝试在 Chrome 中将 David 的网站翻译成 RTL 语言，并比较 RTL 布局与网站的默认 LTR 布局。

Chrome 发布了三个有争议的 Fugu API

上周，Chrome 发布 了三个用于“高级硬件交互”的 Web API：桌面上的 WebHID 和 Web 串行 API 以及 Android 上的 Web NFC。所有这三个 API 都是 Google 能力项目的一部分，也称为 Project Fugu，并且是在 W3C 社区小组中开发的（尽管它们不是 Web 标准）。

• WebHID API 允许 Web 应用程序连接到没有兼容设备驱动程序的操作系统（例如任天堂的 Wii Remote）的老旧和不常见的 人机界面设备。
• Web 串行 API 允许 Web 应用程序通过 模拟 串行连接与外围设备（如微控制器（例如 Arduino DHT11 温度/湿度传感器）和 3D 打印机）进行通信（“逐字节”）。
• Web NFC 允许 Web 应用程序在短距离（小于 10 厘米）内无线读取和写入 NFC 标签。

其他两个主要浏览器引擎的开发人员 Apple 和 Mozilla 目前反对这些 API。Apple 已 决定“由于指纹识别、安全性和其他问题而暂不实施”。Mozilla 的担忧总结在 Mozilla 规范立场 页面上。

使用 preserveAspectRatio=none 拉伸 SVG

默认情况下，SVG 会缩放到 <svg> 元素的内容框，同时保持由 viewBox 属性定义的纵横比。在某些情况下，作者可能希望拉伸 SVG，使其完全填充两个轴上的内容框。这可以通过在 <svg> 元素上将 preserveAspectRatio 属性设置为 none 来实现。

以这种方式扭曲 SVG 可能看起来 违反直觉，但通过 preserveAspectRatio=none 值禁用纵横比对于响应式网页上的简单装饰性 SVG 图形来说可能是合理的。

当您使用路径作为边框或在某个部分添加一点效果（例如对角线）时，此值很有用，并且您希望路径填充空间。

WordPress 降低了斜体的使用

斜体字体可用于突出显示重要单词（例如 <em> 元素）、创意作品的标题（<cite>）、技术术语、外语短语（<i>）等等。谨慎使用斜体在这些情况下很有帮助，但是长段的斜体文本被认为是可访问性问题，并且 应避免。

对于某些患有阅读障碍或相关阅读障碍形式的人来说，斜体文本可能难以阅读。

本周早些时候发布的 WordPress 5.7 发布 了， 删除 了 WordPress 管理员中描述、帮助文本、标签、错误详细信息文本和其他地方的斜体，以“提高可访问性和可读性”。

在相关新闻中，WordPress 5.7 还放弃了自定义 Web 字体，而是选择使用系统字体。

CSS 自定义媒体查询仍然没有进展

CSS 媒体查询级别 5 模块指定了一个 @custom-media 规则，用于定义自定义媒体查询。此建议的功能最初是在将近七年前（在 2014 年 6 月）添加到 CSS 规范中的，此后一直没有得到进一步的开发，也没有得到浏览器供应商的任何兴趣。

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}

可以在多个地方使用的媒体查询可以分配给自定义媒体查询，该查询可以在任何地方使用，并且编辑媒体查询只需要修改一行代码。

自定义媒体查询可能要过相当长一段时间才能在浏览器中发布，但网站今天可以通过官方的 PostCSS 插件（或 PostCSS 预设环境）开始使用此功能，以减少代码重复并使媒体查询 更具可读性。

相关地，还有 作者定义的环境变量 的想法，该变量（与自定义属性不同）可以在媒体查询中使用，但此潜在的功能尚未在 CSS 规范中得到完全阐述。

@media (max-width: env(--narrow-window)) {
  /* narrow window styles */
}