Introducing the new content 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 a draft of HTML5.2, 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 selecting or deselecting an option;

• 
  

• command – Allows an action to be performed when the mouse is clicked;

• 
  

• radio – allows selection of one from a set of options.

Here is a basic usage example that can be run in Firefox 49, but not Chrome 54 currently.

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

On a supported browser, this context menu example 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. Click on the

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

The following example can be tested in Firefox and Chrome.

Please see SitePoint (@SitePoint)’s 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 Firefox.

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

This demo should look like this on supported browsers:

Responsive images

HTML 5.1 includes several new features for implementing 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's 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 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 as 600px wide, the image high-res is defined as 1000px wide, and the ultra-high-res is 1400px wide.

​ sizes attribute

You may want to display images differently 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. Here 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 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 verify the form

The form.checkValidity() method defined in HTML5 can check whether the form complies with 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's 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 goes as expected, it will look like this:

Allowfullscreen property of frames

The new Boolean attribute allowfullscreen of frames can control whether the content can be displayed in full screen through the requestFullscreen() method.

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 written into HTML5.1

Some features were defined in the first draft but were eventually removed, mostly due to lack of interest from browser vendors. Here are some 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, and it even has a convenient form collection - using the method attribute on the

prevents the form from being submitted to the server and instead closes the popup and returns the results to the popup. the founder of.

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:

See the CodePen example of SitePoint (@SitePoint) HTML dialog element.

More articles from the author

• Up and Running with ESLint — the Pluggable JavaScript Linter

• 
  

• Visual Regression Testing with PhantomCSS

The above is the detailed content of Introducing the new content in HTML5.1. For more information, please follow other related articles on the PHP Chinese website!