10 superpowers HTML5 gives you (and you are not using)
This post was originally published on dev.to.
The latest HTML spec has a 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.
Don’t judge a SaaS platform by its cover. Our frontend team goes deep with some of the latest system designs. >>See our open roles
In this post, I will list some nice features that may be off 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:
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 the following codepen you can see a simple example of how the <dialog> tag of HTML 5.2 can be used.
Warning: the example does not include polyfills and only works on desktop or Android Chrome.
<dialog> has some nice capabilities like backdrop pseudo-class. Check this blog post that shows a really nice example 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
contenteditable attribute turns any element to be editable magically. This can be very useful when creating some custom user inputs like text processors, blog engines or anything else that works with text.
Check the following codepen to show a basic feature of this attribute.
The big surprise — contenteditable is supported by all major browsers, even by IE 6.
5) <mark> tag
<mark> is a very simple and useful native tag.
Check the following codepen:
mark element is supported by major browsers, IE support starts 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 operating systems on different devices. The 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. But I think, in potential, this function can make code much cleaner and make it easier to build those logical blocks.
An example of such a 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 like this:
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 a post doing amazing things with these 2 elements on CSS tricks.
This tag is supported by all major browsers including IE10+ and also has a polyfill 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 one 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>
The 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.
The picture tag is supported by all major browsers and has a polyfill for older versions of IE.
10) Bonus: Web Components
Taking the whole web and mobile applications development stack — HTML and JS are parts of it that have highly innovated over 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. Today it looks like not all browser vendors are interested in implementing this approach — but still it works for other major things in the modern web.
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.
Follow me on Twitter to get my latest updates!
