相关疑难解决方法(0)

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

在检查浏览器兼容性时,我发现所有现代浏览器都支持flexbox,但Safari 8和IE 10需要供应商前缀.

在检查Google Analytics时,我发现过去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,browser-update.org等).这些方法中的许多方法都能完全有效地完成这项工作.

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

除了IE <= 7之外,这个CSS基本上涵盖了所有目标浏览器.

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

继昨天Eric Bidelman的谷歌I/O 演示之后@supports,我想到我会开始在Chrome Canary中玩它.然而,它提出了一个显而易见的问题:

检查浏览器是否支持@supports仅使用CSS 的最佳方法是什么？

我现在只是通过检查是否display: block支持它来玩弄它.显然,这种方法很有效,但我不确定这是否是最实用的方法:

body { background:#fff; font-family:Arial; }
body:after { content:'Ek! Your browser does not support @supports'; }

@supports (display:block) {
    body { background:#5ae; }
    body:after { color:#fff; content:'Your browser supports @supports, yay!'; }
}

这是一个JSFiddle演示中的这个实际操作.

这些尝试都无法正常工作(在Chrome金丝雀,至少):

@supports (@supports) { ... }
@supports () { ... }
@supports { ... }