javascript - 我不想使用前缀，而是希望网站访问者升级他们的浏览器

Question

我正在使用 CSS 重建网站 flexbox .

检查中browser compatibility ，我看到所有现代浏览器都支持 flexbox，除了 Safari 8 和 IE 10 需要 vendor 前缀。

在查看 Google Analytics 时，我发现过去 6 个月中 96% 的网站访问者使用完全支持 flexbox 的浏览器。其余 4% 使用需要前缀或不提供支持的浏览器。

因为我们谈论的是 4% 的用户，而且这个数字会越来越小，(而且我希望我的代码尽可能保持干净和简单)，我正在考虑不使用前缀，而是询问用户升级他们的浏览器。

How can I target older browsers in order to display a message to users asking them to update their browser?

这是我目前所拥有的:

<!--[if IE]>
    <div class="browserupgrade">
        <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">
           upgrade your browser</a> to improve your experience.</p>
    </div>
<![endif]-->

这个 IE 条件注释涵盖了 IE 版本 6、7、8 和 9。

这些访问者将收到带有下载当前浏览器链接的提醒。然而，Microsoft discontinued support for conditional comments starting with IE10 .

现在我需要类似的东西:

• IE 10
• Safari 7-8
• Opera Mini < 8
• 安卓 UC 浏览器
• Android 浏览器 < 4.4

是否有一个简单的 JS/jQuery 脚本来处理这项工作？还是另一种轻量级的方法？

---

解决方案

谢谢大家的回答。显然有很多方法可以解决这个问题(Modernizr、PHP、jQuery 函数、纯 Javascript、CSS、browser-update.org 等)。其中许多方法可以完全有效地完成这项工作。

我选择了最简单的一个:CSS(信用 @LGSon)。

此 CSS 基本上涵盖所有目标浏览器，IE <= 7 除外。

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

有关详细信息，请参阅答案。

对于那些使用 IE <= 7 的相对较少的访问者，HTML 中的条件注释:

<!--[if lte IE 7]>
    <div style=" ... inline styles here ...">
        browser upgrade message here
    </div>
<![endif]-->

Answer 1

问题编辑后修改的答案

这是实现该目标的唯一 CSS 方法。

作为CSS @supports不适用于您的目标(不需要的)浏览器:Safari 7-8、IE <= 10、Android 浏览器 < 4.4、适用于 Android 的 UC 浏览器和 Opera Mini < 8，您的“browserupgrade”消息将在使用此规则的浏览器上可见.

@supports (display: flex) { .browserupgrade { display: none; }}

有一些浏览器仍然支持无前缀的 flex 但不支持 @supports，IE 11⁽¹⁾ 和 Opera Mini 8，但幸运的是我们可以使用一些 CSS 特定规则来解决它们。

/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade { display: none; }

/* Opera Mini 8 */
:-o-prefocus, .browserupgrade { display: none; }

---

这是为您的目标浏览器显示升级消息的完整代码。

CSS

.browserupgrade { display: block; }

/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade { display: none; }

/* Opera Mini 8 */
:-o-prefocus, .browserupgrade { display: none; }

/* all modern browsers */
@supports (display: flex) { .browserupgrade { display: none; }}

HTML

<div class="browserupgrade">
    <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">
       upgrade your browser</a> to improve your experience.</p>
</div>

---

(1):IE 11 CSS 规则应该也适用于 IE Mobile 11，但还没有人对其进行测试。

---

CSS @supports 也可以作为 API 使用，CSS.supports() .这是一个写得很好的article by David Walsh .

---

此外，如果想要自动重定向这些浏览器，这里有一个小脚本可以在延迟 10 秒后执行此操作。

var el = document.querySelector('.browserupgrade');
if (window.getComputedStyle(el,null).getPropertyValue("display") != 'none') {
  setTimeout(function(){
    window.location = 'http://browsehappy.com/';        
  }, 10000);
}