Blog

※ブログ移転しました。 → hamashun.me

そろそろCSSハックの良し悪しについて考えてみる(書式編)

フルCSSでサイトを制作する際に、まだまだ避けては通れないのがCSSハックです。
巷には色んなハックが溢れていますが、今回は良いハックと悪いハックを『書式』をキーにして考えてみたいと思います。

なお、ハックはあくまで最終手段であり、使わないにこした事は無いという事を、事前に書いておきたいと思います。
また、一部CSSハックと呼ぶには語弊があるテクニックもありますが、ブラウザ実装の差異に対する技術、といった意味合いで、この記事ではハックで統一しています。

バリデータに通るか否か

まず最低条件として、バリデータに通るかどうか、という点が挙げられると思います。
例えばプロパティの前にアンダースコアを付ける、いわゆるアンダースコアハックは現在でも多く使用されていますが、これは明らかに悪いハックです。

書式上で正しいかどうか

次に考えたいのは、書式として合っているかどうかです。
* html .hoge {~}といったスターハックなどと呼ばれるハックは、「*(全ての要素)の子孫要素であるhtmlの子孫要素のクラスhogeの要素に対して~」という意味になります。
しかし、html要素はルート要素なので、あらゆる要素の子要素となりえません。
バリデータではエラーになりませんが、より厳格な記述を目指すなら、避けた方が良いかもしれません。
ただし、これには議論の余地があると思います。

追記1:2007 02 13
スターハックについてツッコミをいただきました。
トラックバック先とページ上部の関連リンクを参考にしてください。

追記2:2007 02 13
Kurumaさんから誤字のご指摘を受けて修正しました。

ブラウザ実装の差異を利用するハックはどうか

html>body .hoge {~}といった指定をすると、「html要素の直接の子要素であるbodyの子孫要素であるクラスhogeの要素に対して~」となります。
これは仕様書で定められた正しい書式でありながら、IE6は未対応なのでこの指定そのものを無視します。
これを利用して、先にIE6用の指定を記述して、続いてモダンブラウザ向けの指定を記述する事で、IE6とそれ以外のモダンブラウザで違う指定をする事が可能になります。
これは良いハックと言えます。

良いハック

これらをふまえた良いハックを掲載します。

media属性を利用

NN4を除外します。
NN4の初期Ver,は、@importを読むとフリーズしたりするので、とりあえずおまじないだと思って指定するが吉。

@importハック

@import "wie4.css";
@import url("mie4.css");

上がWinIE4、下がMacIE4.5を除外します。
IE4シリーズにはNN4のような動作は確認されていませんが、特に弊害もないので指定すると良いと思います。

!importantハック

.hoge {
 color: red!important;
 color: blue;
}

値に続けて!importantと記述すると、その指定が最優先されます。
しかし、IE6以下では未対応な為に無視されます(IE6以下の文字色は青になります)。
これを利用して、IE6以下とモダンブラウザで別の指定ができます。

子セレクタハック

.hoge {
 color: blue;
}
html>body .hoge {
 color: red;
}

前述の子セレクタを利用したハック。
IE6以下の文字色は青になり、モダンブラウザでは赤になります。
なお、要素セレクタと>の間には、半角スペースを含めない事が望ましいです。
その理由は非対応セレクタを利用した CSS ハックの注意点 - 2xup.orgに詳しく載っています。

属性セレクタハック

.hoge {
 color: blue;
}
.hoge[class] {
 color: red;
}

子セレクタと同じような使い方ができるハックです。 動作の理屈も同じです。
他にも兄弟セレクタや言語擬似クラスも同様の使い方ができます。

バックスラッシュハック

/* Hide Mac IE5 \*/
.hoge {
 color: red;
}
/* End */

MacIE5がバックスラッシュエスケープを一部正しく理解しない事を利用したハックです。
MacIE5では、この指定を丸ごと無視します。
動作の理屈が複雑な事から疑われがちですが、これは良いハックです。
その根拠については拙エントリー、バックスラッシュハックについての考察及びよく解るかもしれないバックスラッシュエスケープを参照してください。

Tantek Box Model Hack

.hoge {
 color: blue;
 voice-family: "\"}\"";
 voice-family: inherit;
 color: red;
}

IE5とそれ以降のブラウザで指定を振り分けるハックです。
IE5用のハックはPass Filterを使用して別ファイルにまとめる方法がありますが、そのPass Filter自体が良いハックとは言えません(そもそもバリデータを通らない)。
Tantek Box Model Hackバックスラッシュハックと同じく記述が複雑ですが、バリデータを通過し書式的にもギリギリでOKだと思います。
Tantek Box Model Hackについての考察で詳しく考察しています。

