IFRAME 内に実装したツールですが、どうせなら CSS3 を使って見栄えを簡単に良くしようと思って設定したのですが、検証できるブラウザの見栄えをとりあえず全部チェックしてみました。 角丸 に対しては、ブラウザ依存では無く border-radius: 10px; とだけ指定していますが、一応どのブラウザでも認識しています。ただ、Opera は 入力コントロールは対象では無いようです。Opera Next でも同じです。 当然ですが、IE8 は適用されません。グラデーションは IE4 の時からあるフィルタの IE8 用の記法を使っています。IE9 もその記法が適用されていますが、IE10 は他のブラウザと同様の記法ができるはずです。 ※ グラデーションは、ブラウザ依存の記法でないと適用されませんでした。 ※ テキストエリアには、resize:none; を指定しています ※ IE のフィルタの色指定は、6ケタで書かないと正しく色が設定されません ※ IE のテキストエリアのスクロールバーの非表示は overflow: auto; Google Chrome 19.0.1084.46 mFirefox 12.0
IE9
Safari(Windows) 5.1.5
Opera 11.64
IE8
iPhone
localStorage は、iPhone でも動作しています。
input,textarea { border-radius: 6px; } .btn { background: -moz-linear-gradient(top, #aaa, #eee); background: -webkit-linear-gradient(top, #aaa, #eee); background: -o-linear-gradient(top, #aaa, #eee); background: -ms-linear-gradient:(top, #aaa, #eee ); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#aaaaaa, endColorstr=#eeeeee)"; }
関連する記事 CSS3 と HTML5 で実装具合の表示テスト CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 ) 参考ページ CSS3 Please! The Cross-Browser CSS3 Rule Generator
|
【CSS3の最新記事】
- CSS/jQuery : 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する
- CSS の box-shadow を jQuery を使ってスライダーでどうなるか確認して定義文字列を取得できるようにしました
- CSS アニメーションによるハンバーガーアイコンの作成方法と CSS プロパティの意味
- CSS だけで回る、実行中アイコン ( 但し IE9 は不可 ) の指定されたCSSの意味の解説
- 『3D Bouncing Ball with CSS3』のデータを使って光沢ボタンを作成する
- フリーフォントを使った背景透過PNGとCSSを使って、グラデーションな影付き吹き出しやボタンを作る。
- Google ストリートビューを表示している class="gm-style"
- linear-gradient のみで、ほぼ大丈夫なようです(IEは10限定、Windows Safariはアウト)
- 現時点の IE9、IE10、Chrome、Firefox、Opera、Safari でグラデーションの CSS 記述
- CSS3 : box-shadow の影分身の解説
- CSS で画像が立ってるような影を付けて、画像の角は丸くしておく
- IE 兼用背景 Fade transition の実装
- CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )
- CSS3 と HTML5 で実装具合の表示テスト
- CSS3 の borderRadius で、四角から円へのモーフィング
- CSS3 : 絶対位置指定(absolute)を使用して簡単にアニメーション。しかも、適用するのは、JavaScript