我想让网站访问者升级浏览器，而不是使用前缀

小编典典

我想让网站访问者升级浏览器，而不是使用前缀

javascript

我正在使用CSS flexbox重新构建网站。

在检查浏览器兼容性时，我看到所有现代浏览器都支持flexbox，但Safari8和IE 10需要供应商前缀。

在检查GoogleAnalytics（分析）时，我发现过去6个月中有96％的网站访问者使用的浏览器完全支持flexbox。其余4％使用需要前缀或不提供支持的浏览器。

由于我们谈论的是4％的用户，并且这个数字会越来越小（并且我希望代码尽可能简洁明了），因此我考虑不使用前缀，而是要求用户升级其前缀。浏览器。

我如何定位较旧的浏览器，以便向用户显示一条消息，要求他们更新浏览器？

这是我到目前为止的内容：

<!--[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从IE10开始不再支持条件注释。

现在我需要类似的东西：

IE 10
Safari 7-8
Opera Mini <8
适用于Android的UC浏览器
Android浏览器<4.4

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

感谢所有的答案。显然，有很多方法可以解决此问题（Modernizr，PHP，jQuery函数，纯Javascript，CSS，浏览器update.org等），其中许多方法都可以完全有效地完成这项工作。

该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]-->

阅读 552

2020-05-01

共1个答案

小编典典

问题修改后的答案修改

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

由于CSS@supports无法在目标（不需要的）浏览器上运行：Safari7-8，IE<=10，Android浏览器<4.4，适用于Android的UC浏览器和Opera Mini <8，因此在这些浏览器上将显示“
browserupgrade”消息使用此规则。

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

有一些浏览器仍然支持非前缀flex但不支持@supportsIE11（1）和OperaMini8，但是幸运的是，我们可以使用一些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，尽管还没有人对其进行测试。

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

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

2020-05-01