Microsoft Edge浏览器宣布弃用 CSS 媒体查询和属性

技术宅在浏览器控制台发现，网页打开报了一堆警告，具体警告内容如下：

thax.cn/:1  [Deprecation]-ms-high-constrast is in the process of being deprecated. Please see https://blogs.windows.com/msedgedev/2024/04/29/deprecating-ms-high-contrast/ for tips on updating to the new Forced Colors Mode standard.

但是仅仅在Microsoft Edge报错，其他浏览器没有，查看了下链接，发现是Microsoft Edge浏览器宣布弃用 CSS 媒体查询和属性，以支持Microsoft Edge于 2020 年在基于 Chromium 的浏览器中实施的基于标准的强制颜色功能。-ms-high-contrast-ms-high-contrast-adjust。

对比度主题是 Windows 的一个非常重要的辅助功能，它使文本更明显、更易于阅读。过去，Internet Explorer 和 Microsoft Edge 与 EdgeHTML 引擎使网站能够使用 和 CSS 功能来支持用户的对比度主题设置。在 2020 年，我们更进一步，与 Chromium 合作，将 Web 上对对比主题的支持标准化，使其不仅适用于 Edge，也适用于任何实现该功能支持的引擎。我们将该功能重命名为 强制颜色。今天，基于 Chromium 的浏览器以及 Firefox 都支持强制颜色。-ms-high-contrast-ms-high-contrast-adjust。

弃用旧版以 ms 为前缀的 CSS 功能

当我们首次在基于 Chromium 的 Edge 中提供强制颜色功能时，我们还希望使用 Internet Explorer 和 Microsoft Edge 中的旧版 CSS 功能以及 EdgeHTML 引擎的网站能够继续工作。因此，我们保留了对 media 查询和属性的支持。-ms-high-contrast-ms-high-contrast-adjust

今天，我们宣布了这些 CSS 功能的弃用流程。继续阅读以了解预期内容以及如何迁移到新属性。

弃用期

为了减少互操作性问题并收集反馈，我们计划慢慢弃用 Microsoft Edge 中的旧版媒体查询和属性。-ms-high-contrast-ms-high-contrast-adjust

从 Edge 130 开始，我们已经开始在 Microsoft 内部逐步弃用这些 CSS 功能，以收集早期数据。从 Edge 134 开始，我们将开始为外部 Edge 用户逐步弃用它们，Edge 134 将于 2025 年 1 月提供给 Edge Canary 用户，并将于 2025 年 3 月达到 Edge 的稳定版本。

我们计划完全禁用 Edge 138 的旧版实施，但该计划可能会根据我们在此次弃用试用期间收到的反馈而发生变化。

尽早测试 depreation

我们为您介绍了一种方法，让您在完全禁用旧版高对比度实现之前检查新的强制颜色样式是否正常工作。要检查您的样式，您可以在 Microsoft Edge 中本地禁用旧版实现：

• 打开新窗口或选项卡。
• 转到该选项卡中的 。edge://flags/#edge-ms-high-contrast
• 从下拉菜单中，选择 Disable。
• 重新启动 Microsoft Edge。

DevTools 警告

作为弃用过程的一部分，Microsoft Edge 还将在 DevTools 控制台工具中为从 Edge 版本 126 开始在其样式表中使用旧属性的任何站点显示警告。

源试用

最后，为了让您的网站在 Edge 134 之后也能正常运行，当旧实施的弃用开始时，我们将开始 Origin Trial。此 Origin Trial 可让您保持旧版实施适用于 Edge 134 和 138 之间的域，让您有时间迁移到新的强制颜色 CSS 功能。有关更多详细信息，请参阅 Microsoft Edge Origin 试用版。

在弃用之前，Microsoft Edge 将联系辅助功能测试人员和已知使用旧属性的站点，以防止在弃用发生时发生中断。

如何将样式更新为新的强制颜色标准

如果您的网站在 Windows 设置为对比主题时使用旧版媒体查询和属性来修改其样式，我们建议您在弃用旧版属性之前采用新的强制颜色模式标准。-ms-high-contrast-ms-high-contrast-adjust

下表显示了如何将旧属性转移到新标准：

@media (-ms-high-contrast: active) {}      需更新为   @media (forced-colors: active) {}
@media (-ms-high-contrast: black-on-white) {}      需更新为  @media (forced-colors: active) and (prefers-color-scheme: light) {}
@media (-ms-high-contrast: white-on-black) {}      需更新为  @media (forced-colors: active) and (prefers-color-scheme: dark) {}
-ms-high-contrast-adjust: none;      需更新为  forced-color-adjust: none;

请注意，在将对比主题样式迁移到新的强制颜色模式标准时，您需要考虑一些关键差异。其中包括对样式级联、系统颜色关键字和本机表单控件设计的更改。有关更多详细信息，请参阅使用 Forced Color 的新标准的 Windows 高对比度样式。

如何在网站上测试强制颜色模式

要检查您的网站在使用对比主题时的呈现方式，您可以更改 Windows 设置以使用对比主题或通过 DevTools 模拟它。

要更改 Windows 设置：

• 在 Windows 10 上：转到“设置”>“轻松使用”>“高对比度”，然后单击“打开高对比度”。
• 在 Windows 11 上：转到“设置”>“辅助功能”>“对比度主题”，从“对比度主题”下拉菜单中选择一个主题，然后单击“应用”。

如果您想在其他操作系统（如 macOS 或 Linux）上测试您的网站，或者如果您不想更改 Windows 主题，您还可以使用 Microsoft Edge DevTools 模拟强制颜色模式：

• 按 或 打开 DevTools。F12Ctrl+Shift+I
• 通过单击“更多工具 （+）”>“渲染”打开“渲染”工具。
• 向下滚动到模拟 CSS 媒体功能强制颜色。
• 选择 forced-colors：active 以模拟强制颜色模式。或者选择 forced-colors：none 以停止模拟强制颜色。
• 您还可以通过使用 Emulate CSS media feature prefers-color-scheme 下拉菜单并将其值设置为 prefers-color-scheme：light 或 prefers-color-scheme：dark，来选择特定的强制颜色主题。

通过使用 DevTools 中的仿真功能，您可以预览您的网站在不同对比主题的用户眼中的外观，并相应地调整您的样式。