HTML 5.2 już w natarciu

17 grudnia 2017 roku organizacja W3C wydała rekomendację odnośnie stosowania nowego HTML 5.2. co znacza to, że mamy kilka nowości w sposobie pisania stron internetowych, którym warto się przyjrzeć.

Podsumowanie zmian w nastającej wersji zamieszczone na stronie W3C:

New features

Features removed

  • The keygenmenu and menuitem elements.
  • The inputmode attribute for textual input elements, and the dropzone attributes.
  • The showModalDialog method.
  • The Plugin API has been marked as obsolete.

Fixing bugs and matching reality better

  • Stop media resource requests from non-network sources delaying the load event.
  • Remove arbitrary upper limits on refresh rates.
  • Coordinates for ismap no longer include the image’s border in calculation.
  • Update accesskey definition to require a single printable character.
  • Fix the activation algorithm for summary to match reality.
  • Fix the algorithm to determine row and column headers for table.
  • Update the rendering of summary
  • Reflecting a broken URL returns the unparsed value
  • currentScript may return SVGScriptElement.
  • Resetting a textarea resets its dirty value flag.
  • document.open() and document.close() check for XML document.
  • HashChangeEvent URLs are USVString instead of DOMString.
  • Selection members’ types are nullable.
  • data: URLs are treated as a separate origin.
  • Sadly, elements that are only focusable because they have a tabindex attribute generally will not fire a clickevent when activated with a non-pointer device.
  • Navigation for sandboxed contexts
  • Updated allowable role values in line with [html-aria]
The following constructions are now valid HTML:
style within the body.
Multiple main elements in the DOM, so long as only one is visible to the user.
The presentation for the img element.
div as a child of a dl element.
dfn as a descendent of an li element that contains a definition of the term defined.
Headings within legend in a fieldset.
Empty option element as a child of datalist.
Comments containing two consecutive hyphens, or ending with a hyphen, in the HTML syntax.
Remove restrictions on BiDi algorithm section
The following constructions are no longer valid HTML:
role values for a caption element.
Inline blocks, inline tables, or floated and positioned block-level elements as children of a p element.
Content with the HTML4 or XHTML1 strict doctype.

New concepts

Editorial clarifications

  • Browsers should represent punycode addresses as natural unicode text for the email input type.
  • Clarify the concept of last frame time for the seekable IDL attribute
  • Browsers that use the the suggestions source element to filter suggestions should implement substring matching on the label attribute.
  • Users should be able to interact with area elements whether or not they use a pointing device.
żródło: https://www.w3.org/TR/html52/changes.html#editorial-clarifications

Mnie osobiście z powyżej wymienionych w pierwszej kolejności najbardziej ciekawi jak na stronie sprawdzi się okno <dialog>, atrybut nonce w <link> oraz nowości w dostępności strony i w najbliższym czasie planuje pobawić się nimi na jakiejś stronce – to postanowienie numer jeden.

Postanowienie numer dwa na mojej liście Front-endowej to lepsza znajomość elementów z danej kategorii tzn co można zastosować zamiast <div> w danym miejscu na stronie. Ułatwi mi to poniższa tabela z dostępnymi w wersji HTML 5.2 elementami, które podlinkowałam do bardziej szczegółowych wyjaśnień na samej stronie organizacji.

Tabela zawierająca wszystkie elementy, z podziałem na kategorie.

This section is non-normative.

List of element content categories
Category Elements Elements with exceptions
Metadata content base; link; meta; noscript; script; style; template; title
Flow content a; abbr; address; article; aside; audio; b; bdi; bdo; blockquote; br; button; canvas; cite; code; data; datalist; del; details; dfn; dialog; div; dl; em; embed; fieldset; figure; footer; form; h1; h2; h3; h4; h5; h6; header; hr; i; iframe; img; input; ins; kbd; label; main; map; mark; math; meter; nav; noscript; object; ol; output; p; pre; progress; q; ruby; s; samp; script; section; select; small; span; strong; sub; sup; svg; table; template; textarea; time; u; ul; var; video; wbr; „Text” area (if it is a descendant of a map element); link (if it is allowed in the body);
Sectioning content article; aside; nav; section
Heading content h1; h2; h3; h4; h5; h6;
Phrasing content a; abbr; audio; b; bdi; bdo;br; button; canvas; cite; code; data; datalist; del; dfn; em; embed;  i; iframe; img; input; ins; kbd; label; map; mark; math; meter; noscript; object; output; progress; q; ruby; s; samp; script; select; small; span; strong; sub; sup; svg; template; textarea; time; u; var; video; wbr; „Text” area (if it is a descendant of a map element); link (if it is allowed in the body);
Embedded content audio; canvas; embed; iframe; img; math; object; svg; video
Interactive content* button; details; embed; iframe; label; select; textarea a (if the href attribute is present); audio (if the controls attribute is present); img (if the usemap attribute is present); input (if the type attribute is not in the Hidden state); video (if the controls attribute is present)
Sectioning roots blockquote; body; details; dialog; fieldset; figure; td
Form-associated elements button; fieldset; input; label; object; output; select; textarea; img
Listed elements button; fieldset; input; object; output; select; textarea
Submittable elements button; input; object; select; textarea
Resettable elements input; output; select; textarea
Labelable elements button; input; meter; output;progress; select; textarea
Reassociateable elements button; fieldset; input; label; object; output; select; textarea
Palpable content a; abbr; address; article; aside; b; bdi; bdo; blockquote; button; canvas; cite; code; data; details; dfn; div; em; embed; fieldset; figure; footer; form; h1; h2; h3; h4; h5; h6;header;  i; iframe; img; ins; kbd; label;main; map; mark; math; meter; nav; object; output; p; pre; progress; q; ruby; s; samp; section; select; small; span; strong; sub; sup; svg;tabletextarea; time; u; var; video audio (if the controls attribute is present); dl (if the element’s children include at least one name-value group); input (if the type attribute is not in the Hidden state); ol (if the element’s children include at least one li element); ul (if the element’s children include at least one li element); Text that is not inter-element white space
Script-supporting elements script; template
żródło: https://www.w3.org/TR/html52/fullindex.html#index-elements

Cel – lepiej wykorzystywać semantykę.

źródła:

https://www.w3.org/TR/html52/
https://www.w3.org/TR/html52/changes.html#changes
https://bitsofco.de/whats-new-in-html-5-2/
https://www.w3.org/blog/2017/12/html-5-2-is-done-html-5-3-is-coming/
https://css-tricks.com/html-5-2-done-html-5-3-coming/

Ten wpis został opublikowany w kategorii front-end i oznaczony tagami . Dodaj zakładkę do bezpośredniego odnośnika.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *