要約
- Nu Html Checker をオンラインで実行する validator.w3.org/nu は新しい仕様のチェックに対応していない（2022/05/21現在）
- Nu Html Checker 自体は HTML Living Standard 更新に合わせてアップデートされているが、validator.w3.org/nu には反映されていない
- ローカルから 最新の Nu Html Checker を実行することで新しい仕様のチェックができる
ことの発端
- First View で Layout Shift が発生するので対策を調べていたところ、Source タグにも width / height を設定することができるらしい (https://www.mitsue.co.jp/knowledge/blog/frontend/202105/31_1512.html)
- Source タグ内に width / height を設定したところ validator.w3.org/nu でエラー
気になったので調べてみる
HTML Living Standard を確認する
ブラウザ独自の機能ではなく、標準化はされていることは分かりました。
Source 要素に width / height attribute が追加されたのは 2021年の2月みたいです。
- https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element
- https://github.com/whatwg/html/commit/c2d1a367935ef43ee38d6ed76086277558e4ac7b
Nu Html Checker のリポジトリを覗いてみる
- https://github.com/validator/validator
- Issue / PR で探す
- Attribute width not allowed on element source at this point
- feat: add support width and height of source in picture
どうやらチェックする機能はありそう
ドキュメントに従ってローカル環境を構築する
terminal
$ docker pull ghcr.io/validator/validator:latest
$ docker run -it --rm -p 8888:8888 ghcr.io/validator/validator:latest
ローカル環境にアクセス、バリデーションを実行したところ Source タグの width / height が正常にチェックされることを確認
まとめ
- validator.w3.org/nu は HTML Living Standard に対応していないことが分かった
- HTML Living Standard のバリデーションを行うには、最新版の Validator (https://github.com/validator/validator) を準備・実行して確認する必要がある
小話とか
- W3C による HTML の策定が中止になってから、validator.w3.org/nu の更新が止まったのかな？
- W3C と WHATWG の覚書1を確認したけど、チェッカーに関する記述は見つけられなかった
- WHATWG の仕様書からチェッカーの項目を辿ると validator.w3.org/nu にたどり着く
-
Memorandum of Understanding Between W3C and WHATWG - https://www.w3.org/2019/04/WHATWG-W3C-MOU.html ↩