あなたのキモチ つなげるカタチ

TOP > 備忘録 > 本当にあった怖いDOCTYPE宣言

本当にあった怖いDOCTYPE宣言

スポンサーリンク

この記事は2016年8月24日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

先日、レスポンシブ案件でスマートフォンの実機のみ一部のタグにスタイルが適用されない現象が発生しました。
かなり珍しい現象だったので忘れないように記述しておきます。

経緯

先日、既に公開されている既存ページを簡易的にレスポンシブ化させる案件を担当しました。
PC閲覧時のみでしか最適化されていないHTML 4.01で宣言している10年くらい前に作成されたようなページです。
「基本的にbodyタグ内のソースとCSSだけ編集して作業するように」
との指示を受けたのでCSSファイル内でメディアクエリを使用して作業を進めました。
難なく作業を終え、デベロッパーツール上では問題ないことを確認。
続いてスマホ実機で確認するタスクへと移りました。
そこで、tableに関わるタグ全てにdisplay blockが効いていないことが発覚しました。

症状

メディアクエリ内に記述した
table、th、tr、tdタグへのdisplay blockが効かない。iOS、Android、バージョンに関係なく効かない様子です。
※メディアクエリ外で記述しても効きませんでした

原因

色々検証したのですが、元々記述されていたDOCTYPEにDTD(文書型定義)がなかったことが問題のようです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
はダメで
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ならOK

上記のようにTransitionalの表記を追記することでスタイルが効くようになりました。
最近の新規作成時はHTML5で宣言することがほとんどなので気にしていませんでしたが、ファイルの一部を改修してレスポンシブ化しようとするような時は、こんな問題が発生することもあるようです。

スタイルが効かなくなるのはあまり無いパターンなのでかなり焦りました。
ただ、以前にも古いDOCTYPE宣言が原因で崩れが発生した経験があったので
気が付くきっかけとなりました。やはりWEB制作において経験は貴重な財産になります。
今回の経験も、将来直面するトラブルで活きることになるかもしれません。

一応、下記にDTDがある時と無い時の状態でデモページを用意しました。

追記

iOSのバージョンによってはDTD(文書型定義)を記述していなくても効きました(iOS8)
う~ん、不思議な現象ですね・・・

スポンサーリンク