July 8, 2015 1:23 am

Useful HTML5 Features

In the next couple of articles, we will be presenting many useful HTML5 features and APIs. In this article, we will present matchMedia and will provide you with a simple wrapper around it and the HTML5’s download attribute.

Useful HTML5 Features

[wpdm_file id=142]DEMO

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 (window.matchMedia("(min-width: 720px)").matches) {
           // execute code here only if the screen is wider than 720px
        }

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:

function responsify() {
        function makeResponsive(args,callback) {
          var mQuery = args.min && args.max ? "(min-width: " + args.min + "px" + ") and (max-width: " + args.max + "px)" : "";
            mQuery = !mQuery.length && args.min ? "(min-width: " + args.min + "px)" : mQuery;
            mQuery = !mQuery.length && args.max ? "(max-width: " + args.max + "px)" : mQuery;
            if (!window.matchMedia) {
                //provide fallbacks
            }
          if (window.matchMedia(mQuery).matches) {
                callback();
            }
        }

        function responsiveHandlers() {
            //bootstrap xs device
            makeResponsive({'min' : 1}, function() {
                document.getElementsByTagName("body")[0].style.backgroundColor = "#000";
            })

            //bootstrap sm device
            makeResponsive({'min' : 768}, function() {
                document.getElementsByTagName("body")[0].style.backgroundColor = "crimson";
            })

            //bootstrap md device
            makeResponsive({'min' : 992}, function() {
                document.getElementsByTagName("body")[0].style.backgroundColor = "lime";
            })
            //bootstrap lg class
            makeResponsive({'min' : 1200}, function() {
                document.getElementsByTagName("body")[0].style.backgroundColor = "orange";
            })
        }


        responsiveHandlers();
        window.addEventListener("resize", function() {
            responsiveHandlers()
        })
    }

    responsify();

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

<a href="img.png" download="img.png">
    <img src="img.png" alt="PHPGang the Facebook insight"/>
</a>

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:

download="<?php echo $dlname;?>"

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories:

2 responses to “Useful HTML5 Features”

  1. Master Yi says:

    very like this page 🙂

  2. Bhumi says:

    Nice explanation. Thanks for the article.

Leave a Reply

Your email address will not be published. Required fields are marked *