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

Join TipsMake.com to learn about 5 interesting HTML and CSS features to look forward to in 2018!
  1. How to export Chrome browsing history to HTML, CSV or TXT file
  2. 5 free online HTML editing tools that test the best code
  3. 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 in this article!

5 interesting HTML and CSS features to look forward to in 2018 Picture 15 interesting HTML and CSS features to look forward to in 2018 Picture 1

Native

Element

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.



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!

4 ★ | 2 Vote