10 superpowers HTML5 gives you (and you are not using)
Tags: html, javascript, tutorial, css
Published: 2019-10-19 05:14:37

The latest HTML spec has a big number of new features and the plans for future additions are constantly growing.

I have a feeling that the lack of awareness and cross-browser support are causing developers to be less curious about the updates and the new specs. But I definitely agree that overcoming the compatibility issues to use some new feature natively can be overwhelming.

In this post, I will list some nice features that may be out of your radar and can probably help you be more productive when writing your web applications. Some of them are widely supported by all browsers, some of them have very limited support.

<h3>1. <i>details</i> and <i>summary</i> tags</h3>
How many times did you create flags in your React and Angular code to keep the state of toggles, accordions, sliders in your components? Using <b>details</b> and <b>summary</b> tags you can handle this without writing a single line of javascript code.

{% gist https://gist.github.com/shadowwarior5/6f1584fbb675fc5fbab222a465ba1edb.js %}

Check this codepen for the full example
{% codepen https://codepen.io/erictheodore/pen/zYYBJrj %}
<b>details</b> and <b>summary</b> tags are supported by most major browsers excepting Edge and IE but have a <a href='https://github.com/javan/details-element-polyfill'>polyfill</a>.

<h3>2. Native modals</h3>
Everyone knows the headache of creating dialog and modal components that are responsive enough and flexible enough to be used across large systems. Actually we do have a native solution for this.

In this codepen you can see a simple example of how the <b>dialog</b> component of HTML 5.2 can be used. 
<i>Warning: the example is not including polyfills and is working only on desktop or android Chrome</i>
{% codepen https://codepen.io/erictheodore/pen/eYYzLQL %}

<b>dialog</b> has some nice capabilities like <b>backdrop</b> pseudo-class. Check <a href='https://alligator.io/html/dialog-element/'>this blog post</a> that is showing really nice example of using it.

Dialog element is supported by modern desktop and Android versions of Chrome. That's all. But you can use the <a href='https://github.com/GoogleChrome/dialog-polyfill'>polyfill that Google created</a> to use in other browsers and prepare your code for the day it will be supported natively by all browsers.

<h3>3. <i>calc()</i> </h3>
<i>calc()</i> is a CSS way to do any math and you can replace any numeric value by using this function. Modern preprocessors have capabilities that allow using math functions but the superpower of <i>calc()</i> is the ability to mix units - for example percents and pixels. 
<i>calc()</i> can be very useful in places you used javascript to calculate container height or width in a dynamic way.

If you write HTML and CSS you'll definitely need this function, don't skip learning it. Check <a href='https://slicejack.com/how-to-use-css-calc-function/'>this post</a> for a bunch of nice examples.

<h3>4. <i>contenteditable</i> attrubute</h3>
<b>contenteditable</b> attribute turns any element to editable in a magic way. This can be very useful when creating some custom user inputs like text processors, blog engines or anything else working with the text. Check this codepen to show a basic feature of this attribute.

{% codepen https://codepen.io/erictheodore/pen/jOOMxKm %}

The big suprise - <i>contenteditable</i> is supported by all major browsers, even by IE 6.

<h3>5. <i><mark>mark</mark></i> tag</h3>
<b>mark</b> is a very simple and useful native tag. Since dev.io supports <mark>native markup</mark> I can just show it here. It just <mark>marks</marks> things.

The syntax is very simple:
{% gist https://gist.github.com/shadowwarior5/37b15dc0463435a93fa353e32195a900 %}

<b>mark</b> element is supported by major browsers, IE support is starting from IE 9+.

<h3>6. <i>@supports()</i></h3>
Feature support in web development is a real pain point. CSS3 gave us a lot of nice tools to work with but we can never be sure that the cool new feature we are using is natively supported by different versions of different browsers on different operations systems on different devices. <b>@supports</b> function was created to make things easier. Overall - CSS supports natural fallback mechanisms - if something is not recognized - it will just be ignored by the browser. I think this function can make code cleaner and make it easier to build those logical blocks.

Example of such CSS block can look like this:
{% gist https://gist.github.com/shadowwarior5/155bee0f0c11b5264a8eec3a2072fa89 %}

It's important to say that this example is a bit utopic as <i>@supports</i> itself is not supported by all browsers. So, in real life our code will look this way:

{% gist https://gist.github.com/shadowwarior5/2f919956d79dcb186d8c77240f356f28 %}

<b>@supports()</b> is supported by the modern version of all major browsers and not supported by IE.

<h3>7. <i>meter</i> and <i>progress</i> tags </h3>
<b>meter</b> and <b>progress</b> tags are the native way to build progress bars and measurement visualizations:
{% codepen https://codepen.io/erictheodore/pen/YzzGoBv %}
Excepting the way they look, the difference between these 2 tags is only in semantics. The <a href='https://html.spec.whatwg.org/#the-progress-element'>spec</a> says:
The <b>progress</b> element represents the completion progress of a task.
The <b>meter</b> element represents a scalar measurement within a known range or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

Needless to say that <a href='https://css-tricks.com/html5-meter-element/'>there is an post</a> doing amazing things with <i>meter</i> on CSS-tricks. 
This tag is supported by all major browsers including IE10+ and also have a <a href='https://gist.github.com/strings28/667320'>polyfil</a> if needed.

<h3>8. Multicolumn elements</h3>
Multicolumn is a set of CSS attributes giving an easy way to split every HTML element to columns, very similar to what modern UI frameworks like Bootstrap offer.
Check this example:
{% codepen https://codepen.io/erictheodore/pen/pooEMpP %}
Without changing any display or sizing attributes we can easily split everything by using 1 attribute. <a href='https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts'>The spec</a> has some additional nice features that are worth checking. Multicolumn is a codename for a variety of CSS-attributes and their support depends on the exact subset. Check <a href='https://caniuse.com/#feat=multicolumn'>can-i-use</a> and query attributes you need.

<h3>9. <i>picture</i> tag</h3>
<b>picture</b> tag comes to solve the lack of ability to set different image sources and sizes for different media sources. It's a more flexible way to handle different versions of images for different resolutions. Check this example (this is a fork of <a href='https://codepen.io/CharlesKiarie77/pen/xbrLYq'>original codepen by CharlesKiarie</a> and a credit goes to him).
{% codepen https://codepen.io/erictheodore/pen/KKKgOYX %}
The image source is responsive to the media query as you can see if you will resize the screen to mobile dimensions.
<i>picture</i> tag is supported by all major browsers and has a <a href='https://scottjehl.github.io/picturefill/'>polyfill</a> for older versions of IE.

<h3>10. Web Components</h3>

Taking the whole web and mobile applications development stack - HTML and JS are parts of it that were very innovated in the last 5 years. The number and the frequency of newborn frameworks are growing. <b>Web Components</b> are the attempt to establish common conventions and patterns and it looks like they are here to stay, backed by top companies in the industry.
If you missed it - you should <a href='https://medium.com/@javier.ramos1/introduction-to-web-components-4c9bd528baee'>definitely check</a> and play with them.

These were 10 HTML5 features that I found useful and worth sharing. I hope you're able to find something that was new to you and something that can be useful in your work. 

You still need to remember that you'll need to use them carefully as not all of them are supported by all browsers in a native way.

Hope you had fun.
Will be happy to get your feedback.

<h2>Follow me on <a href='https://twitter.com/meiklyar'>Twitter</a> to get my latest updates!</h2>