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 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-colour); }
a { color: var(--main-colour); 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 but Internet Explorer 11.
@supports (mix-blend-mode: overlay) {
.example {
mix-blend-mode: overlay;
}
}
For an in-depth look at the feature, I recommend you this interesting article.