ホームページ制作MATSUTE BLOG

この記事は「2020年12月21日」に書かれた記事です

1. ベンダープレフィックス（Bender Prefix）とは
2. ベンダープレフィックスの記述の順番
3. どのブラウザまで閲覧できる状態にするか
4. ベンダープレフィックスが必要なプロパティ
5. ハックとの違い

1．ベンダープレフィックス（Bender Prefix）とは

ブラウザのベンダーがCSS３の拡張機能を実装するのに使用する識別子のことです。ざっくり解説するとCSSの設定で

あれ、このブラウザで動作しない

というときに下記の接頭語とつけて動くようにしようというもの。（ちょっと乱暴）

接頭辞と対応ブラウザー

一昔前は「-o-」（Opera用）もありましたが、現在は-webkit-でOKです。

2．ベンダープレフィックスの記述の順番

ベンダープレフィックスを記述する場合は、ベンダープレフィックスをつけていないプロパティを最後に書きます。

「-webkit-」「-moz-」「-ms－」の順番はどの順番でも構いませんが、毎回順番が異なるとわかりにくいので、同じ順番で書くようにしましょう。

例

-ms-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;

3．どのブラウザまで閲覧できる状態にするか

どのブラウザの、どのバージョンまでを閲覧対象とするかは、ホームページ制作会社や案件によって異なります。IE11はもう必要ない、という人もいれば、日本国内で（2020年10月現在）7％前後IE11のシェア率を考慮すると切り捨てることもできない、という人もいます。

ホームページ制作会社で働いている場合は、ホームページ制作会社が基準を設けているはずです。どのブラウザーの、どのバージョンまで閲覧を保証するかにより、使用できるCSSがかわってきますので必ず確認しておきましょう。

4．ベンダープレフィックスが必要なプロパティ

ベンダープレフィックスが必要な記述をすべて覚えておくのはなかなか大変です。

このCSS利用しても大丈夫かな

と思ったら、下記のサイトなどでチェックしましょう。

• Can I use

使い方についてはこの記事では割愛させてもらいます。説明をした際はgoogle先生に聞いてもらえればと思います。

一つだけ例を挙げてみたいと思います。

「calc」

通常数値で設定する部分（width:200px;など）に計算式を利用できるCSSです。
IEでは部分的なサポートのため完全な状態では利用できません。IE10までは見切りをつけてしまうこともできますが、現状、IE11は切り捨てるわけにはいかないことも多い、そんなときに注意が必要です。

では、そのIE11で起こる不具合を確認してみましょう。

例）親要素に対して３つの要素を均等にしたい

width: calc(100% / 3);

上記の設定の場合、IE11の解釈により不具合が起こります。※Edgeは問題ありません。

「100% / 3」は、100÷３＝33.333……なのですが、これどこまで行っても割り切ることができません。このときIE11では処理が「繰り上がり」となってしまいます。

つまり、width＝34%として扱われてしまうのです。
カラム数は3つのため、34ｘ3＝102％となり、３つ目のカラムが横並びにならず、落ちてしまいます。解決方法はいろいろありますが代表的ところで2つ。

• width: calc(100% / 3);　の書き方をあきらめて別の設定を採用する。
• ハックを使ってIE11にだけ別の設定を指定する

どちらの方法をとるかは、やりたいことがシンプルにできる方が良いでしょう。
※複雑になるとあとから改修するのが大変になります。

5．ハックとの違い

ハックの話が出たので、ハックについても触れておきたいと思います。
これまたざっくりですが、各ブラウザにのみ反映させたいときに使用するのがハックです。

んー違いがわからない

という方はこれまた乱暴ですが

• ベンダープレフィックスで対応できる場合は、ベンダープレフィックスを使い、
• ベンダープレフィックスが使えない場合は、ハックを使う

と覚えておけばよいかと思います。
またもIE11を例にしてみてみましょう。（IE11本当になくなってほしいと思っている制作会社のスタッフは大勢いるはず。）

本来であれば、ここでハックの説明を入れるべきところですが、IE8のことを考えなくてよくなってからハックを使うことがほぼなくなってしまい、知識があいまいなため掲載できず・・・です。ハックについて詳しく知りたい！　という人はgoogle先生に聞いてみてください。

ちなみに、ちょっと調べたところでIE11に対するハック

例）IE11のみfont をメイリオにする場合

@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, font-family {
"メイリオ", Meiryo ;
}
}

ハックは下記の部分です。

@media all and (-ms-high-contrast:none) {
*::-ms-backdrop,
｝

この-ms-high-contrast:noneという記述が完全に効かないことがあるという記事ちらほらみました。検証していないですが使用するときは気を付けたほうがよさそうです。