5 Exciting New HTML and CSS Features

HTML and CSS are always evolving, offering front-end devs and web designers a lot of new possibilities. Today, let’s have a look at 5 really exciting new HTML and CSS features for creating better websites in 2018.

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.

<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.

Inline CSS in <body>

The new HTML 5.2 specification has made inline CSS style in the body a valid practice. Not the most exciting new feature, but this could be a real relief in several cases.

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-color); } 

a { color: var(–main-color); 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 except Internet Explorer 11.

@supports (mix-blend-mode: overlay) {

  .example {

    mix-blend-mode: overlay;

  }

}

Enjoy these latest features . Happy Coding.

User Stories

As its name suggests, a user story describes how a user or customer uses the product–a digital product is captured from the perspective of the users. This avoids a solution-centric view where we worry more about how to provide and implement the product features than why and how people will use them.

Conversation

First and foremost thing we need to get rid of Design phase is “ASSUMPTIONS” . It is very important for team to have frequent conversations with the End/Business Users to remove the danger stuff call assumption.

Maybe it’s helpful to take a quick look at the context in which user stories emerged. Stories were first used in Extreme Programming in combination with the role of an onsite customer. The onsite customer is a member of the user community who is collocated with the development team. The individual would discuss with the team what should be built in the next iteration, and captured the conversation as stories to remind everyone of what was discussed.

Simplicity

User stories are a very simple tool—we simply tell stories about how users are likely to interact with the product and capture their essence. That’s it. User stories are great at capturing product functionality, things people can do with a digital product like searching, evaluating, and purchasing products online. You can also use stories to capture non functional aspects of a product, such as performance, robustness, and interoperability.

Conclusion

Its always recommended to create a User stories in human readable format. This makes the Dev team and Client are on the same page.