July 23, 2015 8:07 am

Useful HTML5 Features, Part 4

HTML 5 srcset attribute was much needed with the technologies that we have today. Smartphone use has been increasing tremendously and many Internet users are connecting to the web through slow 3G networks and serving them huge image files when they have a small viewport is not a good option. Not only does this deplete their traffic limit but it makes them wait forever for the website if they are not connected to a high-speed Wi-Fi.

Useful HTML5 Features

[wpdm_file id=143]DEMO

So, the srcset attribute came to the rescue. It allows you to serve different versions of an image to users depending on their viewport area.

Browser support

The browser support is not good enough yet but that would change in the near future.

Currently, IE Edge has partial support for srcset, Firefox 38+ and Chrome 39+ support srcset fully, Safari 7.1+ provides partial support and the attribute is fully supported in Opera from version 29+.

On a global scale, 55.75% of the Internet users are running browsers which can handle srcset.

For more information on browser support, visit Can I Use.

Srcset example

<img class="butterfly" src="butterfly-sm.png"
     alt="A butterfly"
     srcset="butterfly-lg.png 1100w,
             butterfly-md.png 752w,
             butterfly-sm.png 282w"
     sizes="50vw">

We create a normal img tag and set its src. The src would be used as a fallback for browsers that does not support the srcset attribute (they will always get the image provided in the src attribute as expected)

Then, in our srcset attribute we define all of our image versions in a comma-separated list. First, we write the path of the image followed by a space and the width of that image version followed by w.

Then, we add a sizes attribute and tell how much of the viewport is dedicated for the image. If you have breakpoints where the size of the image changes you can add media queries. Here is how the format for the sizes attribute looks like:[media query] [length], [media query] [length], .....

in our case, we want our image to always take 50vw units or 50% of the viewport so this should be taken into account when determining which image to serve.

CSS3 Transforms and Transitions

CSS3 Transforms have a pretty decent support with 90.9% global support. CSS3 Transitions have good support as well: 89.32% of user browsers support transitions.

Transforms allow us to rotate, scale, move and skew elements while transitions allow us to animate CSS properties over time. They can be used together to produce animations and effects.

Transforms and transitions examples

img {
            display: block;
            margin: 0 auto;
        }
        img.butterfly:hover {
        transform: rotate(360deg);
            transition: all 1s ease;
        }

Here we create a simple animation when the user hovers over our image. Each time the user hovers the image will rotate in 360 degrees within the period of 1 second. Since we have set up the rotate to be360deg or 360 degrees our image will return to its normal position after the transition finishes.

<div>
    <button class="hover-me-evo">Hover over me</button>

<img src="evolution.png" class="evo" alt=""/>
</div>

For our next, animation – we create a container with a button and an image. Whenever the user hovers over the button an animation will trigger for the image.

img.evo {
            float: left;
            width: 400px;
        }

        .hover-me-evo {
            display: block;
            font-size: 2em;
        }
        .hover-me-evo:hover + .evo {

        transform: translateX(calc(100vw - 420px));
            transition: all 2s ease;
        }

You can see that have used .hover-me-evo:hover + .evo to animate the image with class of .evo whenever the button with a class of .hover-me-evo is hovered upon.

The translate property moves an element. It takes two arguments – a unit measurement telling it how much to move the element in the X and Y axes. translateX takes only one argument and moves the element on the X axis, while translateY movies the element in the Y axis.

You can see that we move the element to the end of the viewport (100vw is 100% of the viewport or the rightmost corner) minus 420 px. Our image has a width of 400px so we do not want it to move beyond the viewport width.

Now, for our final example we add an image to the DOM:

<div>
<img class="mask" src="mask.png" alt="Mask"/>
</div>

Then, on hover we apply two css transforms – scale and skew. We increase the image’s width with 50% and the image’s height with 30% using scale. Giving scale a value of 1 would leave the image as is while giving it a value of 1.1 would scale it with 10%.

img.mask {
            clear: both;
            width: 250px;
        }
        img.mask:hover {

            transform: scale(1.5,1.3) skew(9deg);
            transition: all 0.3s linear;
        }

You can see that to add two or more CSS transforms you only separate them by space.

Conclusion

If you are not using CSS3 Transforms and Transitions yet, now is a good time to start applying them in your projects, at least because they are faster than animations produced with JavaScript.

Using the srcset attribute is also a good way to be forward compatible since if the user does not support it – they do not really lose anything as the normal src of the image would be loaded.

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:

Leave a Reply

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