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サイト制作
-

関連記事

no image

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

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

Amazon Product Advertising APIを使って気づいた事

APIの使い方が分からない時は Product Advertising APIの使い方が分からない時は、ドキュメントを見てみます。英語だけど、ページの翻訳で何となく分かる箇所があります。 APIのdo ...

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

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

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。例えば、このサイトのレイアウト。クロームで見るとこんな感じまぁまぁ均等に並んでいるように見 ...

"Swiper"を使ったスライドで左右に画像を表示する

JQueryなしで動く"Swiper"という便利なプラグインを使ってのスライドショー。 左右に画像を表示したい時の注意点をメモ。 ダウンロードはこちらから swiper公式サイト 使う中ですごく分かり ...