まとめにかえて

そもそも、ハック自体が諸手を挙げて歓迎できる技術ではないので、色んなご意見があると思います。
コメント、トラバは大歓迎です。

さて、今回は正しい書式である事を重視してみました。
次回は、管理のしやすさを重視したハックで良し悪しを考えてみたいと思います。

TracBack

Reference Entry:  そろそろCSSハックの良し悪しについて考えてみる(書式編):

RED LINE » CSSハックについて私も考えてみる
Shunさんのブログの「そろそろCSSハックの良し悪しについて考えてみる(書式編)」というエントリを拝見して。 上記エントリ内で、各種ハックについて...
TracBack Time:  2007年02月08日 01:02

SITE159 » そろそろCSSハックの良し悪しについて考えてみる(書式編) | Blog hamashun.com
そろそろCSSハックの良し悪しについて考えてみる(書式編) | Blog ham...
TracBack Time:  2007年02月09日 02:20

Scribble - zcxv.net » CSS の用途をわざわざ (X)HTML に限ることはない
CSS の用途をなにも (X)HTML に限らなくてもいいんじゃないの、という話。
TracBack Time:  2007年02月09日 16:10

Kuruman Memo » CSSはHTMLだけのものじゃない
CSSは構造化文書のスタイルを調整するものであり、HTMLだけの為のものではない。従ってスターハックを用いたCSSに文法上の問題は生まれない。
TracBack Time:  2007年02月10日 16:53

マウンテンブック » いいかげんに css ハック 覚えよう!
子セレクタハック /*【サブメニュー(通常時)】*/ #navi ul.sub ...
TracBack Time:  2007年04月20日 18:13

8 Comment

こんばんわー。
エントリの内容、すごく同感です。
確かにいいハックとそうでないハック、ありますよね。
・・・と少し自分の立場からハックを見てエントリ書いたので、トラバさせていただきました。

Name:Red | 2007年02月08日 01:04

こんにちは。参考になりました。
正常に表示させるだけなのに、色々あるんですね。
「そろそろCSSハックの良し悪しについて考えてみる(書式編)」のタイトルが重なるのは、ポータルサイトでも重なるし、やっぱりブラウザの問題なのかな。

Name:チョロ吉 | 2007年02月08日 16:09

>Redさん
こんばんわ。 コメントありがとうございます!
ハックに関しては、人によって考え方が大きく異なりますよね。
人の考えを聞くだけでも勉強になるなあと思います。
 
>チョロ吉さん
こんにちわ。 コメントありがとうございます!
ご指摘いただきました点ですが、把握していながらも「もうすぐリニューアルするから」と放置していました(作業自体は大した物でもないのに)。 反省。
おかげさまで、不精な自分を動かすきっかけになりました。
ご指摘ありがとうございました!

Name:Shun | 2007年02月08日 21:37

あぁ・・・すいません。
トラックバック送ったんですが、どうもうまくおくれてない模様・・・で、再送してみました。

つーか、迷惑トラバで処理されてそうな予感です(w
MTのプラグインだとどうもライブドアブログのトラバは時々はじかれる・・・(泣)

Name:Red | 2007年02月09日 09:45

>Redさん
あわわ、どうやらまだ届いていないようです(迷惑トラバにも分類されていませんでした)。
最近英語スパムコメントが増えてきたので、英語のみのコメントを弾くプラグインを導入したんですが、その影響でしょうか・・。
一度解除してみますので、よろしければまた送ってやってくださいまし。

Name:Shun | 2007年02月09日 23:06

>Redさん
すみません! 1000件overの迷惑コメント欄に埋もれてしまっていました・・・。
まさか一晩でそんなに来ているとは思わずに、ちゃんと探していませんでしたorz
何とか反映できました。 トラバありがとうございました!

Name:Shun | 2007年02月09日 23:28

1000件のトラバは一晩じゃありませんでした。
自分慌てすぎorz

Name:Shun | 2007年02月10日 09:13

正直、ハックでアップアップしているので
色々な方の意見を参考にしています。
自分も早くみなさんと議論ができるぐらい
ステップアップしたいです・・・。

Name:初心者 | 2008年07月04日 11:29

Contribution Form

Blog Search
Search
Recent Entry
Category
Monthly Archive