Advanced Features of HTML5 and CSS3

HTML was simply perceived as a markup language some years back. With an advancement in HTML and birth of CSS media queries, the web has evolved drastically. HTML5 and CSS3 media queries are both allowing developers to go the extra mile and deliver a superior web as well as mobile experience to the viewers.

This blog will take you through some attractive features of HTML5 and CSS3 enabling you to enhance the look and feel of your web properties.

1. Editing content within the elements
You can edit content within an element by using an HTML attribute called contenteditable. There is a CSS property -webkit-user-modify similar to contenteditable which determines whether or not a user can edit the content. The default value is always read-only and read-write value of -webkit-user-modify allows the user to edit the content. Here’s an example:

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

2. Form attribute required
This particular feature ensures that the form is not submitted if an input box with required attribute is empty.  The required attribute can also be used as a selector to style the element. Here’s an example:

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

3. Regular expressions
Verifying textbox is simple. For verifying any particular textbox, we can insert regular expression directly into an element. We can check a textbox value against the regular expression specified in the pattern attribute. Here’s an example

[js]<input type="text" name="rollno" pattern="[0-9]{5}">[/js]

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 which we can associate captions with an image element. Apart from images, we can also include audio, video, chart, SVG, and canvas in the figure tag. Here’s an example

[js]<figure>
<img src="/blog/wp-ttn-blog/uploads/2017/03/productimg.png">
<figcaption>
<p>Image of birds</p>
</figcaption>
</figure>
[/js]

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

[js]<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>
[/js]

6. 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;
}

7. Gradient
Gradient displays a combination of two or more colors. They can either be linear or radial. For the responsive layouts, it is 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 to light brown

8. Animation and Transition
We can use both Transition and Animation when it is required to change an element from one state to another. The difference is that animation can be made up of 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

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.