• What’s New in HTML 5.2?
  • Bitsofco
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: lsvih
  • Proofread by: Raoul1996, eat dirt small 2 tablespoons

What’s new in HTML 5.2?

Less than a month ago, HTML 5.2 became an official W3C recommendation (REC). When a specification reaches the REC stage, it has been formally endorsed by W3C members and the board of directors. The W3C will officially recommend that browser vendors deploy and Web developers implement the specification.

There is a principle in the REC phase called “Anything new should have at least two separate implementations,” and this is a great opportunity for us Web developers to practice new features.

There are some additions and deletions in HTML 5.2. For details, see the official HTML 5.2 Changes page. This article describes some of the changes THAT I think are relevant to my development.

New features

The native<dialog>The element

Of all the changes to HTML 5.2, the one I’m most excited about is the introduction of the


element, the native dialog box. Dialogs are everywhere on the Web, but they are implemented in different ways. Dialogs are difficult to make accessible, resulting in most dialogs being unavailable to users who can’t easily access a web page visually.

The new < Dialog > element aims to change that by providing a simple way to implement modal dialogs. I’ll write a separate article about how this element works, but I’ll give you a brief overview.

Create a dialog with a


element:

<dialog>  
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>  
Copy the code

By default, the dialog box is hidden in the view (and in DOM access), and only appears when the open property is set.

<dialog open>  
Copy the code

The open attribute can be turned on or off by calling show() and close(), which can be called by any HTMLDialogElement.

<button id="open">Open Dialog</button>  
<button id="close">Close Dialog</button>

<dialog id="dialog">  
  <h2>Dialog Title</h2>
  <p>Dialog content and other stuff will go here</p>
</dialog>

<script>  
const dialog = document.getElementById("dialog");

document.getElementById("open").addEventListener("click", () => {  
  dialog.show();
});

document.getElementById("close").addEventListener("click", () => {  
  dialog.close();
});
</script>  
Copy the code

The < Dialog > element is already supported in Chrome, and behind a flag is coming soon in Firefox.

Above is caniuse.com’s data on the compatibility of the dialog feature with major browsers

Using the Payment Request API in iFrame

The Payment Request API is a native alternative to the Payment settlement form. It puts the payment information into the browser, replacing the previous payment forms that vary from site to site, and aims to provide users with a standard and consistent way to pay.

Prior to HTML 5.2, such payment requests could not be used in document embedded iframes, making it virtually impossible for third-party embedded payment solutions (such as Stripe, Paystack) to use the API because they typically process payment interfaces in iframes.

To this end, HTML 5.2 introduced the AllowPaymentRequest attribute for iframe, which allows users to access the Payment Request API of iframe in the host web page.

<iframe allowpaymentrequest>  
Copy the code

Apple icon size

To define web ICONS, we can use the element in the head of the document. If we want to define ICONS of different sizes, we can use the Sizes property.

<link rel="icon" sizes="16x16" href="path/to/icon16.png">  
<link rel="icon" sizes="32x32" href="path/to/icon32.png">  
Copy the code

This property, while purely a suggestion, allows the user agent (UA) to decide which size icon to use if multiple sizes are provided. This is especially important when most devices have different “optimal” icon sizes.

Prior to HTML 5.2, the sizes attribute could only be used in link elements where rel is icon. However, Apple’s iOS devices do not support sizes. To address this issue, Apple themselves introduced a device-specific Rel Appple-touch-Icon for defining ICONS to use on their devices.

In HTML 5.2, the specification defines sizes property to be used not only for rel icon elements, but also for rel Apple-touch-icon elements. This allows us to provide different sizes of ICONS for different Apple devices. As far as I know, Apple devices don’t support sizes. It will come in handy in the future when Apple finally supports the specification.

New effective practices

In addition to the new features, HTML 5.2 also validates some previously invalid HTML writings.

multiple<main>The element

The


element represents the main content of the web page. While duplicate content from different pages can be placed in headers, sections, or other elements, the

element is reserved for specific content on the page. So prior to HTML 5.2, the

element had to be unique in the DOM for the page to be valid.


With the popularity of single-page applications (SPAs), it has become difficult to stick to this principle. There may be multiple


elements in the DOM of the same web page, but only one of them can be shown to the user at any time.

With HTML 5.2, we can use multiple


elements in our tags as long as only one

element is visible at a time. At the same time, other

elements must be hidden with the hidden attribute.


<main>... </main> <main hidden>... </main> <main hidden>... </main>Copy the code

As we all know, there are many ways to hide elements through CSS, but redundant


elements must be hidden using the hidden attribute. Any other way to hide this element (e.g. Display: None; And the visibility: hidden) Will not be valid.

in<body>In the style of writing

In general, inline CSS styles defined using the

In HTML 5.2, you can define inline 

The < body > < p > I 'm cornflowerblue! </p> <style> p { color: cornflowerblue; } < / style > < p > I 'm cornflowerblue! </p> </body>Copy the code

It is important to note, however, that styles should still take precedence in due to performance issues. See specification,

Style elements are best used in the head of a document. Using styles in the body of a document can lead to redefining styles, triggering relayouts, and causing redrawing, so use with care.

It should also be noted that styles are not scoped as shown in the example. An inline style later defined in an HTML document still applies to previously defined elements, so it may trigger a redraw.

<legend>The title element in

In the form, the < Legend > element represents the title in the < Fieldset > form field. Prior to HTML 5.2, the content of the Legend element must be plain text. Now it can contain title elements (

, etc.).

<fieldset> <legend><h2>Basic Information</h2></legend> <! -- Form fieldsforbasic information --> </fieldset> <fieldset> <legend><h2>Contact Information</h2></legend> <! -- Form fieldsfor contact information -->
</fieldset>  
Copy the code

This feature is useful when you want to use fieldSets to group different parts of a form. Using a title element in this case makes sense because it allows users who rely on the document outline to easily navigate to the corresponding section of the form.

Removed features

Some elements have been removed in HTML 5.2, specifically:

  • keygen: has been used to help forms generate public keys
  • menu 与 menuitem: used to create navigation and content menus

New ineffective practices

Finally, some development practices are stipulated to be no longer valid.

in<p>Can no longer contain inline, floating, block-type child elements in

In HTML 5.2, the only legal child element in a

element is textual content. This also means that the following types of elements can no longer be nested inside the paragraph tag

:

  • Inline blocks
  • Inline tables
  • Floating block and fixed position block

Strict Doctypes are no longer supported

Finally, we can say goodbye to these document types!

<! DOCTYPE HTML PUBLIC"- / / / / W3C DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd">  
Copy the code
<! DOCTYPE html PUBLIC"- / / / / W3C DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
Copy the code

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.