[CSS]主要ブラウザの特定ブラウザのみに有効なCSSハック集
Post on:2010年1月27日
sponsors
Internet Explorer、Firefox、Safari、Chrome、Operaなど主要ブラウザの中の特定ブラウザのみに有効なCSSハックをbradKELLETTから紹介します。
Documenting the Hacks: CSS Browser Targeting
CSSハックは使用しないに越したことはありませんが、必要がある場合には最小限簡潔に記述しておくようにします。
各ブラウザの新しいバージョンがリリースされた際、これらのハックが無意味なものになることも念頭においてください。
Internet Explorer 6
IE6のみに適用します。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> #selector { _property: value; } </textarea> |
Internet Explorer 7
IE7以下用を記述し、更にIE6用を上書きします。
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="css" cols="60" rows="5"> /* Target IE7 and below */ #selector { *property: value; } /* Then overwrite for targeting IE6 specifically */ #selector { _property: value; } </textarea> |
Firefox 2
Fx2のみに適用します。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> #selector, x:-moz-any-link { property: value; } </textarea> |
Firefox 3
Fx2用を記述し、更にFx3用を上書きします。
|
1 2 3 4 5 6 7 8 9 10 11 |
<textarea name="code" class="css" cols="60" rows="5"> /* Target Firefox 2 */ #selector, x:-moz-any-link { property: value; } /* Then overwrite for Firefox 3 specifically */ #selector, x:-moz-any-link, x:default { property: value; } </textarea> |
Safari 3.0+
Safari3.1用ですが、CSS3を利用しているためFx3.5もサポートするでしょう。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> body:first-of-type #selector { property:value; } </textarea> |
Safari 3.1 and Google Chrome
Safari3.1とChriomeに適用します。ただし、これもFx3.5がサポートするでしょう。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> body:nth-of-type(1) #selector { property: value; } </textarea> |
Opera 9
Operaのみに適用するものは少し複雑になります。
OperaとWebkitブラウザ（SafariとChrome）用を記述し、WebkitブラウザとFx3.5用を上書きします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<textarea name="code" class="css" cols="60" rows="5"> /* Declare for Opera and Webkit */ @media screen and (-webkit-min-device-pixel-ratio:0){ #selector { property: value; } } /* Revert for Safari (and other Webkit browsers) and Firefox 3.5 */ body:first-of-type #selector { property:value; } </textarea> |
sponsors
