New HTML5 and CSS3 Features You Should Try

1. Editing content within the elements

You can edit content inside an element by using an HTML attribute known as contenteditable. there's a CSS property -webkit-user-modify the same as contenteditable that determines whether or not a user will edit the content. The default value is usually read-only and read-write value of -webkit-user-modify permits the user to edit the content. Here’s an example:

<h2 contenteditable=true>You can edit me</h2>
h2{
-webkit-user-modify:read-write;
}

2. Form attribute required

This specific feature ensures that the form isn't submitted if an input box with required attribute is empty. the specified attribute also can be used as a selector to style the element. Here’s an example:

<input type="text" name="required Field"  required="required">
input:required{
background:red;
}

3. Regular expressions

Verifying text box is easy. For verifying any specific text box, we will insert regular expression directly into an element. we will check a text box value against the regular expression specified in the pattern attribute.Here’s an example":

<input type="text"  name="rollno"  pattern="[0-9]{5}">
In the above example, input box should contain only five characters (the characters can only be numerals)


4. Figure tag

Figure tag includes figcaption tag through that we will associate captions with an image element. apart from images, we will also include audio, video, chart, SVG, and canvas within the figure tag.Here’s an example:

<figure>
    <img src="http://static1.tothenew.com/blog/wp-content/uploads/2017/03/productimg.png">
    <figcaption>
    <p>Image of birds</p>
    </figcaption>
    </figure>

5. Webfonts

With the help of @fontface rule, we can include any source file for fonts. At a later point, we can refer it through font-family declaration. Here’s an example:

@font-face {
font-family: ‘opensanssemi';
src: url(“../fonts/OpenSans-Semibold.ttf”) format(“truetype”);
}
Element font-family will be:
p{
font-family:opensanssemi;
}

6. Gradient

Gradient displays a combination of two or more colors. they will either be linear or radial. For the responsive layouts, it's better to use gradient image over the background image.Here’s an example:

background: -webkit-linear-gradient(to bottom,rgba(36,4,3,.8) 41%,rgba(0,0,0,0) 100%);

background: linear-gradient(to bottom,rgba(36,4,3,.8) 41%,rgba(0,0,0,0) 100%);

Below is the example of a linear gradient changing color from dark brown to light brown.

7. Animation and Transition

We can use each Transition and Animation when it's required to change an element from one state to a different. The difference is that animation will be created from multiple states, providing control over its animation.Here’s an example:

@-webkit-keyframes expand-bottom-overlay {
0% {
top: -6.5em; }
100% {
top: 0;
} }

This will animate element from -6.5em to 0

8. SVG element

The SVG element can be used to draw various shapes on a web page since these are vector based. They can also be scaled, up or down to any extent without losing the image quality. Here’s an example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.47 53.44"> <path id="Shape_5_copy" data-name="Shape 5 copy" class="rewind-svg gray-icon" d="M2758.62,4719.2l28.92-23.09a1.538,1.538,0,0,1,.98-0.34,1.633,1.633,0,0,1,.71.16,1.672,1.672,0,0,1,.9,1.49v19.26l25.75-20.57a1.585,1.585,0,0,1,.99-0.34,1.56,1.56,0,0,1,.7.16,1.672,1.672,0,0,1,.9,1.49v46.16a1.672,1.672,0,0,1-.9,1.49,1.56,1.56,0,0,1-.7.16,1.585,1.585,0,0,1-.99-0.34l-25.75-20.57v19.26a1.672,1.672,0,0,1-.9,1.49,1.633,1.633,0,0,1-.71.16,1.538,1.538,0,0,1-.98-0.34l-28.92-23.09A1.673,1.673,0,0,1,2758.62,4719.2Z" transform="translate(-2756 -4693.78)"></path>

 </svg>

These are some of the most advanced features of HTML5 and CSS3 media queries. You will be able to implement them and improve your user experience drastically.