The arrival of the HTML5.2

Generally in W3C. Releases go through four stages: working draft (WD), alternative recommendation (CR), proposal recommendation (PR), and final W3C formal recommendation (REC). When a specification reaches the REC stage, it is officially endorsed by W3C members and recommended to be deployed by user agents and used by front-end engineers.

Now, on December 14, 2017, the W3C released update 5.2 of the HTML specification, with some additions and deletions from the previous version. These Changes can be seen on the HTML 5.2 Changes page. I’ll describe some of these changes below.

The new Dialog element

The dialog tag was added in HTML5.2. To help us quickly implement a dialog box. Before HTML5.2, we wanted to implement a dialog box function, which was roughly implemented as follows: a div, first hide it display: None. Then set its display to block where necessary. This controls the display and hiding of a dialog. In HTML5.2, you just needed to say:

<dialog id="dialog">
    <h2>I'm the dialog title</h2>
    <p>I'm the dialog content</p>
</dialog>
Copy the code

You get a dialog box. The dialog box is hidden by default, and you can add the open property to make it visible

<dialog id="dialog" open>
    <h2>I'm the dialog title</h2>
    <p>I'm the dialog content</p>
</dialog>
Copy the code

Alternatively, you can take the dialog element and call its show() method to display it

<dialog id="dialog" open>
    <h2>I'm the dialog title</h2>
    <p>I'm the dialog content</p>
</dialog>

<script>

const dialog = document.querySelector('#dialog').show();

</script>
Copy the code

Similarly, if you want the dialog to be hidden, just call the close() method of the dialog element

In addition, when you want to display the dialog box, there is a mask layer. You can use the showModal() method. It displays a mask layer at the top of your page, along with the dialog, to prevent you from manipulating elements other than the dialog. Another thing to note is that you can’t use the open attribute and showModal() at the same time, otherwise it will report; Untitled-1.html:28 Uncaught DOMException: Failed to execute ‘showModal’ on ‘HTMLDialogElement’: The element already has an ‘open’ attribute, and therefore cannot be opened modally. This error

The final dialog has the following compatibility:

Payment request API – AllowPaymentRequest

Before HTML5.2. The API for payment requests cannot be done in an IFrame. Therefore, every time we make mobile payment, we need to jump to another payment page to complete the payment. Now, the AllowPaymentRequest attribute is applied to the iframe

<iframe allowpaymentrequest>
Copy the code

In this way, iframe can be made to use the Payment Request API to enable

A page with embedded third-party content can control whether that third-party content can Request Payment credentials from the user, allowing the embeddable shopping cart tool to take advantage of the Payment Request API.

Brendan Miller from Forrester explained the benefits of the payment request API, saying that the new standard allows developers to create a simplified checkout page, where users can reuse saved payment and address information to speed up checkout and reduce typing errors.

Payment Request API compatibility:

Use more than one page at a timemainThe label

The HTML Main element < Main > renders the body of the document or the application. The body section consists of content that is directly related to the document, or extends to the central topic of the document, or the main functional parts of the application. This section should be unique within the document and should not contain any content that is repeated across a series of documents, such as sidebars, navigation links, copyright information, site logos, or search boxes (unless the search box is the main function of the document).




It states that the content in the

tag should be the subject content of the document and unique. So, one thing to note after this introduction is that you can’t have more than one

tag in a document




Now, with the single page application (SPA) is becoming more and more popular. Make this feature is not in line with the current reality, so in HTML5.2. It is permissible to have multiple


tags on a page at the same time. As long as only one

tag is visible at a time and everything else is hidden by the hidden property

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

Also note that the method to hide the


tag must use the hidden property. Other methods, such as display: None and transparent 0, do not work. This deprives the

tag of its own semantics and usefulness.

Deleted attributes and elements

The deleted element

  • Keygen: Public key used to help generate forms

  • Menu and MenuItem: Used to create navigation or context menus

The deleted property

  • Window.showmodaldialog (): Creates and displays a modal box containing the specified HTML document.

  • Plug-in API: Provides information about browser plug-ins.

Deprecated HTML header declarations

The following two types of HEADER declarations are deprecated in HTML


      
Copy the code

      
Copy the code

Above is my HTML5.2 some shallow summary, I hope to help you. If there is anything wrong with the article, please correct it, thank you.

The resources

  • What’s New in HTML 5.2?

  • The W3C officially recommends using the newly released HTML5.2

My personal website: wangyiming.info