What's new in HTML5.1

HTML 5.1 Overview

The release of the HTML5 standard two years ago was a big event for the web development community. Not only because it contains an impressive series of new features, but also because it is the first major version update to HTML since the HTML 4.01 standard was released in 1999. You can still see some websites boasting that they use the "modern" HTML5 standard.

Fortunately we don’t have to wait that long for the next update to the HTML standard. In October 2015, W3C began working on the HTML5.1 draft, with the goal of fixing some of the remaining problems of HTML5. After multiple iterations, the draft reached the "Candidate Recommendation" stage in June 2016, the "Proposed Recommendation" stage in September 2016, and finally the W3C recommendation was released in November 2016. Those paying attention to the new standard may have noticed that it has been a winding road. Many HTML5.1 features that were initially proposed were abandoned due to poor design or lack of browser vendor support.

Although HTML5.1 is still in development, the W3C has begun working on the HTML5.2 draft, which is expected to be released in late 2017. This article is an overview of some interesting new features and improvements in HTML5.1. Browser support for these features is still lacking, but at least we'll show you a few browsers that support these features to test each example against.

Context menu uses menu and menuitems elements

The HTML5.1 draft introduces two different menu elements: context and toolbar. The former is used to extend the local context menu, usually activated by right-clicking the mouse on the page; the latter is used to define a common menu component. During the development process, the toolbar was abandoned, but the context menu survived.

You can use the

tag to define a menu containing one or several elements, and then bind it to any element using the contextmenu attribute.

Each can be one of the following three types:

• checkbox – allows to select or deselect an option;

• command – Allows an action to be performed on a mouse click;

• radio – Allows one to be selected from a set of options.

Here is a basic usage example, which can be run in Firefox49, but it is not currently available in Chrome54.

See the SitePoint (@SitePoint) HTML5.1 menu example on CodePen.

On a supported browser, this example context menu should look like this:

There are custom items in the context menu.

Details and Summary elements

The new

and

elements can display and hide additional information through mouse clicks. This is something you often do when using JavaScript, and now you can use the

element and the

element to do it for you. Clicking on the

element can show and hide the rest of the details element.

The following example can be tested in Firefox and Chrome.

Please see the SitePoint (@SitePoint) HTML5.1 demo on CodePen for details and summary.

This demo should look like this on supported browsers:

More input types - month, week and datetime-local

　Input extends three types: month, week and datetime-local.

The first two types allow you to choose weeks or months. In Chrome, both are rendered as drop-down calendars, and you can select a certain week or month. When you get their values ​​using JavaScript, you will get a string roughly like this: "2016-W43" (week input); "2016-10" (month input).

Initially, the HTML5.1 draft introduced two date type inputs — datetime and datetime-local. The difference is that datetime-local uses the user's time zone, while datetime allows you to choose the time zone. During development, datetime was abandoned and now only datetime-local exists. The datetime-local input consists of two parts - the date, which can be selected like week and month; and the time, which can be entered separately.

The following is an example of all new types of input. It can be displayed normally in chrome, but not in firfox.

See SitePoint (@SitePoint) HTML 5.1 week, month and datetime inputs on CodePen.

This demo should look like this on supported browsers:

　Responsive images

HTML5.1 includes several new features that enable responsive images without using CSS. Each feature has its own separate usage scenario.

　 srcset attribute

The srcset image attribute allows listing of multiple alternative image data sources with different pixel densities. This allows the browser to select an image of appropriate quality for the user's device (determined by the device's pixel density, scaling, or network speed). For example, in the case of low-speed mobile networks and small-screen phones, users should be provided with low-resolution images.

The srcset attribute accepts a comma-separated list of URLs, each with a modified x that represents the closest pixel ratio (the number of physical pixels represented by one CSS pixel) to the requested image. Here is a simple example:

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 1x, 
  images/high-res.jpg 2x, 
  images/ultra-high-res.jpg 3x"
>

In this example, if the pixel ratio of the user device is 1, the image low-res will be displayed; if it is 2, the image high-res will be displayed; If it is 3 or greater, the image ultra-high-res will be displayed.

Alternatively, you can choose to display the image in different sizes. This requires using w:

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

In this example, the image low-res is defined to be 600px wide, the image high-res is defined to be 1000px wide, and the ultra-high-res is 1400px wide.

　sizes property

You may want to display images in different ways depending on the user's screen size. For example, you might want to display an image in two columns on a wide screen and one column on a narrower screen. This can be achieved using the sizes attribute. It allows you to assign the width of the screen to an image and then select the appropriate image via the srcset attribute. The following is an example:

<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw" 
  srcset="images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

When the viewport width is greater than 40em, the sizes attribute defines the width of the image as 50% of the viewport width; when the viewport (viewport) width is less than or equal to 40em, the size attribute defines the image width as 50% of the viewport width. The width is defined as 100% of the viewport width.

　picture element

If changing the size of the picture according to different screens still cannot meet the needs, and you want to display different pictures according to different screens, you need to use the picture element. It allows you to define pictures with different resources for different screen sizes by specifying multiple different elements with . The element serves as the source of the image loaded by the URL.

<picture>
  <source media="(max-width: 20em)" srcset="
    images/small/low-res.jpg 1x,
    images/small/high-res.jpg 2x, 
    images/small/ultra-high-res.jpg 3x
  ">
  <source media="(max-width: 40em)" srcset="
    images/large/low-res.jpg 1x,
    images/large/high-res.jpg 2x, 
    images/large/ultra-high-res.jpg 3x
  ">

  <img src="images/large/low-res.jpg">
</picture>

If you want to know more about responsive images, please click How to Build Responsive Images with srcset.

Use form.reportValidity() to validate the form

The form.checkValidity() method defined in HTML5 can check whether the form conforms to a predefined validator and return a Boolean value. The new reportValidity() method is similar — it also validates a form and returns the results, but it can also report errors to the user. Here is an example (please test in Firefox or Chrome):

Please see the SitePoint (@SitePoint) example HTML 5.1 report validity demo on CodePen.

　The "First name" input box is required to be non-empty, if not filled in it will be marked with an error. If it works as expected, it will look like this:

Allowfullscreen property of frames Allowfullscreen property of frames

The new boolean property allowfullscreen of frames can control whether content can be accessed via requestFullscreen( ) method to display content in full screen.

Use element.forceSpellCheck() for spell checking

The new element.forceSpellCheck() method allows you to trigger spell checking on text elements. This is also the first feature listed in this article that is not yet supported by any browser. Perhaps, this could be used to inspect elements that have not been directly edited by the user.

Features not included in HTML 5.1

Some features were defined in the first draft but were ultimately removed, mostly due to lack of interest from browser vendors. Here are some of the interesting methods:

　 inert attribute

The inert attribute can disable user interaction for all child elements, just like adding the disabled attribute to all child elements .

Dialog element

The

element provides a native popup box, and it even has a convenient collection of forms - use the method attribute on the

You can prevent the form from being submitted to the server and instead close the popup and return the results to the popup's creator.

This feature seems to be still supported in firfox, so you can take a look at the following example (Translator's Note: firfox V49.0.2 does not support:

Please take a look at the example of SitePoint (@SitePoint) in CodePen HTML dialog element.

　

The above is the content of the new things in HTML5.1. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

#