サイト制作メモ

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

- サイト制作メモ
-,

関連記事

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ …

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け …

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

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。

fix cover あとはsection …

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 cssでドロップダウンメニューサンプル まずはhtml。 一般的な入 …

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

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