IE11でHTMLコメントにMindBEMdingの文字列を使うと警告メッセージが出る

  • 更新日:
  • 公開日:

タイトル通りの内容です。解決策は「HTMLコメントにMindBEMdingの文字列を含めない」とスマートではないのですが、以下に詳細を記述します。

※正確にはMindBEMdingですが、以降は”BEM”として記述します。

IE11でHTMLコメントにBEMを使うと警告される

IE11のHTMLコメントに、BEMに則ったクラス名やID名を含めると以下の警告メッセージが表示されてしまいます。

HTML1416: コメントの末尾が予期しない文字です。"-->" である必要があります。

原因はHTMLコメントにBEM命名規則の『Modifier』を使用していたことです。

<!-- .block-name--modifier-name -->

このように、BEMで付けたModifierクラス名をHTMLコメントに含めるとIE11で警告メッセージが表示されてしまいます。

今の所解決策はHTMLコメントにModifierを使用しないこと

スマートではないのですが、以下の形で回避しました。

<!-- BlockもしくはElement名のみ -->
<!-- .block-name -->

<!-- BlockもしくはElement名の後に「Modifier: {modifier-name}」 -->
<!-- .block-name Modifier: modifier-name -->

警告が出る原因

警告が出てしまう原因ですが、どうやらMindBEMdingのModifier命名規則で使用するハイフン2つ(–)の記述列の時点で、IEにHTMLコメントの閉じタグと認識されてしまうようです。

IEの構文解析とMindBEMdingのModifier命名規則の相性が悪いので、どうしようもないと思い上記の解決策を取りました。


警告「HTML1416」は以下ページに載っております:
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/hh180764(v=vs.85)

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone