如何使用 CSS 提示浏览器升级以支持非前缀 Flexbox？

升级浏览器指令：非前缀 Flexbox 浏览器的 CSS 方法

使用 CSS Flexbox 重新设计网站时，浏览器兼容性变得至关重要。 Flexbox 支持在现代浏览器中广泛存在，但 Safari 8、IE 10 和一些不太常见的浏览器除外。

一些 Web 开发人员不为这些特定浏览器使用供应商前缀，而是更愿意鼓励访问者升级他们的浏览器以获得更佳的用户体验。然而，问题是如何有效地针对这些过时的浏览器并显示一条消息，敦促用户升级。

一个解决方案是仅通过 CSS。通过利用 @supports 规则，我们可以定位不支持前缀 Flexbox 语法的浏览器。对于 IE 11 和 Opera Mini 8 等支持无前缀 Flexbox 但不支持 @supports 的浏览器，需要额外的 CSS 规则。

以下 CSS 片段涵盖了大多数目标浏览器，仅适用于 IE 7 及更早版本被排除：

.browserupgrade { display: block; }
_:-ms-fullscreen, :root .browserupgrade { display: none; }
:-o-prefocus, .browserupgrade { display: none; }
@supports (display: flex) { .browserupgrade { display: none; }}

要在 HTML 中显示升级消息，只需创建一个

<div>;使用“browserupgrade”类并填充所需的内容：

<div>

此方法可确保升级消息仅对使用非前缀 Flexbox 浏览器的访问者可见，鼓励他们升级以获得更流畅的网站经验。