HTML5 features that must be used!

By | August 9, 2015

728x90-popads_1

html5-development-banner

1. Media queries in JavaScript

The HTML5’s matchMedia API allows you to use media queries in JavaScript. If you want to change something programmatically depending on the screen that cannot be done with CSS this comes in really handy. It is widely supported with 88.87% of the Internet users browsers being able to process it.

Support starts from:
1. IE10+
2. Firefox 31+
3. Chrome 31+
4. Safari 7+
5. Opera 29+

 The syntax is the following:

If you want a truly responsive site you cannot just execute the conditional once when the user is first visiting the page but you would have to listen for changes to the screen size and execute the conditionals again.

We have created a simple wrapper for matchMedia that you can find useful:

We create a separate scope and inside it we define a function called makeResponsive which takes an object with possible min and max properties and a callback function which would be executed if the screen matches the numbers in min and max. We also listen for screen resize and execute our media queries again on such an occasion.

If you plan on using it, be sure to fill in some fallbacks in the wrapper above and modify it to suit your needs.

HTML5’s download attribute

The download attribute should be placed on an anchor and allow users to save the linked file instead of opening it in their browser. For example, if your anchor is an image – users would be presented with a download screen instead of opening it in their browser. However, the support is a bit lacking at the moment.

Browser support
1. IE – not supported
2. Firefox 31+
3. Chrome 31+
4. Safari – not supported
5. Opera 29+

Here is an example of how you can use:

Whenever the user clicks on the image, he will be prompted to download it and the default name would be facebook-bot.png instead of screen.png. Of course, you can set the name programmatically with something like:

 

728x90-popads_1