サイト制作メモ

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

- サイト制作メモ
-,

関連記事

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか?私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてしま ...

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

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

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml <h1 ...

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

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

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

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

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

翻訳する