2010年10月05日
8区
1区2区四苦HACK。
ちょりっす。☆サンゴーなんだよ。
久しぶり夫のブログは、ちょっと備忘録。
CSSハックについて、まとめておこうかと。
大丈夫、マニアックな内容になるって事は知ってるから。
んでは。
(憎き)Internet Explorer
IE6以下
一番上のハックは、プロパティ(color)の前にアンダースコア(_)を付ける。
その次のハックは、セレクタ(#hoge)の前に「* html」を付ける。
半角スペースに気をつけて。
IE7
ややこすぃ。
上のハックは、セレクタの前に「*:first-child+html」を、
次のハックは「*+html」を付ける。
今更だけど、セレクタ前に付けるハック文とセレクタの間には
半角スペースが入っておりまうす。
IE6、IE7
こいつは簡単。
プロパティの前に「/」を付けるだけ。
このスラッシュとプロパティの間にはスペース要らず。
IE8
僕の場合、IE8をハックすることって滅多に無いんだけど。
今度は値(#FFF)の後ろに、「\9」を付ける。
値とセミコロンの間に書きましょうね☆
IE7、IE8
ややっこしぃ…
プロパティと値の間に「/*\**/」を書き、
IE8みたく値の後ろに「\9」。
…使わないよ…
IE6以外
プロパティとコロンの間に「/**/」
IE6、IE7以外
セレクタの前に、「html>/**/body」。
IE6～IE8以外
IE6～IE8ってことは、IE9を除く、現行動いている
IEにはってことなのかね。わお。
セレクタの前に、「:root *>」
rootと*の間に半角スペース。
(みんな良い子だから余りハックしない)モダンブラウザ
Firefox
(;´皿`)…
使ったことないからアレだけど、多分、セレクタの後ろのやつ。
一端カンマで区切るんだろうね。
Firefox 3.0以上
ぉー…
今度は「x:default」が追加されました。
…セレクタだけでこんなに長くなるぐらいなら、
ハックに頼らない組み方するわな…
Safari2～3
うわぁん、泣きそうだよー。
誰がこんなハック見つけたんだろう。
Safari2～3.1
ゼロコンマイチの違いなのに…
Safari2～3.1とOpera 9.25
縦棒が入ってきましたね。何でもありか？ｗ
Safari3以上とChrome
…ナニコレ…
cssをcssで囲んでるイメージ…
Sarafi3以上とChromeとOpera9以上とFirefox3.5以上
モダンブラウザよりも、IE6とかあそこらへんのがバグ多いと思うから、
ぶっちゃけモダンブラウザ用のハックってあまり使わない気がする。
でも、ま、勉強勉強。いつか使うかもだし。
Opera9.25以上
セミコロンが頭についてるｗｗｗ
二つ目のハックは、どうやらSafari2辺りにも有効？(未確認)
Opera８と９以外
何？class[hypen-ated]って。しらべよ。
あー…
結論的に言えば、IE6と7はこの世からいなくなれば良いと。
よく使うハックって、この2つだったりする気がする。
少なくとも僕はそう。
…ハックしなきゃならないような組み方だからなんだろうけど…
つかさ、なんでヴァージョン毎にcssのレンダリングが違うわけIEって。
それと。
難しい話かもしれないけど、全ブラウザで同じレンダリングして欲しい。
組み手泣かせだし、そんなんだからcssハックとかあるわけで。
ま、楽しいからいいけど。
あ、上記のハック、試したけど効かないよーってことがあったら、
ごめんちゃい。
僕も外様から(勝手に)頂いたブツなので☆キャハッ☆
ちゃお☆
ちょりっす。☆サンゴーなんだよ。
久しぶり夫のブログは、ちょっと備忘録。
CSSハックについて、まとめておこうかと。
大丈夫、マニアックな内容になるって事は知ってるから。
んでは。
(憎き)Internet Explorer
IE6以下
#hoge { _color:#FFF; }
* html #hoge { color:#FFF; }
一番上のハックは、プロパティ(color)の前にアンダースコア(_)を付ける。
その次のハックは、セレクタ(#hoge)の前に「* html」を付ける。
半角スペースに気をつけて。
IE7
*:first-child+html #hoge { color:#FFF; }
*+html #hoge { color:#FFF; }
ややこすぃ。
上のハックは、セレクタの前に「*:first-child+html」を、
次のハックは「*+html」を付ける。
今更だけど、セレクタ前に付けるハック文とセレクタの間には
半角スペースが入っておりまうす。
IE6、IE7
#hoge { /color:#FFF; }
こいつは簡単。
プロパティの前に「/」を付けるだけ。
このスラッシュとプロパティの間にはスペース要らず。
IE8
#hoge { color:#FFF\9; }
僕の場合、IE8をハックすることって滅多に無いんだけど。
今度は値(#FFF)の後ろに、「\9」を付ける。
値とセミコロンの間に書きましょうね☆
IE7、IE8
#hoge { color/*\**/:#FFF\9; }
ややっこしぃ…
プロパティと値の間に「/*\**/」を書き、
IE8みたく値の後ろに「\9」。
…使わないよ…
IE6以外
#hoge { color/**/:#FFF; }
プロパティとコロンの間に「/**/」
IE6、IE7以外
html>/**/body #hoge { color:#FFF; }
セレクタの前に、「html>/**/body」。
IE6～IE8以外
:root *> #hoge { color:#FFF; }
IE6～IE8ってことは、IE9を除く、現行動いている
IEにはってことなのかね。わお。
セレクタの前に、「:root *>」
rootと*の間に半角スペース。
(みんな良い子だから余りハックしない)モダンブラウザ
Firefox
#hoge, x:-moz-any-link { color:#FFF; }
(;´皿`)…
使ったことないからアレだけど、多分、セレクタの後ろのやつ。
一端カンマで区切るんだろうね。
Firefox 3.0以上
#hoge, x:-moz-any-link, x:default { color:#FFF; }
ぉー…
今度は「x:default」が追加されました。
…セレクタだけでこんなに長くなるぐらいなら、
ハックに頼らない組み方するわな…
Safari2～3
html[xmlns*=""] body:last-child #hoge { color:#FFF; }
うわぁん、泣きそうだよー。
誰がこんなハック見つけたんだろう。
Safari2～3.1
html[xmlns*=""]:root #hoge { color:#FFF; }
ゼロコンマイチの違いなのに…
Safari2～3.1とOpera 9.25
*|html[xmlns*=""] #hoge { color:#FFF; }
縦棒が入ってきましたね。何でもありか？ｗ
Safari3以上とChrome
@media screen and (-webkit-min-device-pixel-ratio:0) { #hoge { color:#FFF; } }
…ナニコレ…
cssをcssで囲んでるイメージ…
Sarafi3以上とChromeとOpera9以上とFirefox3.5以上
body:nth-of-type(1) #hoge { color:#FFF; }
body:first-of-type #hoge { color:#FFF; }
モダンブラウザよりも、IE6とかあそこらへんのがバグ多いと思うから、
ぶっちゃけモダンブラウザ用のハックってあまり使わない気がする。
でも、ま、勉強勉強。いつか使うかもだし。
Opera9.25以上
;;body #hoge { color:#FFF; }
html:\66irst-child #hoge { color:#FFF; }
セミコロンが頭についてるｗｗｗ
二つ目のハックは、どうやらSafari2辺りにも有効？(未確認)
Opera８と９以外
body[class|="hypen-ated"] #hoge { color:#FFF; }
何？class[hypen-ated]って。しらべよ。
あー…
結論的に言えば、IE6と7はこの世からいなくなれば良いと。
よく使うハックって、この2つだったりする気がする。
少なくとも僕はそう。
…ハックしなきゃならないような組み方だからなんだろうけど…
つかさ、なんでヴァージョン毎にcssのレンダリングが違うわけIEって。
それと。
難しい話かもしれないけど、全ブラウザで同じレンダリングして欲しい。
組み手泣かせだし、そんなんだからcssハックとかあるわけで。
ま、楽しいからいいけど。
あ、上記のハック、試したけど効かないよーってことがあったら、
ごめんちゃい。
僕も外様から(勝手に)頂いたブツなので☆キャハッ☆
ちゃお☆
Posted by CE CreativeSection at 13:30│Comments(0)
│備忘録
