HTML5 Features You Must Use Today For Mobile

Whether you are developing for Firefox OS or PhoneGap or mobile web, you must take advantage of some HTML5 features that are well supported by modern browsers and can reduce the development time. Remember this article provide quick introduction to each of the feature along links to other quality posts for more details.

Viewport-Relative Units

Percentage in CSS is relative to parent element which sometimes make confusion when working with nested elements having width/height set using percentage. Take a look at following example.

See the Pen Problem With Percentage by Fawad Hassan (@iFadey) on CodePen

Even though #inner has 100% width applied using CSS but browser will display it 50% wide because as I mentioned above, percentages are relative to parent element. #outer has 50% width so 100% of #inner will actually be 50%.

Viewport-Relative units vh (height) and vw (width) are always relative to viewport. Viewport is the area where page contents are rendered and you can get width and height of viewport using JavaScript.

console.log(window.innerHeight);
console.log(window.innerWidth);

Units specified using vw and vh will always be relative to window.innerWidth and window.innerHeight no matter where the element is nested.

See the Pen Izpsa by Fawad Hassan (@iFadey) on CodePen


Root Relative em

CSS em unit is nice way to make lot of things flexible like font size, margin, padding, height, width, etc. But it has similar characteristic of “relative to parent element” like percentages. So the unit rem is introduced which always remain relative to font-size defined at root element (typically body). Take a look at example below for better understanding.

See the Pen em vs rem by Fawad Hassan (@iFadey) on CodePen

Don’t forget to read comments in CSS in above example.

Check this post for more detail on rem.

CSS calc() Function

Sometimes with standard CSS box model, it becomes difficult to set exact height/width of an element when working with flexible units like percentages or viewport-relative units.

See the Pen Problem With Box Model by Fawad Hassan (@iFadey) on CodePen

In above example, both div and input element overflows from the right because the total width exceeds 100%. Here’s the actual width of div.

WIDTH = 100% + 12px left padding + 12px right padding

From above width, you can see there’s extra 24px width which we need to deduct from div. We can do so using calc() function. Here’s the same example including the fix using calc().

See the Pen CSS calc() Usage by Fawad Hassan (@iFadey) on CodePen

You may have noticed the power of calc() function from above example. You can pass expression containing values with different CSS supported units like em, rem, px, cm, etc.

Check calc() reference on MDN for more info.

Touch Events

Always use touch events (touchstart, touchmove, touchend) instead of mouse events (like click, double click, etc) when you are developing for touch devices. This way you can not only eliminate 300ms delay from click event but also support features like multi touch. Here is example usage:

var el = document.getElementById('ElementId');
 
el.addEventListener('touchstart', function (e) {
  //event handler body...
}, false);
 
el.addEventListener('touchmove', function (e) {
  //event handler body...
}, false);
 
el.addEventListener('touchend', function (e) {
  //event handler body...
}, false);

Remember touch events fire before mouse events. I recommened you to read this post for detailed introduction.


SVG

These days developers are using Adaptive/Responsive techniques to handle different screen sizes. Raster/Bitmap images are not responsive friendly. So it’s much better if we use SVG (vector format) for icons and other images where possible because vector formats are flexible and look nice on both small and large screens. SVG is now popular enough and you can easily find icons in SVG format from sites like IconFinder. You can display SVG images in HTML using img tag just like you display other formats.

<img src="icon.svg" alt="Some Icon" />

I recommend you to read this post on SVG introduction and SVG sprites. It would be great if you learn about basics of writing SVG by hand, styling SVG elements using CSS. Similarly if you are interested in data visualizations, I recommend you to take a look at d3.js library which is extremely powerful and make heavy use of SVG.

Flexbox

Flexbox is a new way to create CSS layouts. Creating layout using flexbox reduces complexity and require less code.

Instead of giving basic introduction to flexbox, I will show you a practicle example because there’s already lot of good introductory content available for flexbox.

A Complete Guide to Flexbox
Designing CSS Layouts With Flexbox Is As Easy As Pie

