webkitでは(今のところ？)border-radiusのショートハンドが使えない事とか。

スキップメニュー：コンテンツへ｜ナビゲーションへ

もっと快適にインターネットを活用できるブラウザ達

webkitでは(今のところ？)border-radiusのショートハンドが使えない事とか。

2010年 4月 13日 |

CSS3, html/css |

Comments (3)

Firefoxだとこう書けるけどsafariやchromeではショートハンドが使えないので丸めたい角ごとに指定しないとダメみたい。

-moz-border-radius:左上 右上 右下 左下;

しかもmozとwebkitで指定が違う(面倒くさいなぁ)。

-moz-border-radius-topleft = -webkit-border-top-left-radius
-moz-border-radius-topright = -webkit-border-top-right-radius
-moz-border-radius-bottomleft = -webkit-border-bottom-left-radius
-moz-border-radius-bottomright = -webkit-border-bottom-right-radius

プレフィックスを外した時どちらが正式な記述なんだろうか？
[追記 / 20100903]
下記リンクを参考にするとどうやらwebkitの方が仕様に沿っているようですね。
CSS Backgrounds and Borders Module Level 3
[追記ここまで]

-moz-border-radius-topleft = -webkit-border-top-left-radius

-moz-border-radius-topright = -webkit-border-top-right-radius

-moz-border-radius-bottomleft = -webkit-border-bottom-left-radius

-moz-border-radius-bottomright = -webkit-border-bottom-right-radius

3件のコメント »

[...] 調べたら、詳しく書かれている記事がありました。乱雑モックアップさんの記事 [...]

ピンバック by CSS3を使ってレイアウト変更 | WEBのお勉強とその他趣味的な感じで — 2011年4月6日 @ 00:59
はじめまして、

「ショートハンド　safari」で検索してたどり着きました。

大変勉強になりました。
ありがとうございました。

まだまだ、勉強になりそうな記事が盛りだくさんですね。
またじっくり、読みに来ます。

コメント by matai — 2011年4月6日 @ 01:04
mataiさんはじめまして、コメントありがとうございます。

知らなくても全然問題ないけど
知ってるとちょっと役に立つかもしれない細かいネタばかりですが
お時間が空いた時に見てやってください。

しかしまだwebkitはショートハンド使えないんですねぇ、すっかり忘れてました。

コメント by まこと — 2011年4月6日 @ 15:00

この投稿へのコメントの RSS フィード。 TrackBack URL

コメントする

乱雑モックアップのフィード

乱雑モックアップらんざつ[乱雑] （名・形動）[文]ナリ入り乱れていること。乱れていて秩序がないこと。また、そのさま。