而不是使用前缀，我想要网站访问者升级他们的浏览器 [英] Instead of using prefixes I want to ask site visitors to upgrade their browser
问题描述
我正在使用CSS重新构建网站 flexbox 。
在检查浏览器兼容性，我看到所有现代浏览器都支持flexbox，只是Safari 8和IE 10需要供应商前缀。
在检查Google Analytics（分析）时，我发现96％网站访问者在过去6个月使用完全支持flexbox的浏览器。剩余的4％使用需要前缀或不提供支持的浏览器。
由于我们谈论的是4％的用户，我想保持我的代码尽可能干净和简单），我正在考虑不使用前缀，而是要求用户升级他们的浏览器。
如何定位旧版浏览器，以便向用户显示要求更新浏览器的邮件？ b
这里是我到目前为止：
<！ - [if IE]
< div class =browserupgrade>
< p>您使用的浏览器版本过旧。请< a href =http://browsehappy.com/>
升级您的浏览器< / a>以改善您的体验。< / p>
< / div>
<！[endif] - >
此IE条件注释涵盖了IE 6,7,8和9版本。
这些访问者将收到一条包含当前浏览器下载链接的提醒。但是， Microsoft已停止支持以IE10开头的条件注释。
现在我需要类似的东西：
- IE 10
- Safari 7-8
- Opera Mini< 8
- 适用于Android的UC浏览器
- Android Browser< 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 ...>
浏览器升级消息在这里
< / div>
<！[endif] - >
问题编辑后的修订答案
这里是一个CSS的唯一方式来实现。
由于 CSS @supports 无法在您的目标8，IE≤10，Android浏览器< 4.4，用于Android的UC浏览器和Opera Mini& 8，您的browserupgrade消息将在使用此规则的用户上显示。
@supports（display：flex）{.browserupgrade {display：none; }}
有几个浏览器仍然支持非前缀 flex 但不支持 @supports ，IE 11 （1）和Opera Mini 8，使用几个CSS特定规则来处理它们。
/ * IE 11 * /
_： - ms-fullscreen ，：root .browserupgrade {display：none; }
/ * Opera Mini 8 * /
：-o-prefocus，.browserupgrade {display：none; }
以下是显示升级的完整代码
.browserupgrade {display ：block; }
/ * IE 11 * /
_： - ms-fullscreen，：root .browserupgrade {display：none; }
/ * Opera Mini 8 * /
：-o-prefocus，.browserupgrade {display：none; }
/ *所有现代浏览器* /
@supports（display：flex）{.browserupgrade {display：none; }}
HTML
< div class =browserupgrade>
< p>您使用的浏览器版本过旧。请< a href =http://browsehappy.com/>
升级您的浏览器< / a>以改善您的体验。< / 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）;
}
I'm re-building a site using CSS flexbox.
In checking browser compatibility, I see that flexbox is supported by all modern browsers, except that Safari 8 and IE 10 require vendor prefixes.
In checking Google Analytics, I see that 96% of site visitors in the last 6 months use browsers that fully support flexbox. The remaining 4% use browsers that require prefixes or provide no support.
Since we're talking about 4% of users, and the number will keep getting smaller, (and I like to keep my code as clean and simple as possible), I'm considering not using prefixes, and instead asking users to upgrade their browsers.
How can I target older browsers in order to display a message to users asking them to update their browser?
Here's what I have so far:
<!--[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]-->
This IE conditional comment covers me for IE versions 6, 7, 8 and 9.
These visitors will get an alert with a link to download a current browser. However, Microsoft discontinued support for conditional comments starting with IE10.
Now I need something similar for:
- IE 10
- Safari 7-8
- Opera Mini < 8
- UC Browser for Android
- Android Browser < 4.4
Is there a simple JS/jQuery script to handle this job? Or another lightweight method?
Solution
Thanks for all the answers. Clearly there are many ways to tackle this problem (Modernizr, PHP, jQuery functions, plain Javascript, CSS, browser-update.org, etc.) Many of these methods will do the job completely and effectively.
I went with the simplest one: CSS (credit @LGSon).
This CSS covers essentially all targeted browsers, except for IE <= 7.
.browserupgrade { display: block; }
_:-ms-fullscreen, :root .browserupgrade { display: none; }
:-o-prefocus, .browserupgrade { display: none; }
@supports (display: flex) { .browserupgrade { display: none; }}
See the answer for details.
And for those relatively few visitors using IE <= 7, a conditional comment in the HTML:
<!--[if lte IE 7]>
<div style=" ... inline styles here ...">
browser upgrade message here
</div>
<![endif]-->
Revised answer after question edit
Here is a CSS only way to achieve that.
As the CSS @supports won't work on your targeted (unwanted) browsers: Safari 7-8, IE <= 10, Android Browser < 4.4, UC Browser for Android and Opera Mini < 8, your "browserupgrade" message will be visible on those using this rule.
@supports (display: flex) { .browserupgrade { display: none; }}
There is a few browsers that still does support the non-prefixed flex but doesn't support @supports, IE 11(1) and Opera Mini 8, but luckily we can address them with a couple of CSS specific rules.
/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade { display: none; }
/* Opera Mini 8 */
:-o-prefocus, .browserupgrade { display: none; }
Here is the complete code to show an upgrade message for your targeted browsers.
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): The IE 11 CSS rule should work on IE Mobile 11 too, though haven't one to test it on.
The CSS @supports is also available as an API, CSS.supports(). Here is a very well written article by David Walsh.
Additionally, if one would like to automatically redirect those browser, here is a small script that does that, after a delay of 10 sec.
var el = document.querySelector('.browserupgrade');
if (window.getComputedStyle(el,null).getPropertyValue("display") != 'none') {
setTimeout(function(){
window.location = 'http://browsehappy.com/';
}, 10000);
}
这篇关于而不是使用前缀，我想要网站访问者升级他们的浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
