webkitとかmozとか何ぞ? – CSSベンダープレフィックス

昨年末からウェブ制作の勉強を再開して未だウラシマ状態の私です。

さて今回は、CSSの中でwebkitとかmozとか、昔は見なかったCSSの表記について。
現役バリバリの人は読む必要ないです。

具体的に使われてるところ

昔(約10年前)に比べて、CSSで出来ることが無茶苦茶増えた。
参考サイトからスタイルをコピーしようとしても、見慣れない表記が多くて、最初は都度調べてたので随分時間を食うことに…。

その中でも一際目立った意味不明な奴らが表題のwebkitとかmoz!

border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;

こんな感じで使われてる。
上の例は角丸ボーダーを表示するときのやつ。

最初はオマジナイ(プログラマ業界でよく分からないけど書かないといけないコードをこう言うよ)だと思って無視してたけど、
そろそろ意味を理解しないとってことでググってみた。

CSSベンダープレフィックス

「webkit」でググったら、「CSSベンダープレフィックス」とかいう言葉が出てきた。

CSS3で採用されるはずの機能を各ブラウザが先行して実装しており、要は各ブラウザの特化表記ってことらしい。

主なベンダープレフィックス
-moz- Firefox
-webkit- Chrome、Safari
-o- Opera
-ms- Internet Explorer

なるほど。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です