5 new HTML/CSS features you didn’t know about

HTML, CSS, and Javascript are evolving faster than ever before, making the web more developer and user-friendly.

In this article, we will see 5 new HTML/CSS features that are:

• Super easy to use, usually one or two lines of code
• A game-changer in several cases, as they can replace component libraries, jQuery plugins, or complex server-side rendering architectures!

Without further ado, let’s take a look at these features.

1. Accent-color CSS property for form elements

Forms have a history of being very difficult to customize as they rely on native browser implementations and look and feel.

The first step towards more customization is the addition of the accent-color CSS property, which provides an easy way to customize form elements to your web application colors:

The above styling was achieved with one simple CSS rule:

form {
   accent-color: gold;
}

Note that the browser adapts the other colors of the form element to match the accent color. In the case of the above example, the checkbox tick and the background colors of my range and progress elements changed automatically to black.

And by the way, both the slider for range selection and the progress bar are regular HTML elements, too:

<input type="checkbox" checked />
<input type="range" />
<progress></progress>

All major browsers support accent-color since IE11 was deprecated in June 2022:

Screenshot from caniuse.com

2. Eyedropper for easy color selection

This addition is an alternative to using a color picker to select a color from a webpage. Eyedropper looks like a magnifying glass to select a very specific color on the page:

Once color is selected, we get its value thanks to a promise and a callback function:

const eyeDropper = new EyeDropper();
eyeDropper.open()
    .then((result) => {
        console.log(result.sRGBHex);
    });

Once again, just a few lines of code to make that magic happen! You can try a demo here.

Eyedropper is not available on all browsers just yet, but it’s getting there:

Screenshot from caniuse.com

3. Dialog

Dialog is an HTML element that is hidden at first but can get opened using Javascript:

<dialog id="dialog">
   I'm a pure HTML dialog!
</dialog>

To open a dialog with Javascript, here is the code you’d need (and here’s a tutorial to open a dialog with Angular):

 document.getElementById('dialog').show();

Of course, we can also close the dialog with a simple addition to the HTML code:

<dialog id="dialog" onClick="this.close()">
   I'm a pure HTML dialog!
</dialog>

The default look and feel of the dialog is pretty basic but can be customized with CSS:

All modern browsers support dialogs.

4. Fetch priority

Optimizing the page load time becomes very important when a page has a lot of content, such as images and videos.

We can provide a download priority hint using the fetchpriority HTML attribute. We can use the attribute with link, img, script, and iframe tags. The fetchpriority attribute accepts one of three values:

• high: The resource is a high priority, and we want the browser to prioritize its download.
• low: The resource is a low priority, and we want the browser to deprioritize it.
• auto: Default value where we let the browser decide the appropriate priority.

Here’s an example of usage:

<img src="/images/not_important.png" fetchpriority="low" alt="Unimportant image!">

<link href="/js/script.js" fetchpriority="high">

Browser support is not optimal yet but is getting there:

5. Lazy-loading of images and iframes

Lazy-loading is somewhat similar to fetchpriority because it allows us to control when a resource gets downloaded.

The newloading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values:

• lazy: is a good candidate for lazy loading.
• eager: is not a good candidate for lazy loading. Load right away.
• auto: the browser will determine whether or not to load lazily.

As an HTML attribute, loadingis pretty straightforward to use:

<img loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/9/92/Big_Sur_Coast_California.JPG"/>

You can try a demo here. Scroll down past the first grey box, and an image will load.

Support for that attribute is excellent in most browsers:

All of the demos for the features in that post are available on Stackblitz here:

at-html-css-2022 - StackBlitz

My name is Alain Chautard. I am a Google Developer Expert in Angular, as well as a consultant and trainer at Angular Training where I help web development teams learn and become comfortable with Angular.

If you need any help with web development, feel free to get in touch!

If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to Medium here.