我想让网站访问者升级浏览器,而不是使用前缀
我正在使用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]-->
回答:
问题修改后的答案修改
这是实现此目的的唯一CSS方法。
由于CSS@supports
无法在目标(不需要的)浏览器上运行:Safari7-8,IE<=10,Android浏览器<4.4,适用于Android的UC浏览器和Opera Mini <8,因此在这些浏览器上将显示“
browserupgrade”消息使用此规则。
@supports (display: flex) { .browserupgrade { display: none; }}
有一些浏览器仍然支持非前缀flex
但不支持@supports
IE11(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);
}
以上是 我想让网站访问者升级浏览器,而不是使用前缀 的全部内容, 来源链接: utcz.com/qa/412949.html