Slide 1

Slide 1 text

HTML栄枯盛衰は世の習い - Web Night Miyazaki vol.14 -

Slide 2

Slide 2 text

高見和也（Takami Kazuya） https://twitter.com/miiitaka https://www.facebook.com/miiitaka { Company: “株式会社まなびと” }, { Role: “Front-End Developer 兼代表取締役” } https://github.com/miiitaka

Slide 3

Slide 3 text

名刺交換はこちらで（名刺交換サービス Eight ） https://8card.net/virtual_cards/DptPRPyciFfr-MHF3eTIeQ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

2021年1月28日永眠（享年13）

Slide 6

Slide 6 text

喪主：

Slide 7

Slide 7 text

今は HTML Living Standard が標準です

Slide 8

Slide 8 text

HTML Living Standardは誰が生みの親？

Slide 9

Slide 9 text

WHATWGです

Slide 10

Slide 10 text

Web Hypertext Application Technology Working Group（WHATWG、ワットワーキンググループ、ワットダブルジー）は、HTMLと関連技術の開発をするためのコミュニティである。W3Cが策定したXHTMLや、W3Cがウェブ開発者の要望を軽視していることなどを不満に思ったApple、Mozilla、Operaの開発者たちによって2004年に結成された。2017年末にはMicrosoftも参加している。 W3Cの対抗組織として始まったWHATWGだが徐々に影響力を強め、例えば、WHATWGが提唱したHTML Living Standardを基にして、 W3CがHTML5を策定した。2019年、今後は W3C自身は、 HTMLとDOMの策定をやめ、WHATWGに協力することを表明した。 Web Hypertext Application Technology Working Group ※出典：Wikipedia https://ja.wikipedia.org/wiki/Web_Hypertext_Application_Technology_Working_Group

Slide 11

Slide 11 text

要するに仲が悪い（※個人の見解です）

Slide 12

Slide 12 text

HTML4 ブランチで表すとこう 1997.12 4.0勧告 2018.3 4.01廃止 1999.12 4.01勧告 XHTML 2000.1 1.0勧告 2018.3 1.01廃止 2009.7 開発打切 2002.8 SE勧告 HTML5 2007.3 共同作業開始 HTML Living Standard 2011.11 勧告 2008.1 草案公開 2012 共同作業中止 2014.10 5.0勧告 2016.11 5.1勧告 2017.12 5.2勧告 2021.11 5.2廃止 5.1取込 5.2取込

Slide 13

Slide 13 text

Slide 14

Slide 14 text

しかし両者大人なので停戦になります

Slide 15

Slide 15 text

Slide 16

Slide 16 text

これからはHTML Living Standard

Slide 17

Slide 17 text

HTML LS で何が変わるのか？

Slide 18

Slide 18 text

HTMLを書く上では大きな変化はありません

Slide 19

Slide 19 text

① 宣言は変わらず ② 要素に遅延読込ができる loading 属性追加（以前は JavaScript で実装してた） →WordPress5.5から投稿などで img要素に自動的に追加されます※次ページ参照 ③ autofocus 属性がフォーム系の要素だけでなくフォーカス可能な要素であればOK ④ で遷移したとき別URLに ping を送信する ping 属性追加（ area 要素でも可） ⑤

は複数設定可能（但し 1 section 1 要素が原則） ⑥ グローバル属性として slot 属性対応（Shadow DOMに追加がより柔軟に） ⑦ autocapitalize 属性（自動大文字機能の ON / OFF ※iOSのみ） ⑧ nonce 属性（Base64指定。セキュリティは意識したい）何が変わるの？（たくさんあるので高見が気になるものをピックアップ）

Slide 20

Slide 20 text

レイアウトシフト※を防ぐために指定。もし画像タグにwidth・height属性がなければ 1. ブラウザは画像の幅と高さの比率を把握できない 2. レスポンシブWebデザインの場合ブラウザは画像をどんなサイズで表示すべきか計算できない 3. サイズが不明のためブラウザは画像のダウンロード前に表示領域を確保できない 4. 画像が遅延読み込みされたら、コンテンツの移動が発生しレイアウト崩れを起こす可能性がある WordPressでは画像タグにwidth・height属性がないものには「loading=”lazy”」を自動追加しない仕様となっています。遅延読込ができる loading 属性の注意点 → width・height 属性が必須 ※ 後から読み込まれたコンテンツの影響で、すでに読み込み済みのコンテンツの移動が発生しレイアウト崩れを起こしてしまう現象の事。

Slide 21

Slide 21 text

ご清聴ありがとうございました。