条件分岐コメントかCSSハックか、それが問題だ

2015年12月15日 著

CSS昔話 Advent Calendar 2015、15日目の記事です。僕には文才が無いので、他の方のようにお伽話っぽく面白おかしい書き方はできないのですけど、とにかく昔話には違いないと思うので、適当に書き散らしてみますね。

自分が今の勤務先に転職してきてまず取り組んだのが、自社サイトのフルCSSレイアウトへの移行。しかも、今にして思えばかなり正気の沙汰ではありませんが、基本ビジュアルデザインに手を加えないかたちでの移行に取り組みました。2004年当時、CSSレイアウトは社内でまだあまり採用されていなかったものですから、自社サイトを一種のモルモットとして、「Show, Don't Tell」の精神でその利点を実証して見せようと考えたわけです。

自社サイトをモルモット代わりに、というのはその8年後にあたる2012年、HTML5の採用＆レスポンシブっぽいデザイン実装を行ったリニューアルにおいても同じ道を歩んだのですが、それはまた別のお話。閑話休題、2004年のフルCSSレイアウトへの移行では、ブラウザ間の実装差異にまだまだ苦しまされたわけで、そりゃもうCSSハックに頼らざるを得なかったわけですよ（ちなみにFirebugなどという便利ツールはまだ影も形もない）。

実際にどんなページだったかと言うと......Wayback Machineで見てみると、2004年3月19日時点のトップページは、まだガッチガチのテーブルレイアウトでデザインが実装されていました。それが、2004年4月14日時点ではCSSレイアウトに切り替わっています。まぁ多少、見た目が変わってしまっているところもありますけども、そこはご容赦いただきたく。

4日目の記事、@importトリックの回顧 - dskdで紹介されているようなCSSハックは、やっぱり使いまくってましたね。まず、link要素のmedia属性値でscreen以外の値、ないし複数の値を指定することでNetscape 4.xを、さらに@importでurl()を使わず二重引用符でCSSファイルを括ることでIE4とかMacIE 4.xを、それぞれスタイルシートの適用対象外としていました（俗に言われた？「すっぴんの刑」）。でまぁスタイルシートの中身についてですけど、自分が当時よく頼っていたCSSハックのベスト3を選ぶなら......

第3位：Commented Backslash MacIE5 CSS Hack

/* \*/
background:url("../img/cmn/text_link_item.gif") 0% 50% no-repeat;
/* */

呪文のようなコメント文で挟まれたスタイルは、MacIEにのみ適用することができました。解説はMacIE5 CSS Hackを参照のこと。

第2位：Asterisk Hack

background:url("../img/cmn/heading1_item.gif") 0% 40% no-repeat;
*background-position:0 45%;

上記の例では、IE7以下でだけ背景画像の位置をずらすとかいう謎なスタイルを実現しています。きんもーっ☆

第1位：Alternate Box Model Hacks

width:555px;
width/* */:/**/549px;
width: /**/549px;

うわー、もう何が何やらわけがわからないよ！というわけで、詳しい解説はAlternate Box Model Hacks (Japanese Translation)をご覧ください。

......とまぁ、こんな感じでしょうか。まさに、イマドキの若者には1ミリも役に立たないCSSハックばかりですね。そもそも若者はMacIEとか使ったことないっていうかMacIEの存在自体きっと信じていないでしょう。当時はいろいろ言われたけれど、ところがどっこい、僕にとってはなかなか良いブラウザーでしてね、などと書き始めるとまた脱線するのでやめておきます。

CSSハックの多くは、WinIEのバージョン間における実装差異の吸収を目的として「しぶしぶ」使っていたのですが、そこで本記事のタイトルに掲げた命題、すなわち条件分岐コメントでIE専用CSSファイルにハックの部分を切り出し管理を分けるのを良しとするか、それともCSSファイルは分けずに一元管理のメリットを取ってハックを使いまくるか？という命題にぶち当たるわけです。HTMLとCSS、汚すならどっち？みたいな（ちょっと違うけど大体あってる）。

その判断には個人の趣味嗜好も多分に影響したのですけど、自分はやはり「CSSなんて飾りです偉い人にはそれがわからんのです」と思っていたから、汚れ役はCSSだけにしたかったのですね、どちらかと言えば。link要素がぞろぞろとコメントアウトされて並んでいるというのはどうも気味が悪かったから（たとえその部分をSSIか何かで一元管理できていようとも）。あまり関係ないけど、条件分岐コメントでhtml要素の開始タグが3つも4つも並んでるのとか見ると背筋がゾッとする。あ、また脱線した。

個人的な好みはさておき、あの頃（どの頃）って、やはり制作するWebコンテンツ（のマークアップ）の永続性をどう担保するかってところに腐心した結果として、条件分岐コメントを避け、CSSハックに依存していた気がします。マークアップに一切手を加えることなく、ピュアにスタイルシートの編集だけでデザインリニューアルを可能にしてみせる......とまで「構造と表現の分離」に取り憑かれて魅せられていたわけではないにせよ、Webコンテンツ実装の土台たるマークアップには、考え得る限りの堅牢性、耐久性を備えさせたかったのです。

Edgeなどというブラウザが普及し始めている昨今、条件分岐コメントも遠い昔の存在になってしまいましたが、最近のWebデザイナー、Web開発者な皆さんは、そのあたりどのようにお考えなのでしょうか。経済サイクルがどんどん短くなってきている（気がする）なか、じゃんじゃんスクラップアンドビルドすることを前提に、コンテンツ（マークアップ）の永続性なんぞ微塵も考えていなかったりするのでしょうか。アクセシビリティおじさん的には気になります。

おしまい。