每周平台新闻：减少动画、CORS、WhiteHouse.gov、弹出窗口和 100vw

Avatar of Šime Vidas
Šime Vidas 于

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费信用额度！

在本周的综述中，我们重点介绍了对新 <popup> 元素的提案，检查了获奖网站上 prefers-reduced-motion 的使用，了解如何选择加入跨域隔离，了解 WhiteHouse.gov 如何处理可访问性，并警告 100vh 的危险。

让我们看看新闻！

新的 HTML <popup> 元素正在开发中

1 月 21 日，微软 Edge 网页平台团队的 Melanie Richards 发布了一个 说明，用于提议的 HTML <popup> 元素（名称 尚未最终确定）。 几个小时后，来自 Google 的 Mason Freed 宣布了在 Blink 浏览器引擎中对该元素进行原型设计的 意向。 该实现的工作正在 Chromium 问题 #1168738 中进行。

弹出窗口是一个临时（瞬态）且“轻量级可关闭”的 UI 元素，它显示在所有其他元素的“顶层”。 <popup> 元素的目标是默认情况下完全可样式化且可访问。 <popup> 可以锚定到激活元素（例如按钮），但它也可以是页面加载时显示的独立元素（例如，教学 UI）。

Two use cases showing a white action menu with four gray menu links below a blue menu button, and another example of a blog button with a large dark blue tooltip beneath it with two paragraphs of text in white.

当用户按下 Esc 键或将焦点移动到其他元素时，<popup> 会自动隐藏（这被称为轻量级关闭）。 与 <dialog> 元素不同，一次只能显示一个 <popup>，并且与已弃用的 <menu> 元素不同，<popup> 可以包含任意内容，包括交互式元素

我们设想 <popup> 可用于各种不同类型的弹出式 UI。 我们选择使用操作菜单作为主要示例，但人们使用弹出式模式来呈现许多不同类型的内容。

获奖网站应尊重“减少动画”偏好

本周早些时候，AWWWARDS 宣布 了他们年度最佳网站奖的获奖者，这些奖项表彰了 2020 年的最佳网站。 以下网站获得了奖项

所有这些网站都非常动态，并且在加载和滚动过程中显示全屏动画。 不幸的是，此类动画会导致 患有前庭障碍的人 头晕和恶心。 因此，建议网站通过 prefers-reduced-motion 媒体查询减少或关闭非必要动画，该媒体查询对于那些表达了对减少动画的偏好的人（例如，Apple 平台上的“减少动画”选项）来说为真。 获奖网站中没有一个这样做。

/* (code from animal-crossing.com) */
@media (prefers-reduced-motion: reduce) {
  .main-header__scene {
    animation: none;
  }
}

正确执行此操作的网站示例是去年《动物之森》游戏的 官方网站。 该网站不仅通过 prefers-reduced-motion 尊重用户的偏好，还在页面的最顶部提供自己的“减少动画”切换按钮。

Screenshot of the animal crossing game website that is bright with a solid green header above a gold ribbon that displays menu items. Below is the main banner showing a still of the animated game with a wooden welcome to Animal Crossing sign in the foreground.

(来自 Eric Bailey)

网站现在可以选择加入跨域隔离

跨域隔离是“长期安全改进”的一部分。 网站可以通过添加以下两个 HTTP 响应头来选择加入跨域隔离，这两个响应头已在 Chrome 和 Firefox 中得到支持

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

一个 跨域隔离页面 放弃了在没有明确选择加入（通过 CORS 头）的情况下从其他来源加载内容的能力，作为回报，该页面获得了对某些强大的 API 的访问权限，例如 SharedArrayBuffer。

if (crossOriginIsolated) {
  // post SharedArrayBuffer
} else {
  // do something else
}

白宫重申对可访问性的承诺

拜登政府的全新 WhiteHouse.gov 网站是在短短六周内从头开始构建的，可访问性是其首要任务（“可访问性是首要考虑因素”）。 微软的可访问性首席官员审查了该网站并 给予了赞许。

该网站的可访问性声明（链接自网站页脚）声明了“对可访问性的承诺”，并直接引用了最新的 Web 内容无障碍指南版本，WCAG 2.1（2018）。 这一点 值得注意，因为美国联邦机构只需要遵守 WCAG 2.0（2008）。

