我想要网站访问者升级他们的浏览器,而不是使用前缀

Question

我正在使用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) { .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浏览器和Opera Mini <8,您的"browserupgrade"消息将在这些浏览器上显示使用此规则.

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

有一些浏览器仍支持非前缀flex但不支持@supportsIE 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()使用.这是David Walsh撰写的一篇非常好的文章.

此外,如果想要自动重定向这些浏览器,这是一个小脚本,在延迟10秒后执行此操作.

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

Answer 2

前提

JavaScript style属性返回浏览器支持的指定元素的完整CSS属性集合,可以使用以下代码段进行测试:

for(var x in document.body.style)
    console.log(x);

无论是否为指定元素显式设置特定属性,都是如此.例如,可以通过在Chrome中运行以下代码段来测试此问题; 第一行将返回,false因为Chrome尚未支持未加前缀的appearance属性,而第二行将返回true.

console.log("appearance" in document.body.style);
console.log("-webkit-appearance" in document.body.style);

body{
    appearance:none;
}

但是,应该注意的是,如果使用JavaScript在元素上设置了不受支持的属性,则通过该style属性检查是否存在该属性将返回true:

document.body.style.appearance="none";
console.log("appearance" in document.body.style);

因此,我们将使用document.createElement()创建临时元素,以便我们可以确定我们正在检查的属性都没有以这种方式设置.(感谢Gothdo提出的这个建议,它消除了对任何假设的需要.)

要求

查看要定位的浏览器列表:

• Internet Explorer 10支持带-ms-前缀的flexbox .
• Safari 7和8支持带-webkit-前缀的flexbox .
• 据caniuse.com称,Opera Mini 自第5版以来一直支持flexbox而没有前缀,但是我无法证明其准确性,并且正在寻找有人来确认它.
• UC浏览器目前(v9.9)支持带-webkit-前缀的flexbox .
• 在v4.4之前,Android Browser支持带-webkit-前缀的flexbox .

解

我们可以从该列表中看到,所有要定位的浏览器都需要Flexbox属性的前缀,因此我们可以通过检查临时元素style集合中是否存在任何未加前缀的属性来定位它们.true在以上任何浏览器中运行时,以下代码段将返回:

console.log(!("flex" in document.createElement("p").style));

有了这些知识,我们现在可以创建一个工作解决方案,将浏览器升级消息显示给必要的浏览器.

if(!("flex" in document.createElement("p").style))
    document.getElementById("browserupgrade").style.display="block";

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

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

笔记

旧语法

当前的flexbox规范有一个版本使用了稍微不同的语法,其中一个区别是该order属性已命名flex-order.据我所知,唯一支持该语法的浏览器是IE10,它需要前缀,因此应该是上述解决方案的目标.但是,为了完整起见,如果有任何浏览器支持该语法而没有前缀,您可以包含对flex-order属性存在的附加检查,同时还检查该order属性是否存在以防有任何浏览器支持两种版本的语法.

var checkstyle=document.createElement("p").style;
if(!("flex" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle)))
    document.getElementById("browserupgrade").style.display="block";

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

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

火狐

Firefox在版本22中添加了对未加前缀的flexbox属性的支持,但在版本28之前不支持flex-flow或flex-wrap属性,因此要将v22-27添加到我们的定位,我们应该检查是否存在其中一个属性.

var checkstyle=document.createElement("p").style;
if(!("flex-flow" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle)))
    document.getElementById("browserupgrade").style.display="block";

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

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

Internet Explorer 11

尽管不需要加前缀,IE11对flexbox的支持仍然非常错误,所以你可能也想考虑定位它.有没有这样使用任何Flexbox的特性,然而IE 7-11(那种)支持的方式image-rendering财产通过非标准-ms-interpolation-mode特性,它支持在边缘/ V12后来放弃+,所以我们可以改为检查那个.但是,无法保证此属性不会重新添加到Edge的未来版本中,以便进行监视.

var checkstyle=document.createElement("p").style;
if(!("flex-flow" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle))||"-ms-interpolation-mode" in checkstyle)
    document.getElementById("browserupgrade").style.display="block";

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

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

Opera Mini

尽管caniuse.com声称Flexbox自第5版以来已经完全支持flexbox并且被广泛认为是此类信息的权威来源,但是如果你仍然想要定位它,你可以通过检查其中一个来实现.它不支持的无数属性.为了保持简洁,不过,我会建议更换-ms-interpolation-mode与检查检查transform-style它不支持通过Opera Mini的也不是由IE的边缘之前的版本.与之前的检查一样,应该监视这个,因为您可能不希望定位的Opera Mini的未来版本可能继续不支持该transform-style属性.

var checkstyle=document.createElement("p").style;
if(!("flex-flow" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle))||!("transform-style" in checkstyle))
    document.getElementById("browserupgrade").style.display="block";

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

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

更新

16/05/16:在问题更新后添加了额外的检查以定位更多浏览器.
16/05/16:根据评论中提供的反馈添加了对提议解决方案的更详细解释,并使其值得提供奖金.删除了旧的flexbox规范的检查,因为它们是多余的.
17/05/16:添加了一个临时元素来运行检查,而不是使用document.body,遵循Gothdo的建议,这导致删除建议使用getElementsByTagName()更广泛的浏览器支持.
23/05/16:添加了有关Internet Explorer 11和Opera Mini建议检查的注释.

Answer 3

您可以使用modernizr.js进行特征检测.

如果找不到该功能,则编写一些JavaScript以将用户重定向到上面的URL.

Answer 4

是的,我们有一个解决方案......

首先从(点击这里 - )https://modernizr.com/ (对于flexbox属性)下载自定义构建Modernizr 然后将最新的Jquery包含到您的页面,添加一些样式表,您就完成了!

(注意:没有必要下载自定义构建Modernizr,您可以直接从Modernizr CDN使用整个完整版本,但因为您只需要检查Flexbox属性;这就是我告诉您下载自定义构建的原因)

检查这个小提琴弹力盒支持小提琴

你的整个html页面(用css,jquery)就像这样......

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title>BroswerCheck</title>
    <style type="text/css">
        #browserupgrade{
            display:none;
            text-align:center;
            background:#F1070B;
            color:#FFFFFF;
            font-family:Segoe, "Segoe UI", Verdana, sans-serif;
            font-size:15px;
            padding:10px;}

        #browserupgrade a{
            color:#FFFFFF;
            background:#000000;
            text-decoration:none;
            padding:5px 15px;
            border-radius:25px;}
    </style>
    <script src="modernizr.js"></script>
</head>

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

    <script src="jquery-2.1.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            if (!Modernizr.flexbox) { $("#browserupgrade").show(); }
        });
    </script>
</body>
</html>

你的步骤将是,

1.下载自定义Modernizr以检测flexbox属性

2.在html标记中添加一个带有class ="no-js"的html页面

3.创建一个div来显示一条消息并将其隐藏起来

4.将jquery和Modernizr添加到您的页面

5.当浏览器不支持flexbox-property时显示div

(为此目的使用'Modernizr.flexbox'属性,如上面的脚本所示)

或者如果你不想使用Jquery,那么使用以下脚本(感谢@Shaggy),

$(document).ready(function () { 
    if(!Modernizr.flexbox)document.getElementByID("browserupgrade").style.display="??block";
});