サイト制作メモ

-webkit-とかのベンダープレフィックスをつける重要性

投稿日:

プレフィックスとは、
CSS3を使う際に使用するプロパティの前につけるキーワードです。

サイト制作者には当たり前に思えるベンダープレフィックス。
今までどうしてこれを付けないといけないかがよく分かっていなかった。

何故ならば、
出来上がりのサイトを最新版のChromeでしか見てなかったから。

でもよく考えたら(よく考えなくても)
IEで見る人、safariで見る人、opera、firefox・・・と様々なブラウザがあるわけで、その色々なブラウザでも同じように見えるようにするのが「ベンダープレフィックス」なのだと最近になってようやく気づいたので、次回制作より今までより気をつけてかいていこうと思う。

ベンダープレフィックスには書く時に重要な順番のルールがあります。
それは、ベンダープレフィックスをつけていないプロパティを必ず最後に書くこと!!

こんな感じです。

*現在はプレフィックス必要のないborder-radiusを例にしています。

私は知らなかったので適当に見栄えのいいようにまとめようとして注意されました^^;
せっかく書いたベンダープレフィックス意味なくなりますので順番通り書きましょう。
プレフィックスつけたものの順番は前後しても問題ないです。

ちなみに、css3やブラウザは日々更新されていて
少し前までは必要だったプロパティも、webkitなどの記述がなくても大丈夫になったりしますので、ベンダープレフィックスが必要かどうかを調べたい時には以下サイトを参考にして下さい。

ブラウザのバージョンごとにベンダープレフィックスが必要かどうかを調べられるサイト
http://caniuse.com/

■世界と日本のブラウザシェア(2017年11月のデータ)
WebブラウザシェアランキングTOP10(日本国内・世界)

世界のブラウザシェア
IEは7.1%
Chrome62.0、Chrome 61.0合わせて54.04%で過半数。

日本国内のブラウザシェア
IEが25.42%
Chrome 62.0、Chrome 61.0合わせて36.4%

IEとChromeって、cssの指定に微妙な違いがあるんですよね~

- サイト制作メモ
-,

関連記事

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 …

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか? 私は結構あります。 で、ジ …

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 まずはHTMLでメニュー作成 普通にリストで作成 …

mmenuは初心者でも簡単に使えるjQuery plugin|スマホ用メニュー

スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenu あまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。 オプションで色々設定もできるみたいなので …

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。 他のアイコンはpng形式の画像だったけど全然違う。 通常、画像でできたアイ …

翻訳する