5 Exciting New HTML and CSS Features

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

Released along with the new HTML 5.2 spec in December 2017, the <dialog>element offers the possibility to create native dialogs in pure HTML.

As of January 2018, <dialog> only works in Chrome.

<dialog>
<h2>Your title</h2>
<p>Your content…</p>
</dialog>

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.

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.

Variables

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

:root {

  –main-color: #069;

}

h1, h2, h3 { color: var(–main-color); } 

a { color: var(–main-color); text-decoration:underline }

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.

@supports (mix-blend-mode: overlay) {

  .example {

    mix-blend-mode: overlay;

  }

}

Enjoy these latest features . Happy Coding.

Leave a Reply

Your email address will not be published. Required fields are marked *