Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

We give a brief overview of 5 really exciting new HTML and CSS features that were recently added to these languages that will allow you to create better sites and apps.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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/Chrome mobile.

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

This feature is unfortunately not yet implemented in most browsers.

img {
    /* Specifies that the center of each photo
       should align with the center of the scroll
       container in the X axis when snapping */
    scroll-snap-align: center none;
}
.photoGallery {
    width: 500px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* Requires that the scroll position always be
       at a snap position when the scrolling
       operation completes. */
    scroll-snap-type: x mandatory;
}
<div class="photoGallery">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
    <img src="img4.jpg">
    <img src="img5.jpg">
</div>

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.

<body>  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <style>
        p { color: #069; }
    </style>
    <p>Vestibulum interdum pellentesque massa</p>
</body>

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;
  }
}

For an in-depth look at the feature, I recommend you read this interesting article.

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:
web design ,html5 ,css ,web dev ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}