5 interesting HTML and CSS features to look forward to in 2018

 < dialog> 

 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.

Vestibulum interdum pellentesque massa

Variables

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 } 

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:

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

Having fun!

Kareem Winters

Update 25 May 2019