Instead of Using Prefixes I Want to Ask Site Visitors to Upgrade Their Browser

Instead of using prefixes I want to ask site visitors to upgrade their browser

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⁽¹⁾ 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);
}

How to detect if CSS code is activated or not

As far as I remember css flex or order property is animatable, so you can trigger a class on an element with visibility hidden to turn on flex property. Then attach an eventListener for the transitionend event, and check if the property is from flex by checking event.propertyName, if this event is fired, it means it is supported. Here is a fiddle to illustrate, a class called active is turned on a div with #mock id and listened for transition:

https://jsfiddle.net/ibowankenobi/yLv39dsm/1/

document.getElementById("mock")
.addEventListener("transitionend",function(e){if(e.propertyName.match(/flex/gi)){alert("flex is supported")}});
setTimeout(function(){document.getElementById("mock").classList.add("active");},1000);

Apart from above, this question can help:

Detecting flex-wrap support in browsers

Also there seems to be an approach that seems to work:

https://gist.github.com/davidhund/b995353fdf9ce387b8a2

And of course, Modernizr probably has this already.

CSS useless vendor prefixes

I was looking for the same a while ago, and ran into this useful website: Should I prefix?. It lists the CSS properties and whether a prefix is still necessary or not.

Next to that, you can always check Can I Use for more info and detail.

Targeting browsers that don't support CSS grid with feature queries

According to articles like this one, browsers ignore CSS that they can't parse [...] However, as you can see in this test, IE11 ignores all the styles inside that query.

Well, yeah. Since Internet Explorer doesn't understand feature queries themselves, it's going to ignore @supports not (display: grid) and everything inside it, because it doesn't understand what that means. Just like the article says.

Overriding, i.e. making use of the cascade, is your only option. There is no clean way of doing this. The reality is that @supports was introduced too late to be useful for distinguishing browsers that don't support features that precede it, such as grid layout.

Site Doesn't Load in IE

Start with the machine detectable errors.

As an aside, don't comment out your scripts and stylesheets in XHTML (nice as it is to stop Netscape 2 from rendering them as text, it is counter productive in XHTML).

Javascript Vendor Prefix

image.style.webkitTransform = "scale(1.5)"

---

Related Topics