Example: Blog Layout

We will create following blog like layout using flexbox.

flexbox

Let’s start with HTML structure first.

<div id="wrapper">
 
  <header>Header</header>
 
  <div id="main">
    <section class="content">Content</section>
    <section class="sidebar">Sidebar</section>
  </div>
 
  <footer>Footer</footer>
 
</div>

First there’s a div#wrapper which contains header, div#main, and footer. Further the div#main contains section.content and section.sidebar.

Now using CSS, we will make div#wrapper fixed and stretch it both vertically and horizontally.

#wrapper {
  position: fixed;
 
  /* no space on top and bottom */
  top: 0; bottom: 0;
 
  /* add 5% space on left and right */
  left: 5%; right: 5%;
 
  width: 90%;
}

Note that I am skipping visual styling to simplify code and focus on layout styles. Take a look at complete source in the end of this section.

Now add flexbox related styles to above #wrapper.

display: flex;
 
/* make direction of child elements vertical */
flex-direction: column;

Now set flex property for header element.

header {
  /*
    shorthand for
    flex-grow: 1,
    flex-shrink: 1,
    flex-basis: 50px
  */
  flex: 1 1 50px;
}

flex-basis is like a base value and other two properties flex-grow and flex-shrink works according to this base value. Both grow and shrink are actually ratios which define how much header element will expand or shrink according to the total space in container element (#wrapper). The same flex property will be used for both #main and footer.

footer { flex: 1 1 30px; }
 
#main { flex: 6 1 100px; }

From above styles, flex-grow ratio of header:#main:footer will be 1:6:1.

section.content and section.sidebar are child elements of div#main which we want to display horizontally and have some space between them. We can do so by making #main as flexbox just like we did with #wrapper. So add more CSS properties to #main.

#main {
  display: flex;
  justify-content: space-between;
}

Now #main is a flexbox and containing children will fill the space according to there defined width and remaining space will be used between the elements. This space division around main axis is controlled using justify-content property. Here’s complete source to create exact same layout shown in above screenshot.

See the Pen jdFlD by Fawad Hassan (@iFadey) on CodePen


HTML5 Form Controls

HTML5 has introduced many new controls and attributes which previously require custom implementation using JavaScript. It’s better option to use browser’s native implementation from both performance and development time prespective.

Attributes

Some of these attributes are:

Autofocus

This attribute will focus the HTML control as soon as the page loads.

<input type="text" name="username" autofocus>

Required

This attribute makes the control a required field and it complains when it’s not filled.

<input type="password" name="password" required>

Placeholder

It’s used to provide hint what kind of data user must enter.

<input type="search" name="searchQuery" placeholder="Search...">

Controls

Color Picker

Now you can easily add color picker in your HTML forms using color input.

<input type="color">

Email

You can use email input control in which user can enter single or multiple email addresses separated by commas.

<input type="email">

Range

Range control allow user to select a value from specified range using slider.

<input type="range">

Default range for this control is 0 to 100 but you can set custom range using min and max attributes. Similarly you can set default selected value using value attribute.

<input type="range" min="1" max="10" value="8">

HTML5 Forms is a large topic and it may require a complete article or a chapter in a book to cover it thoroughly. I recommend you to read this article to know more about exciting attributes/controls that HTML5 had introduced.


async and defer Attributes

It’s considered as a best practice to place the script files before closing body tag <body/> because of there blocking nature. But this is no more required if we use defer attribute in script tag.

<script src="path/to/script.js" defer></script>

defer attribute when added to script tag will load the script asynchronously and will not block the loading process of rest of the page. But it won’t get executed even if the script is loaded. Instead the deferred script will execute right before DOMContentLoaded event in the order in which they are included.

Similarly async attribute will load the script file asynchronously just like defer element but it gets executed as soon as the script file is loaded. So use async attribute with those scripts whose execution order is not important e.g. analytics script.

If you enjoyed this article, don’t forget to subscribe using RSS or Email.


comments powered by Disqus