さよなら hasLayout さよなら zoom
CSS Property Advent Calendar 2013 22日目です。なぜクリスマスは師走にあるのでしょうか。（またもや遅れてごめんなさい。）
前日は Tenderfeel さんの WebTecNote - CSS3 background-clipの実例紹介 でした。翌日は Hiroki Tani さんの CSSカスタムプロパティとMythの話 | inkdesign でした。
今となっては皆が知っているIEにかつてあった hasLayout プロパティとそれのおかげでランクアップしたお話。
IEとhasLayoutとzoomに感謝する記事です。技術要素なし、自分語りにつき閲覧注意。
hasLayout 攻略される
2006年末ごろIE7が出たばかりでブラウザと言えばIE6対応が主業務だった（ような気がする）頃のこと。
その頃僕はHTML+CSSで一通りのページがさくさく組めるようになり、IE6の不具合を一個ずつ時間をかけてつぶすことにそれなりの達成感を味わえていた牧歌的な時代。
当時僕は情報収集が下手でRSSとかもそんなに巡回できていなくて有名人のブログ情報を読むのが精一杯。海外の情報などほとんど追えていなかった。
そんなある日、当時の同僚が「俺らの睡眠時間削ってたのはこいつだった・・・。」とメールで教えてくれたのが hasLayout の解説をした海外のブログ記事だった。
IE6,7 相手に CSS を書いたことがある人ならみんな知っているように hasLayout の不具合は数多くの崩れを生み出し、多くのマークアップエンジニアやコーダーと言われる人達の終電を撃墜した強敵。（少なくとも当時の僕には強敵だった。）
その記事を読んでこんな理解だった記憶がある。
- IEには hasLayout という隠しプロパティ *1 があるらしい
- それが発狂すると崩れるらしい、widthとかあてると崩れなおることがあるのはこれ
- zoom ってのを使うと見た目に影響せずに直せるらしい、何それ裏技みたい！ *2
zoom の存在を知らなくて zoom: 100 とかあててゲラゲラ笑ってたのを今でも覚えている。当時文字以外を css で拡大できるなんて考えもしなかった。
時差を思い知る
この記事を読んだ次の日から作業は劇的に効率化した。reset.css 的なものにデフォルトが display: block になるような要素に zoom: 1 を当てたり、 zoom: normal でそれを解除できることを発見したり（当時ぐぐってもわからなかったのでいろいろ試行錯誤した） 、理由なく li に zoom: 1 をあてると後悔するということを理解したりするのに時間はかからなかった。
仕事仲間の間では hasLayout が話題の中心になった。それなのに日本語のブログとかではあまり言及がなく「なんでだろうね？」というような話をしていた。（当時の僕のググル力は極端に低かったので見つけられなかっただけなんだとは思う。）
それから数ヶ月たって日本語の Tips 系のブログで hasLayout の記事が出るようになり、海外との時差を初めて実感した。
「自分はみんなより早く知っていたんだ」みたいなことを思うことはなく、僕もたまたま同僚が海外の記事を読んでいて、たまたまそれを教えて貰えたから数ヶ月の間まわりより早く帰れていたということに漠然とした不安を抱いた。
日本語の分かりやすい記事が出るまで非効率な作業を非効率だと気付かずにこれからも続けていくことがあるのかと思うと背筋が凍る思いがした。
この一件から、苦手な英語ブログもRSSに登録して見出しだけは読むようにした。
幸い同僚には海外記事へのアンテナ感度が高い人が多くその人のソーシャルブックマークをウォッチするようにもなった。 *3
hasLayout の話題は僕の中で情報収集の方法を根底から変えた出来事だった。
今も英語はほとんど分からないし、できることなら日本語の記事だけを読んでいたい。
それでも少しでも海外の情報に目を向けていると良いことがあるというのを知れたため、その後の働き方は大きく変わったと思う。
何よりも視野が広がり調べることが楽しくなった。これはすべて hasLayout と zoom による成功体験と薄氷をふむような危うい立ち位置にいた自分に気付けたことが大きい。
さよなら hasLayout さよなら zoom
この冬まぼろし社さんがIE8対応を別途費用とするアナウンスを出した。
弊社 Gaji-Labo もIE8対応は徐々に減っており来年はさらにこの傾向は強くなると思っている。そうすると hasLayout のことは気にしなくてよくなるなと思ったら、だいぶ前の話を思い出した。
zoom プロパティは非標準だし、 transform: scale() などの標準的な手法で同じことができる。今後 zoom を書く機会は減るのだろう。それでも僕は zoom のことを忘れない。と思う。たぶん。いや、忘れたいけど。
