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

by

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);
}

More Related Contents:

  1. Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x – y), where y is unknown
  2. Center flex item in container, when surrounded by other flex items
  3. Fade animation while scrolling
  4. JS hide function error
  5. Get the longest text in HTML document using Jquery or javascript
  6. Javascript counting all the characters from a HTML document
  7. JSFiddle code not working in my own page
  8. Removing or replacing a stylesheet (a ) with JavaScript/jQuery
  9. What do curly braces in JavaScript mean?
  10. Remove all classes that begin with a certain string
  11. Add/remove class with jquery based on vertical scroll?
  12. How to use jQuery and jQuery plugins with PrimeFaces
  13. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  14. Is there any cross-browser javascript for making vh and vw units work
  15. How to show a running progress bar while page is loading
  16. Save a pre element as PDF with CSS
  17. jQuery event that triggers after CSS is loaded?
  18. jQuery Validation using the class instead of the name value
  19. Access CSS file contents via JavaScript
  20. Change the style of :before and :after pseudo-elements? [duplicate]
  21. How to use Javascript to check and load CSS if not loaded?
  22. Add CSS rule via jQuery for future created elements
  23. Preventing Child from firing parent’s click event
  24. Gaussian Blur onHover Using jQuery
  25. Placeholder for contenteditable div
  26. How do you swap DIVs on mouseover (jQuery)?
  27. Center an Image vertically and horizontally using CSS
  28. Change background on button click, using CSS only? [duplicate]
  29. Jquery/Javascript Opacity animation with scroll
  30. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?

Leave a Comment