HTML Living Standardについて
ブログ記事書く程度で新しいWEBサイト自体は全く作らなくなってHTMLの新バージョンとか全然調べなくなってたが、
W3Cが仕様を策定していたHTML5.xはHTML5.2で終了してWHATWGのHTML Living StandardがWEB標準になってたんだね。
W3Cが仕様を策定していたHTML5.xはHTML5.2で終了してWHATWGのHTML Living StandardがWEB標準になってたんだね。
というわけで、どこらが変わったのか調べてたが、
Popover API
HTML要素にpopover属性をつけると初期状態で非表示になり、
HTMLElement.showPopover()で表示する。
要素はposition:fixedで上下左右センタリングされるのでブラウザ表示領域の真ん中にしか表示できない。
表示された状態で表示要素の外側をクリックすれば消える。（消えないようにもできる）
<button>か<input type="button">にpopovertarget属性でidを設定するとJavaScriptなしでも対象idが設定された要素を表示できる。
画像クリックしたら全体にポップアップするようなのを簡単に作れそう。
<dialog>
これはPopover APIと似たようなもんだから統一したほうが良かったんじゃないの？
popoverとの違いは、dialogはHTMLDialogElement.showModal()だと要素の外側が操作不能になり、HTMLDialogElement.show()だと外側が操作可能（勝手に閉じるわけではない）。
JavaScriptなしでの制御はできない。
<details>
details要素は前からあったが、子要素の<summary>だけ表示されてクリックするとsummaryの外側も表示される感じだが、
name属性をつけると同nameの複数のdetailsを排他で開けるようになったみたい。
だが、detailsは以前からあったわけだが、たぶんリストのマーカー？がカスタマイズできなかったから使ってなかったんだと思うんだが、
CSSの::marker擬似要素でマーカーをカスタマイズできるようになったってのが大きい気がする。
::markerは<details>以外にも<ul>とか<ol>も対象にマーカーのデザインをカスタマイズできると思われる。
マーカーのデザインがカスタマイズできればQAとかを開閉式で作るのが簡単になりそう。
inert属性
任意のHTML要素にinert属性をつけると操作できなくなる。テキストの選択すらできない。
昨今、右クリック禁止の進化版みたいなテキストの選択ができないWEBページがあるが、これ使うんだね。
メインコンテンツを選択できなくするようなWEBサイトはうざいが、ボタンみたいな独自UIを実装するような時にテキスト選択ができなくする感じでは使い道ありそう。
loading属性
表示範囲外の画像を表示範囲に入るまで読み込まない感じの機能を実装するのがDOM属性を設定するだけで実装できるんだね。だいぶ簡単になるね。
heightとかmin-heightなんかが設定されてれば計算してくれるのかな？
セクショニング・ルート？アウトライン？
HTML Living Standardを調べてて、セクショニング・ルートが廃止されたとかアウトラインがどうとか解説されてて、
HTML5になってから<article><aside><nav>とか使うようになってたが要らなくなった？
かとも思ったんだが、要素が廃止されてるわけでもなく、何ら変わってないような？これまでどおり囲んでおいて問題ないような・・・
Shadow DOM
調べてたらCSSを分ける時に使うとかセキュリティ機能ではないとか書いてるページが出てきたが、セキュリティ機能以外のなんでも無いだろこれは。
ログインフォームを設置するページにGoogle Adsenseつけたりする時に<iframe>のsandbox使わないとGoogleがログインフォームにアクセスできちゃうが、Shadow DOMを使えば<iframe>使わずに外部スクリプトから隔離できる。
MDNにもブラウザ拡張機能で制限回避できるから「これを強力なセキュリティの仕組みだと考えるべきではありませ ん。」なんて書かれてるが、
ウイルス飼ってるようなvisitorのことまで考えるならsandboxでもダメだからWEB自体がダメだろｗ
WEBサイト作る時に考えなきゃいけないのはGoogleとか外部のscriptをログインフォームと同じページに設置するときの問題だろ。
興味持った変更点はそんなところかな。
あと、HTML5.2で<menuitem>が無くなって一時はコンテキストメニューが実装されてたFirefoxも機能が外されて、他の方法で置き換えられない機能だから残念だったが、
HTML5.2では<menu>とかoncontextmenuなんかも廃止されつつブラウザ実装は残ってた感じだが、
HTML Living Standardではmenuitemは復活してないものの、<menu>とかoncontextmenuは正式復活してるんだね。
かつてのFirefoxみたいにコンテキストメニューが実装できるようになってほしい・・・
Netscape時代のブラウザ戦争みたいにブラウザ開発側は新機能をどんどん追加していきたいんだろうが、
WEBサイト作る側としてはHTML5.xみたいにバージョンごとに機能変更していく方が追跡しやすいね・・・
Popover API
HTML要素にpopover属性をつけると初期状態で非表示になり、
HTMLElement.showPopover()で表示する。
要素はposition:fixedで上下左右センタリングされるのでブラウザ表示領域の真ん中にしか表示できない。
表示された状態で表示要素の外側をクリックすれば消える。（消えないようにもできる）
<button>か<input type="button">にpopovertarget属性でidを設定するとJavaScriptなしでも対象idが設定された要素を表示できる。
画像クリックしたら全体にポップアップするようなのを簡単に作れそう。
<dialog>
これはPopover APIと似たようなもんだから統一したほうが良かったんじゃないの？
popoverとの違いは、dialogはHTMLDialogElement.showModal()だと要素の外側が操作不能になり、HTMLDialogElement.show()だと外側が操作可能（勝手に閉じるわけではない）。
JavaScriptなしでの制御はできない。
<details>
details要素は前からあったが、子要素の<summary>だけ表示されてクリックするとsummaryの外側も表示される感じだが、
name属性をつけると同nameの複数のdetailsを排他で開けるようになったみたい。
だが、detailsは以前からあったわけだが、たぶんリストのマーカー？がカスタマイズできなかったから使ってなかったんだと思うんだが、
CSSの::marker擬似要素でマーカーをカスタマイズできるようになったってのが大きい気がする。
::markerは<details>以外にも<ul>とか<ol>も対象にマーカーのデザインをカスタマイズできると思われる。
マーカーのデザインがカスタマイズできればQAとかを開閉式で作るのが簡単になりそう。
inert属性
任意のHTML要素にinert属性をつけると操作できなくなる。テキストの選択すらできない。
昨今、右クリック禁止の進化版みたいなテキストの選択ができないWEBページがあるが、これ使うんだね。
メインコンテンツを選択できなくするようなWEBサイトはうざいが、ボタンみたいな独自UIを実装するような時にテキスト選択ができなくする感じでは使い道ありそう。
loading属性
表示範囲外の画像を表示範囲に入るまで読み込まない感じの機能を実装するのがDOM属性を設定するだけで実装できるんだね。だいぶ簡単になるね。
heightとかmin-heightなんかが設定されてれば計算してくれるのかな？
セクショニング・ルート？アウトライン？
HTML Living Standardを調べてて、セクショニング・ルートが廃止されたとかアウトラインがどうとか解説されてて、
HTML5になってから<article><aside><nav>とか使うようになってたが要らなくなった？
かとも思ったんだが、要素が廃止されてるわけでもなく、何ら変わってないような？これまでどおり囲んでおいて問題ないような・・・
Shadow DOM
調べてたらCSSを分ける時に使うとかセキュリティ機能ではないとか書いてるページが出てきたが、セキュリティ機能以外のなんでも無いだろこれは。
ログインフォームを設置するページにGoogle Adsenseつけたりする時に<iframe>のsandbox使わないとGoogleがログインフォームにアクセスできちゃうが、Shadow DOMを使えば<iframe>使わずに外部スクリプトから隔離できる。
MDNにもブラウザ拡張機能で制限回避できるから「これを強力なセキュリティの仕組みだと考えるべきではありませ ん。」なんて書かれてるが、
ウイルス飼ってるようなvisitorのことまで考えるならsandboxでもダメだからWEB自体がダメだろｗ
WEBサイト作る時に考えなきゃいけないのはGoogleとか外部のscriptをログインフォームと同じページに設置するときの問題だろ。
興味持った変更点はそんなところかな。
あと、HTML5.2で<menuitem>が無くなって一時はコンテキストメニューが実装されてたFirefoxも機能が外されて、他の方法で置き換えられない機能だから残念だったが、
HTML5.2では<menu>とかoncontextmenuなんかも廃止されつつブラウザ実装は残ってた感じだが、
HTML Living Standardではmenuitemは復活してないものの、<menu>とかoncontextmenuは正式復活してるんだね。
かつてのFirefoxみたいにコンテキストメニューが実装できるようになってほしい・・・
Netscape時代のブラウザ戦争みたいにブラウザ開発側は新機能をどんどん追加していきたいんだろうが、
WEBサイト作る側としてはHTML5.xみたいにバージョンごとに機能変更していく方が追跡しやすいね・・・