W3CのMarkup Validation Service(マークアップバリデーションサービス)でウェブページを確認する機会がありました。
これって警告・エラーなんだ!という新しい発見がありましたのでメモします。
※2020年7月現在の内容です。
コメントの中にハイフン2つが出てくると警告
<!-- --←これがよくない -->
です。
BEMで書いているとクラス名に「--」がでてきて、その要素をコメントアウトしていたので警告を受けていました。
見出しタグ(h2など)はsectionタグ内では孫要素とかでも良い
<!-- NG --> <section> <div> <p>見出しテキスト</p> </div> </section> <!-- OK --> <section> <h2>見出しテキスト</h2> <div> <p>テキスト</p> </div> </section> <!-- これもOK --> <section> <div> <h2>見出しテキスト</h2> </div> </section>
section要素のすぐの子要素でなければならないと思っていました。divを使いたいことがよくあるので一安心です。
iframe要素の廃止された属性をつかうとエラー
- frameborder
- scrolling
- marginheight
- marginwidth
これらは代わりにcssで設定するように、と書かれていました。
しかし、エラーを受けている該当のコード、yahooの!タグマネージャーの部分なんですよね...。
<noscript> <iframe src="//b.yjtag.jp/iframe?c=XXXXXXX" width="1" height="1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe> </noscript>
公式に配布されているコードって弄りづらいのでこのままにしています。
ところでjavascripが無効のときに表示する <noscript>
。
どういう動きをするのか確認されている記事がありました。
HTML、noscriptタグの挙動について。(非表示なのか未解釈なのか)|マコトのおもちゃ箱 ~ぼへぼへ自営業者の技術メモ~
Unicode正規化フォームCでないとエラー
Unicode(ユニコード)とは「符号化文字集合」というもので、UTF-8などの「文字符号化方式」とは別ものです。
分かりやすい記事です!
https://wa3.i-3-i.info/word11422.html
上記を踏まえて「正規化形式C」とは合成済み文字(例:が)のことをいいます。
結合文字列は文字列を結合したもの(例:か゛←「か」+「゛」)です。
「Text run is not in Unicode Normalization Form C.」というHTML Validation Serviceの警告について: 小粋空間
「正規化フォーム(形式)C」を使わないとエラーになるんですね。
これはどこでそう決定されるのでしょうか...。
ユーザーが画面拡大できないビューポートの設定だと警告
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
これで
Consider avoiding viewport values that prevent users from resizing documents.
という警告が出ました。
content属性の値から、
maximum-scale=1.0
と user-scalable=no
を削除すると、ユーザーが画面サイズを変更することができます。
ビューポートもコピペで済ませている部分があるので、ちゃんと理解しないとと思います。
番外:CSSの警告・エラー
cssもチェックしたので少し載せます。
background-color と border-color は同じ色です
警告です。
同じ色だと同化してしまって背景と枠線がわからないですよ、と教えてくれているそうです。
ありがた迷惑のような気もしますが、優しさと受け取ってスルーします。
-webkit-animation is an unknown vendor extension
「-webkit-animationは不明なベンダー拡張です(Google翻訳)」という警告です。
ベンダープレフィックス関連の警告は多い印象です。
ブラウザのバージョンアップとともに -webkit-
がいらなくなったりなど、刻々と変化しそうな部分なので、Autoprefixerを使っていきたいです。
CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入 - Qiita
異なる環境でも同じ表示(クロスブラウザ)と正しいcss、どちらを取るか天秤にかけたら、前者かなぁと思います。
最後に
なかなかちゃんとhtml、cssの文法と向き合うことはないのでよかったです。
でもエラーチェック・対応はたまにがいいですね。