10 superpowers HTML5 gives you (and you are not using)

#html #javascript #tutorial #css

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.

1. details and summary tags

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 details and summary tags you can handle this without writing a single line of javascript code.

Check this codepen for the full example

details and summary tags are supported by most major browsers excepting Edge and IE but have a polyfill.

2. Native modals

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 dialog component of HTML 5.2 can be used.
Warning: the example is not including polyfills and is working only on desktop or android Chrome

dialog has some nice capabilities like backdrop pseudo-class. Check this blog post 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 polyfill that Google created to use in other browsers and prepare your code for the day it will be supported natively by all browsers.

3. calc()

calc() 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 calc() is the ability to mix units - for example percents and pixels.
calc() 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 this post for a bunch of nice examples.

4. contenteditable attrubute

contenteditable 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.

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

5. mark tag

mark is a very simple and useful native tag. Since dev.io supports native markup I can just show it here. It just marks things.

The syntax is very simple:

mark element is supported by major browsers, IE support is starting from IE 9+.

6. @supports()

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. @supports 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:

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

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

7. meter and progress tags

meter and progress tags are the native way to build progress bars and measurement visualizations:

Excepting the way they look, the difference between these 2 tags is only in semantics. The spec says:
The progress element represents the completion progress of a task.
The meter 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 there is an post doing amazing things with meter on CSS-tricks.
This tag is supported by all major browsers including IE10+ and also have a polyfil if needed.

8. Multicolumn elements

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:

Without changing any display or sizing attributes we can easily split everything by using 1 attribute. The spec 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 can-i-use and query attributes you need.

9. picture tag

picture 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 original codepen by CharlesKiarie and a credit goes to him).

The image source is responsive to the media query as you can see if you will resize the screen to mobile dimensions.
picture tag is supported by all major browsers and has a polyfill for older versions of IE.

10. Web Components

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. Web Components 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 definitely check 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.