CSS

2010年5月2日2010年5月2日

CSSハックとコンディショナルコメント

ブラウザ別CSSハック

使わないに越したことはないのですが、使おうとする度に調べることが多いのでブラウザ別のCSSハック（IE6、IE7、IE8用）を覚書。世の中のすべてのブラウザがHTML5＆CSS3対応になればいいのにと夢のような事を。。。

FirefoxやSafari、Chromeはあまり必要性を感じないので、IE向けのハックで必要な物を簡潔に。たくさんありますけど、それぞれ個別に適用出来るハックが1つあればほぼ問題ないのでは？と思います。
すべてセレクタは#sample、プロパティはwidth:100%;としています。

【IE6以下に適用】
プロパティの前に”_”を付けるアンダースコアハック（invalid）
セレクタの前に”*html”を付けるスターハック（valid）

#sample{
	_width:100%;
}/*アンダースコアハック */

*html #sample{
	width:100%;
}/* スターハック */

【IE7のみ適用】
プロパティの前に”*:first-child+html”を付ける（valid）
プロパティの前に”*+html”を付ける（valid）

*:first-child+html #sample{
	width:100%;
}

*+html #sample{
	width:100%;
}

【IE8のみ適用】
未検証。要確認。なんだかかなり気持ち悪い感じ（invalid）

html>/**/body #sample{
	width /*\**/:100%\9;
}

コンディショナルコメントで振り分ける

IEには条件分岐で特定のバージョンだけにスタイルシートを適用する方法があります。
あまり使ってないのですが、どこかで線引きをしてブラウザを切り捨てる事になった時に、こっちの方がさっぱりして気持ちいいかなと思います。head内で読み込みます（ファイル名とパスは適宜変更で）

【IEすべてに適用】

<!--&#91;if IE&#93;>
<link rel="stylesheet" href="ie.css" type="text/css" />
<!&#91;endif&#93;-->

【IE以外に適用】

<!--&#91;if !IE&#93;>
<link rel="stylesheet" href="others.css" type="text/css" />
<!&#91;endif&#93;-->

【IE7のみ適用】

<!--&#91;if IE 7 &#93;>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<!&#91;endif&#93;-->

【IE6以下に適用】

<!--&#91;if lte IE 6 &#93;>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<!&#91;endif&#93;-->

”lte”の部分はcomparisonと言われる適用範囲を示す値で、lt、lte、gt、gteが指定できます。左から順に未満、以下、超、以上です。

指定した値を含まずそれ以上を表すのって「超」って言うんですね。1つ賢くなった。lteはless than equalらしいのですが、gは何の略だろうか？～より多いだとmore thanな気がするんだけど。。。ちなみにGoogle翻訳でless thanを通すと以下って出るけど、これ間違ってないか？

他にもIE7.js、IE8.js、IE9.jsを使うってのも1つの手ですね。

おまけでclearfix

floatした子要素を内包する親要素の背景が伸びない時は、overflow:hidden;ばかり使ってたのですが、印刷時に問題が出るようなので、印刷用のCSSでautoに戻すか、clearfixを使ったほうがいいかも。
clearfixの決定版を作るを参考に少し追加しました。ピリオドや空白よりいいかも。

.clearfix:after {
	content:url(pixel.gif);
	display:block;
	clear:both;
	height:0;
}
*html .clearfix{
	zoom:1;
}
*:first-child+html .clearfix{
	zoom:1;
}

現場のプロから学ぶXHTML+CSS

posted with amazlet at 10.05.02

益子貴寛堀内敬子小林信次千貫りこ伊藤学山田あかね西畑一馬
毎日コミュニケーションズ
売り上げランキング: 2487

おすすめ度の平均:

XHTML+CSSのバイブル的存在。
理解しやすい!
広く深く　まとまりの無い教科書
分かりやすくて実践的
リファレンスとしては使えません

Amazon.co.jp で詳細を見る

2010年4月11日

パフォーマンス改善

不要なプラグインを削除して、ソースを見直し、結構表示速度が上がった。

と思う。

面倒なところは Head Cleaner がやってくれたんだけど。。。感謝。

2009年7月25日2009年7月25日

こんなIE6対策はいかが？Universal IE6 CSS

IE6のためにCSSを書いたり、モダンブラウザ並みに拡張するスクリプトを読ませたり、といろいろ試行錯誤すると思うのですが、そろそろこういうのもありかなって思いますね。

Universal Internet Explorer 6 CSS（Firefox）

上の画像のサイトはIE6で見ると下の画像のような見た目になります。単にCSSが効いてない様な印象ですが、読みやすいように基本的なスタイルの指定だけしてあります。

Universal Internet Explorer 6 CSS（IE6）

先日、Youtubeも今後はIE6をサポートしないと発表したし、Windows7の発売日も迫ってきているので、サイトの内容によってはこういうやり方も選択肢の1つかもしれませんね。

Youtube IE6のサポート終了案内

インターネットをより楽しんでいただくためには、最新のブラウザにアップグレードしてください。 YouTube での Internet Explorer6 のサポートはまもなく終了します。今すぐアップグレードしてください。

このCSSはGoogle Codeに置いてあります。

Universal Internet Explorer 6 CSS
Google Code – universal-ie6-css

2009年6月15日2010年12月29日

IE6で透過PNGを利用してz-indexで画像を重ねる

ie6png

やろうと思ったことがz-indexを利用しないとうまく出来ないなーと思いつつ、PNG画像を作ってサンプル書いてみたけど、まぁ～当然のように逝ってほしいIE6が立ちはだかる。はぁ～めんどい。

Googleが配布しているie7.jsなんかを使えば透過PNG以外にもイマドキな感じに改造してくれるけど、あまりいい印象が無いので（やたらと重かった？）、他を探してみたら簡単で使いやすそうなDD_belatedPNG.jsを見つけました。

まず配布サイトからjs（今日現在0.0.7a）を拾ってきてhead部分でIE6用に読み込みます。

<!--&#91;if lte IE 6&#93;>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
  DD_belatedPNG.fix('.png_img');
</script>
<!&#91;endif&#93;-->

4行目のfix()内で要素名やid、classを指定します（ココではクラス名をpng_imgとしています）あとは該当のimgにこのクラスを指定するだけ。楽チン！

サンプルはこちら　http://vayu.asia/sample/ie6png/

元画像にはクラス指定をしてないのでIE6では周囲がグレーになっていると思います。
ソースは以下のようになってます。

html

<div id="original">元画像（クラス指定なし）<br />
<a href=""><img src="img/sample.png" alt="" /></a></div>
<br />
<div id="block1">ブロック1</div>
<div id="block2">ブロック2</div>
<div id="block3">ブロック3
<a href=""><img class="png_img" src="img/sample.png" alt="" /></a>
</div>

#original{
	background:#FFDFFB;
	width:500px;
	height:300px;
}
#original img{
	border:none;
}
#block1{
	background:#0C0;
	width:500px;
	height:300px;
}
#block2{
	background:#FFF;
	width:500px;
	height:30px;
}
#block3{
	background:#999;
	width:500px;
	height:300px;
	position:relative;
	z-index:1;
}
#block3 img{
	position:absolute;
	z-index:10;
	top:-120px;
	left:120px;
	border:none;
}

このブログではPNG対策はしていないので、一番上の画像はグレーっぽいはずです。

2009年4月14日2009年4月14日