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 what is often done 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"
> Copy after login
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"
> Copy after login
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 attribute
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"
> Copy after login
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 When equal to 40em, the image 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> Copy after login
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.
Supplement
This is not an article about all the new features of HTML5.1. There are many small new features and changes that have been removed from the current standard, and some features that were never used have also been removed.
【Related recommendations】
1. HTML5 mobile application development-detailed introduction to the role of viewport (pictures and texts)
2. 20 Understand html5 in minutes and see what new features H5 has.
3. H5 learning journey-H5’s new features (1)
The above is the detailed content of What are the new features in HTML5.1?. For more information, please follow other related articles on the PHP Chinese website!