The annex of 3S. Writing about my lovin' stuffs, like Kyoto, desgin, photo, aquarium, road bike, etc. Enjoy your stay!
Archive for the ‘CSS’ Category
金曜日, 2月 16th, 2007
ふと思ってIE Hackまとめをしてみました。ググれば色々あると思いますが、個人的備忘録として。。。
IE6〜以前用Hack
*html セレクタ/id名/class名 { }
IE7用Hack
*+html セレクタ/id名/class名 { }
*:first-child+html セレクタ/id名/class名 { }
IE 7を含むモダンブラウザのみ
html>body セレクタ/id名/class名 { }
IE 7以外のモダンブラウザ(FireFox, Safari, Operaなど)のみ
html>/**/body セレクタ/id名/class名 { }
IE全部まとめて
*+html セレクタ/id名/class名, *html セレクタ/id名/class名 { }
より詳しい説明はここを確認。
http://www.webdevout.net/css-hacks
この中の「in-CSS hacks」が参考になりますが、全部まとめて勉強になります。
【追記：2009:04:21】
非常にこのページにアクセスが多いのでなぜかと調べたらgoogleで「ie hack」と入れると上位に出てきてしまう状態でした。ですが内容が非常に貧弱な記事にこんなにアクセスして頂くのも申し訳ないので上記の内容については追記を、ここからは加筆になります。
基本、IE Hack自体を使わないように心がけているんですが、必要に応じて別CSSやjsをを特定のIEのバージョンに合わせて読み込ませる「コンディショナルコメント」（互換モード）を使用しています。主要な用途としては外部ファイルを読み込ませるケースが多いと思いますが、これはページ内に直接javascriptを記述したりする際に使うことももちろんできます。
別ファイルを用意しなければならないという煩わしさもあると思いますが、今後の事を考えるとhack自体どこまで使えるのか疑問なのでこちらを使用したほうがいいと思います。
コンディショナルコメントのすすめ
基本的には下記のコメントアウトの中にIE用のexpressionを記述してバージョンを指定するだけです。
<!–[if expression]> 記述したい内容はこちら。外部ファイルでもhtmlでもjs直書きでもオッケーです<![endif]–>
例えばIEのバージョンにかかわらずIEのみに特定のファイルを読み込ませたい場合は下記の<!–[if IE ]>〜<![endif]–> を使用します。
【例】
<!--[if IE ]>
<link href="ie-only.css" rel="stylesheet" type="text/css">
<script src="ie-only.js" type="text/javascript"></script>
<p>こんな風にIEのみで表示できる文章もいれる事ができます。</p>
<![endif]-->
ここでIEの特定のバージョンに特定のファイルを読み込ませたい場合は<!–[if IE ]> の部分を下記の様な記述をする事になります。
IE7の場合・・・<!–[if IE 7]>
IE6の場合・・・<!–[if IE 6]>
IE5.5の場合・・・<!–[if IE 5.5]>
IE5の場合・・・<!–[if IE 5]>
読み込ませる箇所を振り分けたい場合は下記の様に2重で記述する必要があります。
<!--[if lte IE 6]>
<link href="ie5to6.css" rel="stylesheet" type="text/css">
<script src="ie5to6.js" type="text/javascript"></script>
<p>ここではIE6を含む、それ以下のIEバージョンの場合に文章が表示されます。</p>
<![endif]-->
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css">
<script src="ie7.js" type="text/javascript"></script>
<p>ここではIE7のみの場合に文章が表示されます。</p>
<![endif]-->
それでは上記のよく分からん省略英語や記号の簡単な説明おば。
! ・・・〜ではない場合。例えば<!–[if !IE]>の場合はIE以外のブラウザの意味になります。
lt ・・・less thanの意味。〜未満。指定したバージョンを含まない。
lte ・・・less than equalの意味。指定したバージョンを含む。
gt ・・・greater thanの意味。指定したバージョンを含まない。
gte ・・・greater than equalの意味。指定したバージョンを含む。
& ・・・andの意味になります。
| ・・・orの意味になります。
expressionについての例は下記の様になります。
<!–[if !IE]> 〜 <![endif]–>・・・IE以外のブラウザの場合
<!–[if !(IE 7)]> 〜 <![endif]–>・・・IE7以外のブラウザの場合
<!–[if gte IE 7]> 〜 <![endif]–>・・・IE7か、それ以降のバージョンのIEの場合
<!–[if (IE 5)]> 〜 <![endif]–>・・・IE5のすべてのパージョンを使用している場合
<!–[if (gte IE 5.5)&(lt IE 7)]> 〜 <![endif]–>・・・IE5.5かIE6を使用している場合
<!–[if lt IE 5.5]> 〜 <![endif]–>・・・IE5.5以下の場合。この場合はIE5に適応されます。5.5は含まれません。
<!–[if (IE 6)|(IE 7)]> 〜 <![endif]–>・・・IE6またはIE7の場合。あんまり使わなそう。
MS本家（英語）の説明ページはこちらになりますので、さらに詳しい内容を確認したい方はこちらへ。
Internet Explorer Developer Center
※<!–[if IE 5.5]> … <![endif]–>ではIE5.5で通らない可能性があります。5.5000などとピリオド以下4桁すべて書くと通る、またはif gte IE 5.5では通るらしい。なぜゆえ・・・？
詳しい実験ページ結果ページを作成された方がいらっしゃるのでこちらで確認してみてください。
ソース
P.S:
つーかとうとうIE8も正式リリースされてIE自体群雄割拠もどーなん？と思い続けることここ数年。
MSの対応もいまいちだし、現場では必要に応じてハック使ったり、コンディショナルコメントを使ったり。
ハックを使わないで解決できるような記述がいつも出来ればいいんですが、そういう場合ばかりでもないしね。
簡単に上にまとめてみましたが、この記事がちょっとでも皆さんのお役に立てば幸いです。
Tags: CSS, tech, Web
Posted in CSS, Web | No Comments »
月曜日, 1月 15th, 2007
FireFoxでは半角英数字で長文を書くと表示が改行されないバグがある。
問題の解消は基本的にCSSではできない。ブラウザ自体のバグであり、
Firefoxソフトそのものをハックしないといけないのでこちら側での
対処はできないと思います。最終手段としてテーブル組にするか、CSSでoverflowを使用して
はみ出る部分を非表示する事で、体裁を整える方法を記載しておきます。
普通にoverflowを使用すると今度はMac IEでこのoverflowを使用した
ブロックが丸ごと消えるバグがあるので、下記の方法で対処。?
Holly Hack
Mac IE 5のみにスタイルを除外
/* Not for Mac IE 5.x ?*/
overflow:hidden;
/* For other browser */
別にMac IE 5のみにスタイルを適用方法もある。
/* for Mac IE 5.x Only ?*//*/
overflow:hidden;
/* For other browser */
word-break:break-all;、word-break:keep-all;
はIEにしか働かないので、FireFoxやネスケでは要注意。
Posted in CSS | No Comments »
月曜日, 1月 15th, 2007
Windows IE 4〜6、Mac IE 4〜5のみに適用する場合に使用。
適用したいセレクタの前に” * html ” を付ける。?
*html #container{
width: 540px;
margin:0 0 0 195px;
padding:0;
}
など
Posted in CSS | No Comments »
unit3s.jp
覚悟Ver.1完了 