5 Exciting New HTML and CSS Features to Look Forward to in 2018

HTML and CSS are always evolving, offering front-end devs and web designers a lot of new possibilities. Today, let’s have a look at 5 really exciting new HTML and CSS features for creating better websites in 2018.

Native <dialog> element

As of January 2018,





CSS Scroll Snap Points


CSS Scroll Snap is a recent module of CSS that introduces scroll snap positions. These determine the specific positions that a container’s scrollport may end at after a scrolling operation has completed.

This feature is unfortunately not yet implemented in most browsers.



In the example above, a series of images arranged in a scroll container is used to build a photo gallery.

It is taken from the W3C working draft, make sure to take a look at it for more info about this exciting new functionality.


Inline CSS in <body>


The new HTML 5.2 specification has made inline CSS style in the body a valid practice. Not the most exciting new feature, but this could be a real relief in several cases.






CSS preprocessors have offered variables for a long time. Still, I’m very excited about the idea of native variables in the CSS spec.

CSS variables are pretty well implemented and will work perfectly in most browsers. More info can be found on the W3C page.

Now, here’s a quick, self-explanatory example of how to use native CSS variables:


Support Queries


As seen with the previous features I wrote about, browser compatibility is still always a big problem when it comes to using new CSS features.

The relatively new @supports feature provides developers a way to condition rules based on whether particular property declarations are supported in CSS.

@supports is currently supported by all browsers except Internet Explorer 11.