CSS3の基本 - レベルアップCSS

ベンダープレフィックス

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSS3の仕様の多くは策定中のため、草案段階の機能がWebブラウザに実装されるときには、ベンダープレフィックスと呼ばれる接頭辞が使われています。ここでは、ベンダープレフィックスの概要について紹介します。
講師:
03:36

字幕

CSS3 の仕様の多くは策定中のため草案段階の機能がウェブブラウザに実装されるときにはベンダープレフィックスと呼ばれる接頭辞が使われています。このレッスンではベンダープレフィックスの概要について紹介します。CSS3 は W3C によって策定が進められていますがその多くは草案段階です。しかし仕様の確定勧告までたどり着かないとCSS の機能が使えないかというとそうでもありません。W3C による勧告ステップでは草案の段階にある機能でもウェブブラウザ側が先行的に実装することがあります。このときこれを通常の機能とは違う拡張機能であるということを明示するためにプロパティや値の先頭にベンダープレフィックスと呼ばれる接頭辞を付けるようになっています。なおベンダープレフィックスは勧告候補の段階に至ったときに外すことが推奨されています。そのため CSS3 の機能の中には勧告まで至らずともベンダープレフィックスなしで利用できるものもあります。ベンダーとはウェブブラウザを提供している会社や団体のことを指しますので接頭辞はベンダーによって異なります。主要なベンダーのベンダープレフィックスは表の通りです。ベンダープレフィックスでは前後にハイフンを付けたベンダー識別子を指定します。 Google Chrome と Safari はベンダーが異なるものの 2013 年まで同じ webkit というレンダリングエンジンを使っていた経緯から現在でもベンダープレフィックスは同じものを使います。では具体的なベンダープレフィックスの使い方を紹介しましょう。この例では CSS3 の新機能であるtransform プロパティをベンダープレフィックスを使って記述しています。一番上の宣言は Internet Explorer 向けの為-ms- がプロパティの前に付いています。次の宣言は Google Chrome と Safari 向けに-webkit- が同様にプロパティの前に付いています。そして最後にベンダープレフィックスなしの宣言です。これはいずれこのプロパティが勧告候補になりベンダープレフィックスが不要になったときのために合わせて書いておくものです。ウェブブラウザによってはベンダープレフィックスありとなしの両方を実装している場合もあります。このようなときに後で書いた CSS の宣言が優先して適用されるためにもベンダープレフィックスなしの順番は最後にしておくとよいでしょう。なおベンダーによっては今後実装する新しい機能にはベンダープレフィックスを付けないとするものもあります。 このような場合も過去のバージョンに対応するためにはベンダープレフィックスが必要になるケースがありますので使いたい機能がどの様なステータスにあるのか確認しておくとよいでしょう。このレッスンでは CSS の草案段階の機能を使うときに用いるベンダープレフィックスの概要について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

2時間21分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月06日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。