顛末
冬のオフィスで一人HTMLをコーディングているときでしたよ。
フロー状態に入っていたんでしょうね。気づけば窓の外は #000
みたいに真っ暗闇。
ふと気づくとSlackの新着メッセージを知らせるバッジがおもむろにピカーッと、柘榴色#ff4537
に光ってるんですね。
そのメッセージで…仮にAさんとしておきましょうか。開発者のAさんが「ステージング環境のtable
要素にどうしてもcolor
プロパティが当たらない」って妙なことを言うんです。
でもね、タスクランナーもLintツールもエラーの一つも吐かないし、CDNから読み込んでるCSSもない。なんかおかしいなーと思っているともう一度Aさんからメッセージが来るんです。「助けてくれー」って。
背筋にゾクッと冷たいものを感じながらも、あたしはなぜかデベロッパーツールを開ける気になっちゃいましてね。
嫌だなー怖いなーって思いながらマウスをカツーーーーンとクリックしてキーボードをカタカタカタカタ、カタカタカタカタ……デベロッパーツールの隅っこをよーく見たら、 薄ーい灰色の背景色に真っ赤な文字で
table {color: -internal-quirk-inherit;}
なんて見覚えのないスタイル指定があった。こいつが文字色を新月の夜みたいな #000
に変えちゃっていた。
でもそんなスタイル指定を自分で書いた覚えがないし変だなー、「色が内部からねじれて引き継がれる」って何だろうおかしいなーおかしいなーって小一時間ハマっているとうぅ、ううぅ、ううぅ……汗が、わーっと、噴き出てくる。
うーんうーんと悩んでいたその時…ふっと予感がよぎった。
念のため確認しておこうとおそるおそるHTMLの1行目を見たら…
「え?何かいる」
HTML5の <!DOCTYPE html>
宣言の手前に何か文字が入っているとtable要素の文字色が color: -internal-quirk-inherit;
になってしまう、そんなことが本当にあるんですね。
それじゃまた。
## 知見
DOCTYPEは、htmlファイルの最初の行に存在する必要がある。その前に何か他のものがあれば(たとえそれが空白行であっても)、一部のブラウザはDOCTYPEが存在しないものとしてそのページを取り扱う。DOCTYPEがない場合、ブラウザはページを後方互換モードで表示する。これは非常に検出が難しいエラーだ。通常は、HTMLは余分な空白文字があっても問題ないために見過ごされがちだが、この場合に限って言えば非常に重要なのだ。
『入門HTML5』 p.37