CSS入門:ベンダープレフィックスとは?

    • このページをはてなブックマークに追加

    公開日:2017年02月01日 最終更新日:2019年09月26日

    少し前のブラウザーではCSS3のプロパティを実装する際にプロパティによって”–webkit-”や”–moz-”などの「ベンダープレフィックス」を付けたプロパティを記述していましたが、最近のブラウザーは多くのCSS3の仕様をサポートしており、「ベンダープレフィックス」なして正しく動作するプロパティが増えてきました。本コラムでは、「ベンダープレフィックス」の基本とW3CのCSS3勧告状況の見方について解説します。

    目次

    1. ベンダープレフィックスとは何か?

    「ベンダープレフィックス(Bender Prefix)」とは、"Google Chrome" や "Mozilla Firefox"、"Safari" といったブラウザーのベンダーがCSS3の拡張機能を実装するのに使用する識別子のことです。 プレフィックス(Prefix)の意味は「接頭辞」です。CSS3のプロパティの接頭辞として「–webkit-」や「–moz-」を付けて「草案段階(WD:Working Draft)」のCSS3の仕様を先行して実装するときに利用します。

    1.1. ベンダープレフィックスの一覧

    ブラウザーごとに以下のようなベンダープレフィックスを実装します。

    接頭辞 対応ブラウザー
    -webkit-Google Chrome、Safari
    -moz-Mozilla Firefox
    -ms-Microsoft Internet Explorer
    -o-Opera

    例えば、「border-radius」プロパティをベンダープレフィックスをつけて実装する場合CSSに記述するのは次のようなコードになります。ブラウザーに対応した接頭辞をプロパティにつけて同じプロパティを複数記述します。

    ●sample.html

    .sample {
    -webkit-borde-radius: 20px; /* Google Chrome、Safari用 */
    -moz-border-radius: 20px; /* Mozilla Firefox用 */
    -ms-border-radius: 20px; /* Microsoft IE用 */
    -o-border-radius: 20px; /* Opera用 */
    border-radius: 20px; /* 「勧告候補」以降の対応 */
    }

    ▲ページトップへ戻る

    1.2. ベンダープレフィックスの順序について

    「ベンダープレフィックス」を付けたプロパティを記述する時に順序は特にきにする必要はありません。サンプルではベンダープレフィックスが長い順番記述しています。またベンダープレフィックスを付けたプロパティをCSSに記述する際には、通常のプロパティを一番最後の行に記述します。

    現在のウェブブラウザーでは多くのCSS3の仕様をサポートしていますので、「ベンダープレフィックス」を記述する必要はほとんどありませんが、古いコードのメンテナンスをしたり暫定対策でベンダープレフィックスを利用する場面もあるかと思います。しかし、「ベンダープレフィックス」はコードが膨大になり、管理やメンテナンスもしにくくなる為なるべく使用しないことをお勧めします。 W3Cでは、CSS3の「草案段階(Working Draft)」から「勧告候補(Candidate Recommendation)」になったらブラウザーからベンダープレフィックスを外すことが推奨されています。その為、今まで正常に動作していたベンダープレフィクス付きのプロパティが突然動作しなくなることがあります。その為勧告候補になったプロパティはベンダープレフィックスなしのプロパティに変更する必要があります。対応策としてプレフィックスなしのプロパティを記述しておきます。
    CSSは同じものが記述されていた場合は下に記述されたものを優先しますので、ベンダープレフィックスのついたプロパティよりもその下のプロパティで正しく動作することになります。

    ▲ページトップへ戻る

    2. CSS3の勧告状況を確認する方法

    W3Cの「CSS current work & how to participate(http://www.w3.org/Style/CSS/current-work)」のページで、プロパティの状況を確認する事ができます。

    ●CSS current work & how to participate

    bender1

    W3Cサイトでは勧告状況は以下のように区分されています。

    日本語 英語
    「草案段階」WD: Working Draft
    「最終草案」LC: Last Call
    「勧告候補」CR: Candidate Recommendation
    「勧告案」PR: Proposed Recommendation
    「勧告」REC: Recommendation

    最近のブラウザーではよく使われるCSS3のプロパティが実装可能ですので、ベンダープレフィックスを付ける必要はありませんが、中にはブラウザーでサポートされていないプロパティもあります。プロパティごとに草案段階なのか勧告されているものかなどを確認してみましょう。W3Cのサイト「CSS current work & how to participate」のプロパティ一覧で「CR(勧告候補)」「PR(勧告案)」「REC(勧告)」とあればブラウザーベンダーがプロパティをサポートしてるもしくはする予定のプロパティですので、まずは通常のプロパティを設定して確認してみましょう。ちなみにサンプルコードの「border-radius」プロパティは、”IE", "Google Chrome", "Firefox", "Opera”, ”Safari" などの主要ブラウザーで利用可能ですのでベンダープレフィックスを付ける必要はなく「border-radius: 20px」の記述だけで角丸の指定が可能になります。

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【Java】プログラマー|WEBアプリケーションの開発

    年収 :300万円〜600万円

    弊社で支援しているWEBアプリケーションの開発をご担当いただきます。言語的にはJava、ASP.NET(C#)、PHP...

    株式会社SYNC

    正社員

    【PHP】WEBエンジニア|アパレルサイトの開発

    年収 :350万円〜

    アパレル、食品ECサイトなどの開発

    株式会社LOWCAL

    フリーランス

    【Ruby on Rails/HTML/CSS】サーバーサイドエンジニア★BtoBマッチングSaaS開発

    同社は決裁者向けのマッチングプラットフォームを展開する企業です。 今回はBtoBマッチングSaaSの開発...

    フリーランス

    【Java(Spring Boot)/React/HTML/JavaScript他】フルスタックエンジニア★セキュリティ関連企業向け新規サービス開発

    月額単価 :70万円〜80万円

    同社はWebシステムやスマフォアプリ開発を得意とする受託開発企業です。 今回は大手セキュリティ関連企...