読者です 読者をやめる 読者になる 読者になる

日常最適化の計画

今日より明日。生きる知恵を蓄えていくための、ただの雑記です。

CSSハックとは(「IE7, 8対応には黒魔術」)

技術・制作

【スポンサーリンク】

私の開発業務の経歴としてはこれまで、車とか飛行機のシステム開発ばかりだったのですが、急にここ半年程Web系の開発案件に携わっております。

 

図解 黒魔術 (F-Files No.040)

JavaScriptやらVBScriptやらCSSなど初めて触れることろで色々と困ることも多く、特に画面のデザイン(CSS)にはなかなか慣れず四苦八苦する今日この頃。ちまちまとしたCSSの調整作業がわずらわしく感じ匙を投げかける勢いです(笑

 

「旧ブラウザ対応の面倒さ」と「CSSハックの書き方」を知る

中でも専用端末のシステム等では考えたことも無い、クロスブラウザ問題(「特にIE、お前だ!」)には辟易させられました。

 

と、まぁ「LEVEL1、装備:こん棒のみ」の駆け出し戦士が魔王兄弟(IE7兄、8弟)と対峙するにあたり先人たちの知恵を借りるべく、グーグル先生をぽちぽちしていたところ

CSSハック」♪ヽ( ゚▽゚)ノ

 

というなんとも魅惑的な響きのワードが踊っていました。

いかにもスキルレベルが高そうな人がさらっと日常会話に混ぜ込んでき「ふぁっ!?(私)」となる感覚のやつの一種ではと。

調査過程で『なるほど~、CSSハックかぁ。こいつは魔王兄弟を一発逆転退治してくれる「必殺奥義」になるかもしれない。。。。「必殺奥義?」いや何か違う。「魔法??」いや「黒魔術」。絶対これだ!一番しっくりくる』

 

CSSハックとは

CSSハック(英:CSS Hack)は、Webサイト作成の際にWebブラウザ間(以下単に「ブラウザ」)で異なるCascading Style Sheets(CSS)の実装状況の違いやバグなどを吸収し、極力各ブラウザでの表示を同一にするためのテクニックの一つである。 CSSハック以外に「CSSフィルター」("CSS Filter")とも呼ばれるが、Internet Explorer(IE)の独自拡張CSSであるフィルタとの混同を避けるためか日本ではCSSハックの語が用いられることが多い。

出典: フリー百科事典『ウィキペディアWikipedia)』

 

要は各ブラウザ間のCSS記述内容の解釈の違い(バグによる差異も含む)をうまいこと利用、対処するブラウザ要のCSSハック手法を用いて定義をガチャガチャして画面表示上は同じに見せるように茶を濁すテクニックです。

例えば代表的なハックとしては以下の書き方があります。

.foo {
  color: red;     /* ハックなし */
  color: green\9; /* IE10以下 */
  *color: blue;   /* IE7以下 */
  _color: yellow; /* IE6 */
}

 IEのバージョンに応じた記述方法ですが、コメントに記載されているとおり、

1つ目は「ハック無し」通常の書き方で全バージョンで読める書き方となります。

2つ目「IE10以下 」プロパティ値"green"の後ろに"\9"が付いていますが、この特定文字をプロパティ値の後ろに付与することでIE10のみで、正常なプロパティ値として適用されます。

IE7以下、IE6についても「*」「_」を付与することでそれらのバージョンでしか適用されない記述となります。

 

黒魔術たる所以として、これらはバージョン特有のバグを利用しているものがあり、将来的に新たなバージョンに対する有効か否の予測が立たない場合があります。

何でもかんでも安易にハックを多様すると、今後リリースされるバージョンで表示させた時にガタガタになってしまう可能性も無くは無いということです。

 

やだなぁ~、怖いなぁ~。なるべく使いたくないなぁ~」とかいいつつ、検証、説明の上お客さんの了承が得られたらサクッと使ってしまうかも。(というか、いい加減サポート対象から外してくれたら安く上がるのに。。)

 

以上、黒魔術でした。

 

おしまい。

広告を非表示にする