这是实现此目的的唯一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);
}