5 Interesting HTML and CSS Features to Look Forward to in 2018

5 Interesting HTML and CSS Features to Look Forward to in 2018 is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

How to export Chrome browsing history to HTML, CSV or TXT file
5 free online HTML editing tools that test the best code
12 stunning HTML5 templates that web designers should not ignore

We give a brief overview of 5 interesting HTML and CSS features that have recently been added to programming languages, which will allow you to create better websites and applications. HTML and CSS are constantly evolving, always providing new front-end developers and web designers with new capabilities. Invite Administrators to see 5 new HTML and CSS features that are really interesting to create better websites in 2018 Here!

5 Interesting HTML and CSS Features to Look Forward to in 2018 example image 1

Native

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 title

Your content.

CSS Scroll Snap Points

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.

Inline CSS in

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.

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 }

Support Queries

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:

9 reasons you should equip a little knowledge of HTML and CSS
17 simple HTML codes you can learn in 10 minutes
26 useful websites should track if you are a web developer

Having fun!

FAQ

What should you know about cSS Scroll Snap Points?

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.

What should you know about inline CSS in?

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.