css Archive

IEのバージョン別に読み込むCSSを変える
全IE用

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

IEには対応させない

<!--[if !IE]>
<link href="style.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE7のみ読み込み

<!--[if IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE6以下のみ読み込み

<!--[if lt IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

※lt：Less-Than。つまり、IE7は含まないのでIE6以下。

もしくは

<!--[if lte IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

※lte：Less-Than or Equal。つまり、IE6を含むので、IE6以下。

IE7以下のバージョンに対応

<!--[if lt IE 8]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

もしくは

<!--[if lte IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE7以上のバージョンに対応

<!--[if gt IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

※gt：Greater-Than。つまり、IE6を含まないのでIE7以上。

もしくは

<!--[if gte IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

gte：Greater-Than or Equal。つまり、IE7を含むのでIE7以上。

そして、こんな記事を発見。

【coliss】[CSS]条件付きコメントを使用した際にレンダリングを早くするテクニック下記CSSハックメモ

下記のように、CSSファイルを指定した箇所より前に空の条件付きコメント（<!–[if IE]><![endif]–> ）を挿入します。

<!--[if IE]><![endif]-->
<link type="text/css" rel="stylesheet" href="screen.css" media="screen, projection">
<link type="text/css" rel="stylesheet" href="print.css" media="print">

<!--[if IE]>
<link type="text/css" rel="stylesheet" href="ie.css" media="screen, projection">
<![endif]-->

ほぉー！！すばらしいですねぇ。

下記CSSハックメモ

IE8のみ適用

html>/**/body selector {
 margin-top/***/: 2px\9;
 padding: 5px;
}

2つめのプロパティからは普通に指定してOK。

IE7のみ適用

*:first-child+html selector {
 margin: 0;
}

IE6のみ適用

_selector {
 margin: 0;
}

最後に、今回、調整していたときに、IE8のみでイメージが3px下にずれて表示されてしまうのでネガティブマージンを指定（margin-top: -3px;）したのだが、うまくいかない…
うー、ネガティブマージンだめなの？と思うも、その他のプロパティだとちゃんと効く…
結論は、今回jqueryのプラグインを使用してスライドショーを実現していたのだが、そのpositionが絡んでいるっぽい。いろいろ試してはみたがうまくいかなかったのでとりあえず、!importantをつけてみたら、うまくいったのでこれでよしとした。

html>/**/body selector {
 top/***/: -3px\9 !important;
}

ふぅー…

今日ははまった。

ほんとはまった。

何度印刷プレビューしてもコンテンツの中身が途中で消えてしまう。

なぜだー！ちゃんと印刷用にfloat:noneしてあるのにーーー。

ともがきあがいて分かったこと。

さらに上のボックスにfloatが設定されていた…

CSSでfloatを多用している際は要注意！

@import “hoge.css”;

とか

@import url(“hoge.css“);

などいろいろ記述方法があるようだが、違いは？と今さらながら勉強…

@import url(“hoge.css“);
の場合、
除 NC4 & WinIE3
Netscape6, MacIE3以降, WinIE4以降は対応している。
｢”｣で括るとMacIE4.5は認識しない
｢’｣で括るとMacIEは認識しない

 @import “hoge.css”;
の場合、
除 IE3 & IE4.0 & NC4
Netscape6, MacIE4.5以降, WinIE5以降は対応している。
｢’｣で括るとMacIEは認識しない

 さらに…

@import url(“hoge.css”) all;
@import url(“hoge.css”) screen, print;
の場合、
除 IE3 & IE4 & NC4 & WinIE5/6
Netscape6, MacIE5は対応している。引用符(“)を用いなければMacIE4.5でも認識し、アポストロフィー(‘)で括るとIEは認識しなくなる。

@import “hoge.css” all;
@import ‘hoge.css’ screen, print;
の場合、
除 IE3 & IE4 & IE5/6 & NC4
Netscape6は対応している。

ということは、
@import url(“hoge.css”) print;
@import ‘hoge.css’ print;
だとIE6は非対応？
検証したいが、IE６はMultipleIEsを使っていて、印刷プレビューとかバグってて検証できない。

今は下記のように印刷用を記述しているのだが、cssをまとめてインポートする時の記述方法を知りたい。
<link href=”hogeprint.css” rel=”stylesheet” type=”text/css” media=”print” />

ちなみに、IEでは1ファイルに@importで読み込めるファイルは31まで！
そもそもそんなに読み込むことはないとは思うが…。

【参考】
http://east.portland.ne.jp/~sigekazu/css/boxm.htm

IE8とそれ以下

body {
 color: red; /* all browsers, of course */ 
 color : green\9; /* IE8 and below */ 
}

IE7とそれ以下

body {
 color: red; /* all browsers, of course */ 
 color : green\9; /* IE8 and below */ 
 *color : yellow; /* IE7 and below */ 
}

IE6

body {
 color: red; /* all browsers, of course */ 
 color : green\9; /* IE8 and below */ 
 *color : yellow; /* IE7 and below */ 
 _color : orange; /* IE6 */ 
}

条件付きコメント

<!--[if lte IE 7]> 
Make IE7 happy.  
<![endif]-->

【参考】
Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters

print用CSSを調整しよう。

印刷時にリンクのURLを表示
※IEは非対応

a:after {
	content: " ("attr(href)") ";
	font-size: 10pt;
}