最新のブラウザはborder-radiusを実装

FirefoxがバージョンアップされてFirefox4になりましたが、他のブラウザも随時アップデートされていますね。
ホームページを製作しているとよく使うのが「角丸」です。

今まではInternetExplorerは使えなかったし、FirefoxとSafari、 Chromeは別々にCSSを書かないといけませんでした。
上部の左右を20pxの角丸にする場合はこのように書いていました。

-moz-はFirefox用、-webkit-はSafariとGoogle Chrome用です。
各位置の指定の仕方が違うのでかなり面倒くさかったのです。

でも、最新のブラウザ(4、9、)はborder-radiusが使えるようになったのでこのように書けば良くなりました。

数字は左上から時計回りです。左上、右上、右下、左下になります。

これでCSSを書くのが楽になりました。 個別に角丸を指定するのはこのように書きます。

各ブラウザでCSSの認識が統一されるのはウェブサイトを作るのにはとてもやりやすくなりました。
ただ、FirefoxとSafariは半強制的にアップデートされますが、IE9はXPでは使えないし、強制的にはアップデートされないし。
まだまだ、XPとIE6を使っている人が多いのでハッキングは必要ですね。

関連する投稿:

このエントリーをはてなブックマークに追加
はてなブックマーク - 最新のブラウザはborder-radiusを実装
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
LINEで送る
[`tweetmeme` not found]

コメントを残す

メールマガジン
サブコンテンツ