カテゴリー

キーワード

 
> 【CSS3】 ベンダープレフィッ...

【CSS3】 ベンダープレフィックスとは? (プロパティによっては不要)


2015 年 4 月 2 日 投稿    view: 27432
タグ:
このエントリーをはてなブックマークに追加

ベンダープレフィックス

こんにちは、WEBマーケティング部の杉尾です。
今回はちょっと予定を変更して、CSSのベンダープレフィックスを紹介します。



ベンダープレフィックスとは?

ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の拡張機能を実装するとき、または草案段階の仕様を先行実装する場合に付ける識別子のことです。
プロパティにつけてそれが拡張機能であることを示します。


プロパティとは属性のことです。CSSにおいては『どのスタイルを指定するか』の部分です。
CSSの書き方 ⇒ セレクタ {プロパティ:値;}


ベンダープレフィックスをご覧になったことがある方、いらっしゃると思います。
こういうやつです。


-ms- ・・・・・・ Internet Explorer
-webkit- ・・・・・・ Google Chrome、Safari
-moz- ・・・・・・ Firefox
-o- ・・・・・・ Opera


左がベンダープレフィックス、右に書いたものが各ブラウザ名です。


ベンダープレフィックスの書き方

参考ソース

.foo {
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

border-radius(角丸指定)というプロパティの前に、先ほど紹介した『-ms-』とか『-o-』などがついていますね。
別の指定する場合も、同じくプロパティの前にこれらをつけます。


書き方の順番ですが、上記の例ではベンダープレフィックスが短い順に書きました。
これはお好みで構わないと思います。


ですが、注意すべきは『必ず最後にベンダープレフィックスがつかないプロパティを書く』ということです。


ベンダープレフィックスは、『草案』(Working Draft)から『勧告候補』(Candidate Recommendation)になった場合、外すことが推奨されています。
そのせいで、ある日突然、プロパティがブラウザにサポートされることがあります。


そうなったときにベンダープレフィックスを書いていると、正しい表示をしてくれないということがあります。
(Firefoxなんかがそうでした)


それを避けるために、こう書いておけば上の指定がブラウザに無視、または誤解されたとしても、下の指定により正されるというわけです。


CSSのルールで、『同じものに対して違う指定があった場合、下の指定を優先する』というものがあるからですね。


ちなみに、border-radiusを例として出しましたが、もはやベンダープレフィックスは不要と思われます。


CSS3の開発状況は?

HTML5は昨年(2014年)の10月29日に正式勧告されましたが、CSS3に関しては『徐々に』勧告されていっています。


というのも、以前少しお話ししましたが、CSS3は各機能ごとに分けて個別に勧告されていっているからです。
それに伴い、各ブラウザもそれらを段階的にサポートしようとしている、というのが現状です。


css3の開発状況(外部サイト) ⇒ http://www.w3.org/Style/CSS/current-work


(ちなみに、WDが「草案」、LCが「最終草案」、CRが「勧告候補」、PRが「勧告案」、RECが「勧告」です)


と書いたところで、いつものようにcaniuse.comを見に行きます。


主要ブラウザの最新バージョンでは、かなりの種類のCSS3プロパティがサポートされていることに気づきます。
よく使うプロパティ(border-radiusword-breakopacitybox-shadowtransforms)なんかはほぼいけます。


ということは、


もうベンダープレフィックスはいらないんじゃないか?


という考えが浮かんできます。


ベンダープレフィックスは不要か?

サポート状況により、ベンダープレフィックスが不要なプロパティがあります
これは個別に確認していただくしかありません。


しかし、よく使われているCSS3プロパティに関しては、もはやつける必要のないものがほとんどです。


ですので、次回はよく使うCSS3プロパティのブラウザ対応状況と共に、クロスブラウザ対策を紹介したいと思います。


書きました ⇒【CSS3】2015年4月3日現在 よく使うCSS3プロパティのブラウザ対応状況と書き方


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事