Released with the new HTML 5.2 spec in December 2017, the element
provides the ability to create dialogs in plain HTML.
Since January 2018,
works only on Chrome and Chrome mobile browsers:
<dialog>
Your content .
CSS Scroll Snap is a new module of CSS that introduces scroll snap locations. They determine the specific positions that a container's scrollport may end after the roll operation completes.
Unfortunately, this feature has not been 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;
}
In the above example, a series of images is arranged in a scroll container used to build a photo library.
Currently taken from the W3C draft, please read for more information about this exciting new function.
HTML 5.2 spec allows to create inline CSS styles in the body as a valid way. Not the most interesting new feature, but this can be really useful in some cases.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum interdum pellentesque massa
CSS preprocessors (CSS's extended scripting language) have given variables for a long time. However, I'm very excited about the idea of variables available in CSS spec.
CSS variables have been implemented quite well and will work perfectly in most browsers. You can read more information on the W3C page.
Now is a quick, self-explanatory example of how to use variables in CSS:
:root {
--main-color: #069;
}
h1, h2, h3 { color: var(--main-color); }
a { color: var(--main-color); text-decoration:underline }
As the features introduced above, browser compatibility is still a big problem when using new CSS features.
The new @supports
feature provides programmers with a way to render rules based on whether a specific property is supported in CSS.
@supports
currently supported by all browsers except Internet Explorer 11.
@supports (mix-blend-mode: overlay) {
.example {
mix-blend-mode: overlay;
}
}
Refer to some more articles:
Having fun!