How to display "Update your Browser" warning when it does not support HTML5?

Question

How to show the warning "Update your Browser" when the user browser does not support HTML5 tags or CSS3 properties?

One initiative that encourages this is the website http://www.updateyourbrowser.net/pt, but they provide a script for this.

It would be possible to do this without a javascript or jquery script, using only HTML5 and CSS3 techniques?

For example, if you use the tag <video> or <audio> putting a text inside it, before or after the tags <source>, as in the example below, this text will only be shown when the browser does not support these tags, hence Html5. But I couldn’t find a good way to style that warning. I also don’t know if that warning would be the best way to do it.

<video id="aviso">
   Desculpe mas seu navegador não dá suporte a HTML5
</video>

Even if it’s not possible, what’s the best way to do it with javascript/jquery?

Answer 1

You cannot detect "HTML5 support", but you can check support for individual features such as canvas, video, or geolocation.

There are 4 techniques to detect if browsers detect any functionality. Are they:

1 - Checks if a certain property exists in a global object (such as window or Navigator).

Example: testing the support for geolocation

2 - Create an element, then check if a certain property exists in that element.

Example: testanto support the canvas

3 - Create an element, check if a certain method exists in that element, then call the method and check the value it returns.

Example: testing which video formats are supported

4 - Create an element, define a property for a certain value, then check that the property has kept its value.

Example: testing what types of <input> are supported

Source: Detecting HTML5 Features

Answer 2

Hello, as our friend @Ricardo Peres said, just use the http://modernizr.com/

Put it on your page.

<script src="modernizr.min.js"></script>

And make

if (Modernizr.canvas) {
  // Suporta HTML5
} else {
  // não suporta
}

Answer 3

There are only two ways I know of finding out whether or not a browser supports the defaults HTML5 and CSS3

The first is to check the User Agent from the browser, and by making the treatment according to the result, you can discover this via server which received the reply request, and in the reply already do the processing of the page to be rendered, or via client, and render in the client itself.

PHP

$_SERVER['HTTP_USER_AGENT'];

JS

function UserAgente(){
      var ua = window.navigator.userAgent;
      return ua;
}

With this do a compatibility check according to the version of the browser used by the client....

Here you can find a complete list of User Agents

This form of fact is the most arduous and laborious.....

The second way is to use Modernizr to detect if the browser accepts such a feature, this is the most appropriate way.

So there is no other secret, just import the library and test the features according to your need.

The complete documentation you can find here.

Obs: One more detail, this goes of own opinion (in my case) It is no use to try to make the client update the browser.... this only generates discomfort for those who no longer come to technology with good eyes, what is worth more is trying to produce something that works in all possible environments... even if you get ugly face, what matters is the expected result to be obtained.

Answer 4

Could use Browse happy to warn the user to update the browser

<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a
href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

http://codepen.io/netsi1964/pen/nmbzg