Warning: count(): Parameter must be an array or an object that implements Countable in /home/kaibundou/kaibundou.com/public_html/wp-content/plugins/post-plugin-library/common_functions.php on line 174

Warning: count(): Parameter must be an array or an object that implements Countable in /home/kaibundou/kaibundou.com/public_html/wp-content/plugins/post-plugin-library/common_functions.php on line 174

Warning: count(): Parameter must be an array or an object that implements Countable in /home/kaibundou/kaibundou.com/public_html/wp-content/plugins/post-plugin-library/common_functions.php on line 174

Warning: count(): Parameter must be an array or an object that implements Countable in /home/kaibundou/kaibundou.com/public_html/wp-content/plugins/post-plugin-library/common_functions.php on line 174

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


Warning: count(): Parameter must be an array or an object that implements Countable in /home/kaibundou/kaibundou.com/public_html/wp-content/plugins/post-plugin-library/common_functions.php on line 174

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

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

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

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

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

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

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

関連する投稿:

    None Found

最初のコメントをしよう

必須

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください