一口にロストテクノロジーと言っても、名前を聞いて「そんなものがあったなあ」と感傷に浸るものもあれば、「もはや思い出したくもない」ようなものまで存在します。ここでは、Internet Explorer 7まで存在した独自仕様のhasLayout
について取り上げてみます。
意味不明な存在
「ブラウザごとに挙動が異なる」場面は現代でもありますが、その様相はそれぞれです。
- 最新の仕様に追加された機能が、ブラウザではなかなか使えない
- ブラウザ独自の拡張なので、あるブラウザでしか表示されない
- ブラウザにバグがあって、規格上は問題ないものが表示されない
納得度は上から順に下がっていくかと思いますが、今回テーマとするhasLayout
はどれでもなく、「既存のHTML要素に自動で適用される独自仕様」なので、さあ大変です。
hasLayout
は、その名の通り、「この要素がレイアウト情報を持つか」を定義する値で、true/falseで切り替わります。falseのときには本来効くべきレイアウトが適用されないという闇に入っていきます。
直接変えられない
さらに厄介なことには、CSSでhas-layout: true
のように変更もできず、適用される条件を整えてtrue
に切り替えるしかないのです。具体的には、
display: inline-block
-
height
あるいはwidth
をauto
以外にする -
float: left
あるいはfloat: right
にしてフロートさせる position: absolute
writing-mode: tb-rl
-
zoom
にnormal
以外を指定する
といった指定が必要になります(参考)。もちろん、そのためだけに縦書きにするわけにも行かないですし、レイアウトの都合上かけられないものも多くあるのですが、要素をzoom
しないといけない機会はそうそうあるわけでもないので、zoom: 1
が事実上hasLayout
セット用のCSSとして扱われるようになっていました。
その後
IE 8でhasLayout
もなくなり、2016年にIEのサポートサイクルが変更されたことで、IE 7が完全に過去のものとなっています。 一方で、zoom
プロパティはIEとそれを受け継いだEdgeだけでなく、どういうわけかWebkitでも実装されて、現在にいたっています(MDN)。