顛末

冬のオフィスで一人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