CSS3の新しい書き方教えてください。

質問

ネットで見ていたところ以下の記述を見つけました。
どうやらCSS3の記述らしいのです。

border: 1px solid #333;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;

border-top-left-radius: 3px;　という記述は何となく分かるのですが、その頭にある・・・。

-webkit-　という記述は何を意味するのでしょうか？？
-moz-　もそうですね・・・。

先頭の、border: 1px solid #333; に付随する記述だよ！みたいな感じでしょうか？

どなたかお分かりになる方いらっしゃいましたらアドバイスをお願いします。
また、何か参考になるサイトなどもご存知であれば、合わせてお教えいただけますと幸いです。

どうぞ、宜しくお願いします。

回答No.1

lilillllililili · ベストアンサー

CSS3に完全に対応しているブラウザは極僅かしかありません。
そんな中、各ブラウザは独自の仕様を実装しました（先行実装）。

-moz-が先頭にあるプロパティはMozilla/Firefox独自プロパティです。
-webkit-が先頭にあるものはSafari独自プロパティです。

これらはborderプロパティと関係するものではありません。
border-radiusは角を丸めるプロパティで、今回の例でしたら本来は次のように書きます。
　border-radius: 3px 3px 0px 0px;

こちらのサイトが参考になります。
> http://css-eblog.com/summary/css3-summary.html

お礼

有難う御座います。

アドバイスを元に調べていましたら、ベンダープレフィックスというキーワードに行き着きました。
要は、まだルールが確立されていない故に必要な定義・・・。との認識でよいのでしょうか？

回答No.3

Tacosan

その部分は「CSS3 の」ってわけでもないらしいよ.

参考URL：

http://www.w3.org/TR/CSS2/syndata.html#vendor-keywords

お礼

有難う御座います！
なるほど、CSS3固有と言うわけではないのですね。

回答No.2

kosukejlampnet

http://www.htmq.com/csskihon/603.shtml

お礼

有難う御座います！