Webサイト制作

投稿日:2017年12月27日 更新日:

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

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

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

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

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

ベンダープレフィックス使う時に重要なルール

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

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

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

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

ちなみに、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の指定に微妙な違いがあるんですよね~

- Webサイト制作
-

関連記事

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー 無限 ...

簡単な背景画像のパララックス

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。 width:100%; background:url()center center no-repeat f ...

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

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

no image

サイト制作に役立つTips_リンク集

スタイルなどの装飾 ボタンのホバーアニメ バリエーションが豊富です。デザインのヒントに 【保存版】CSSだけで作れるホバーアニメーションボタン総まとめ 角丸とシャドウのジェネレーター 見た目で調節した ...

no image

角丸テーブルのスタイル指定

時々使うテーブルの角丸仕様、毎回調べてる気がする。。 ポイントはborder-collapse border-collapse: collapse;ではなくborder-collapse: separ ...