サイト制作メモ

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

- サイト制作メモ
-,

関連記事

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

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

WordPress と Facebookの連携が表示されない原因

dddwordpressのテーマ「xeory_extension」を使っていた時 初期設定でいくつかの項目を入力するとfacebookとの連携ができるようになってたのでテストサイトで設定項目を入力する ...

パーマリンクの設定

stinger8のダウンロードサイトにはパーマリンク設定を"postname"にしているとあったのでそのように設定してみた。 で、実際に新規で記事を追加すると 記事のタイトルが反映されURLは以下のよ ...

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

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

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

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

ゆずむ自己紹介画像
name:ゆずむ
作業時間は平日9:30~17:00です。

翻訳する