-webkit-, -moz-とは? ベンダープレフィックス(ベンダー接頭辞・Vendor Prefixes)について

目次

    CHECK!

    この記事は、以下の動画で詳しく解説しています。
    詳しく知りたい方は、以下の動画をご覧ください!

    動画ページへ

    言葉としての意味

    • ベンダー (Vendor): これは、特定の製品やサービスを提供する会社や団体を指します。ウェブブラウジングの文脈では、ブラウザを開発・提供する企業や組織(例: Google for Chrome, Mozilla for Firefox, Apple for Safariなど)を指します。
    • プレフィックス (Prefix): 接頭辞のことで、何かの前に追加される短いフレーズや文字列を指します。

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

    ベンダープレフィックス(Vendor Prefixes)は、試験的・非標準なCSSプロパティに対して付けられます。
    これにより、ブラウザベンダーは新しい機能を提供しつつ、まだ正式な仕様が固まっていない段階での変更や調整に柔軟に対応できます。

    ベンダープレフィックスの種類

    • -webkit-:Chrome、Safari、ほぼ全てのiOSブラウザ
    • -moz-:Firefox
    • -ms-:Internet Explorer、Microsoft Edge
    • -o-:古いOpera

    プレフィックスの確認方法

    Can I Useで確認。

    記述例

    .example {
      -webkit-transform: rotate(30deg);
      -moz-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      -o-transform: rotate(30deg);
      transform: rotate(30deg);
    }

    いちいち Can I Useで確認するべきか?

    そもそも以前に比べて、ベンダープレフィックスは不要になってきている。
    ただし、必要なものもあるので、以下のように対応する。

    • CSSで開発している場合はVSCodeのAutoprefixerを使う

      ただし、プレフィックス付与時にコマンドを入力する必要がある。

    • Sassを使用している場合(おすすめ)

      Live Sass Compiler を使っていれば、Can I Use に基づいて付与される。

      Live Sass Compilerを使ったSassからCSSへの変換の動画はこちら

      https://factory-programming-mv.com/video/dyLs8fWm9Gk/

    • webpackなどを使用している場合(おすすめ)

      autoprefixer などのパッケージをインストールすることで、Can I Use に基づいて付与される。

    それでもベンダープレフィックスが付与されない場合

    Sassのミックスインを活用する

    @mixin transform($value) {
      -webkit-transform: $value;
      -moz-transform: $value;
      -ms-transform: $value;
      -o-transform: $value;
      transform: $value;
    }
    
    .example {
      @include transform(rotate(30deg));
    }

    Sassのmixinについての動画
    https://factory-programming-mv.com/video/ydmiVIph9Vc/

    Autoprefixer CSS online で確認
    https://autoprefixer.github.io/

    • マンツーマン
      個別講義開催中!

      エラーの解消から、
      実装方法まで丁寧に教えます!
      講師が答えられるなら、
      基本的にどんな内容でも
      OK!

      詳細はこちら!
    • 質問し放題プラン!
    • スクール形式講義も

      プロを目指したい方
      講義を何回も受けたい方はこちら!
      個別のカリキュラムを作成し、
      長期的にサポート!

      詳細はこちら!
    • discordコミュニティ
    記事一覧へ