2013.02.13
css3 linear-gradientの記述を減らせんかのぅ(減らせませんでした)
さてさて…考えてみますよ。
- webkit組 Safari、Choromeは対応なし
- Firefoxは16.0から対応
- Opera は12.1.0から対応。
- IEは 6,7,8,9は問題外、もともと別対応必須。
- 未知数なのがIE10だが、モダンブラウザにはちがいな…てか、どういう風の吹き回しでしょうか!。
問題児は、webkitエンジンを使用しているSafari。(Choromeも。)
時代は変わった物だわさ。
何が?かと言うと、タイトルのlinear-gradientについてです。
自サイトなりの対応と古いブラウザの対応ラインを改めて考えてみました。
もちろん広い層に見て貰うためのサイトでは、もっと細かくブラウザごとの対策をしなくてはいけないかと思います。
1 2 3 4 5 6 7 8 9 |
#footer_wrap { background: -webkit-gradient(linear, left top, left bottom, from(rgba(102,51,0,0)), color-stop(0.169, rgba(102,51,0,0)), color-stop(0.169, rgba(102,51,0,100)), to(rgba(102,51,0,100))); /* Safari,Chrome */ background: -moz-linear-gradient(top, rgba(102,51,0,0), rgba(102,51,0,0) 16.9%, rgba(102,51,0,100) 16.9%, rgba(102,51,0,100)); /* Firefox */ background: linear-gradient(to bottom, rgba(102,51,0,0), rgba(102,51,0,0) 16.9%, rgba(102,51,0,100) 16.9%, rgba(102,51,0,100));/* firefox16 ie10 */ } |
今まで↑のようにベンダープレフィックスなる接頭辞と独自書式でcss3のグラデーションに対応していた訳ですが、ここに来て
IE10、Opera12.10〜、Firefox16〜がプレフィックス無しと新しい書式に対応しました。
新しい書式ではグラデーションの方向をto bottomとtoを付け終点へ指定するようになってます。
角度については勉強不足なので割愛。
webkit組用(webkit一辺倒のようなMobileブラウザ組含む)のプレフィックスを着けた※webkitルールを前に、対応ブラウザ用プレフィックス無しto付き新書式を後ろに、2つのcssを書けばいいかなぁー(後の記述ほど有効:Opera対応&7行目-moz-を削除)と思っているわけです。
※Safariも5.1〜は-moz-linear-gradientと同じ書式に対応しているのですが、LeopardのSafari最終版5.0.6が対応していないため、-webkit-gradientという独自書式のまま使用しております。この時点であんまり減らない。
Opera使いはもともとコアなファン(偏見)で最新版使うだろうし問題はないような。
Firefoxはどうすっかなー
Firefox16のOS対応状況は
WindowsはXP 2004年9月発売のsp2まで。
Macは2007年10月発売の 10.5 Leopard まで。
Firefoxは怒涛のバージョンアップ告知ありますし…
WinでFirefoxの人はコアファン(またもや偏見)だろうし、
Appleは足切りが早いのでMac使いは戦々恐々としてOSを確保するはめに陥ってますし、Leopard以外選択のない人はFirefox16が最後な訳で早々に対応していると思われ…
うん、-mozはいらないかな。いらないよね。いらないと思うなぁ。
えっ!PowerPCプロセッサ搭載MacではFirefox 3.6.28最終ですか、そうですか…
では-moz-を付けざるを得ない。
自サイトのブラウザ対応ラインを
MacはLeopardで使えるブラウザ基準(Firefox16、Safari5.0.6)をメインで設けるが、最低限、崩したくないところだけPowerPCプロセッサ搭載MacとTigerの最終版Firefox3.6用にプレフィックス有り保留。
Safari4からは-webkit-gradientが効くので現状保留。
IEはコンディショナルコメントが使える9までは多少の崩れは気にしない最低限の対応。
ぜんぜん見直せてないですしw、再確認ということになりました。
うぐぐな考察になりましたが、現在のところ古いブラウザを加味しない理想はこうでしょうかねぇ↓
1 2 3 4 |
#footer_wrap { background: -webkit-linear-gradient(top, rgba(102,51,0,0), rgba(102,51,0,0) 16.9%, rgba(102,51,0,100) 16.9%, rgba(102,51,0,100)); background: linear-gradient(to bottom, rgba(102,51,0,0), rgba(102,51,0,0) 16.9%, rgba(102,51,0,100) 16.9%, rgba(102,51,0,100)); } |
- 参考サイト:
- クロスブラウザな css3 linear-gradient が面倒になりそうな件について – ほむらちゃほむほむ
- 結局CSS3のlinear-gradientはどう書いたらいいのかまとめてみた (最新仕様・全ブラウザ対応版) – Studencheskie Programmisty
スポンサーリンク
[…] css3 linear-gradientの記述を減らせんかのぅ(減らせませんでした) | ちゅんもす置き場 […]