Web 内容无障碍指南是互联网可访问性的最广泛接受的标准。 ...... 通过引用 WCAG 2.1（最新版本的指南），拜登政府可能表明了对 WCAG 模型的更广泛接受。

CSS 100vw 值会导致无用的水平滚动条

在 Windows 上，当网页具有垂直滚动条时，该滚动条会占用空间并缩减页面的 <html> 元素的宽度； 这被称为经典滚动条。 macOS 上的情况并非如此，它使用的是叠加滚动条而不是经典滚动条； 垂直叠加滚动条不会影响 <html> 元素的宽度。

macOS 用户可以通过在系统偏好设置 > 常规中将“显示滚动条”设置为“始终”来从叠加滚动条切换到经典滚动条。

CSS 长度值 100vw 等于 <html> 元素的宽度。 但是，如果向页面添加了经典垂直滚动条，<html> 元素会变窄（如上所述），但 100vw 保持不变。 换句话说，当存在经典垂直滚动条时，100vw 比页面 更宽。

这对于使用 100vw 但没有意识到其特殊性的 macOS 上的网页开发者来说可能是个问题。 例如，一个网站可能在其文章标题上设置 width: 100vw 以使其 全宽，但这会导致 Windows 上出现无用的水平滚动条，一些网站访问者可能会觉得很烦人。

Screenshot of an article on a white background with a large black post title, post date and red tag links above a paragraph of black text. A scrollbar is displayed on the right with two large red arrows illustrating the page width, which is larger than the 100 viewport width unit.

macOS 上的网页开发者可以 切换到经典滚动条 以确保 100vw 引起的溢出错误不会被忽视。 与此同时，我已经 请求 CSS 工作组提供意见。

嘘！ 创建一个 DigitalOcean 帐户，并获得 200 美元的免费信用额度，用于基于云的托管和服务。

评论

  1. TheThirdRace
    评论永久链接#

    开发人员一直在请求一个相对于视窗的单位，以便他们最终能够获得全宽和/或全高 而无需任何麻烦。

    CSS 管理组为我们提供了 vw 和 vh。 以下是有关 https://www.w3.org/TR/css-values-3/#viewport-relative-lengths 的规范

    视窗百分比长度相对于初始包含块的大小。 当初始包含块的高度或宽度发生变化时，它们会按比例进行缩放。 但是，假设任何滚动条都不存在。

    请注意“假设任何滚动条都不存在”。

    不知何故，浏览器毫不犹豫地照字面意思理解了这一点。

    据我所知，当一个文本区域获得滚动条时，它不会变得更大。 内容只会调整到更小的容器大小，因为滚动条现在在右侧占用了一点空间。 它很简单、直观且响应式。

    为什么开发人员希望看到文本区域由于滚动条的出现而变得更大？ 它可能会完全破坏你的布局。

    然而，浏览器一次又一次地犯着同样的错误。

    我绝不希望由于需要垂直滚动条而出现水平滚动条。

    我绝不希望我的 100vh 容器超出视窗底部，因为浏览器正在显示或不显示地址栏。

    有些人会说，如果考虑到滚动条，这可能会导致重排。 没错。

    但我每天至少要调整窗口大小 30 次，没有人关心回流。这就是响应式设计的本意，每当容器大小改变时，布局都会回流。

    另一方面，只要我看到水平滚动条，就有 99.9% 的可能是错误，我一定会竭尽全力去修复。

    为什么我们不能拥有美好的事物呢？

    我想我们必须等待一个新的 wwrwirl vw/vh 单位，其中 wwrwirl 代表 what we really want in real life（现实生活中我们真正想要的）？

  2. Psyklon
    评论永久链接#

    我的解决方案是 width:100vw; max-width:100%

  3. Mark
    评论永久链接#

    “美国联邦机构只需要遵守 WCAG 2.0”

    这句话在几个方面都不正确。

    联邦网站根本不符合 WCAG。他们遵守 ADA 的第 508 条款。
    2017 年，人们决定根据第 508 条款与网站相关的规则与 WCAG 2.0 的 AA 等级非常接近，因此如果网站达到该等级，也符合 508 条款。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。

© 2024 . All rights reserved.