10
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

本当にあった color: -internal-quirk-inherit;

Last updated at Posted at 2018-03-12

顛末

冬のオフィスで一人HTMLをコーディングているときでしたよ。
フロー状態に入っていたんでしょうね。気づけば窓の外は #000 みたいに真っ暗闇。

ふと気づくとSlackの新着メッセージを知らせるバッジがおもむろにピカーッと、柘榴色#ff4537に光ってるんですね。

そのメッセージで…仮にAさんとしておきましょうか。開発者のAさんが「ステージング環境のtable要素にどうしてもcolorプロパティが当たらない」って妙なことを言うんです。

でもね、タスクランナーもLintツールもエラーの一つも吐かないし、CDNから読み込んでるCSSもない。なんかおかしいなーと思っているともう一度Aさんからメッセージが来るんです。「助けてくれー」って。

背筋にゾクッと冷たいものを感じながらも、あたしはなぜかデベロッパーツールを開ける気になっちゃいましてね。

嫌だなー怖いなーって思いながらマウスをカツーーーーンとクリックしてキーボードをカタカタカタカタ、カタカタカタカタ……デベロッパーツールの隅っこをよーく見たら、 薄ーい灰色の背景色に真っ赤な文字で
table {color: -internal-quirk-inherit;}なんて見覚えのないスタイル指定があった。こいつが文字色を新月の夜みたいな #000 に変えちゃっていた。

スクリーンショット 2018-03-12 18.47.01.png

でもそんなスタイル指定を自分で書いた覚えがないし変だなー、「色が内部からねじれて引き継がれる」って何だろうおかしいなーおかしいなーって小一時間ハマっているとうぅ、ううぅ、ううぅ……汗が、わーっと、噴き出てくる。
うーんうーんと悩んでいたその時…ふっと予感がよぎった。

念のため確認しておこうとおそるおそるHTMLの1行目を見たら…

「え?何かいる」

スクリーンショット

HTML5の <!DOCTYPE html> 宣言の手前に何か文字が入っているとtable要素の文字色が color: -internal-quirk-inherit; になってしまう、そんなことが本当にあるんですね。
それじゃまた。

## 知見

DOCTYPEは、htmlファイルの最初の行に存在する必要がある。その前に何か他のものがあれば(たとえそれが空白行であっても)、一部のブラウザはDOCTYPEが存在しないものとしてそのページを取り扱う。DOCTYPEがない場合、ブラウザはページを後方互換モードで表示する。これは非常に検出が難しいエラーだ。通常は、HTMLは余分な空白文字があっても問題ないために見過ごされがちだが、この場合に限って言えば非常に重要なのだ。
『入門HTML5』 p.37
10
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?