![](https://mnet-company.co.jp/wp-content/uploads/2023/05/image-1.png)
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
![](https://i0.wp.com/mnet-company.co.jp/wp-content/uploads/2023/05/member02.webp?fit=96%2C96&ssl=1)
Webサイトの検証モードで確認をするとあまり見たがないCSSプロパティが・・・
「-ms-」や「-webkit-」
これは一体??
これを付けないとCSSに不具合がでるの?
そこで今回はこれを知っておけば脱初心者!ベンダープレフィックスについてご紹介します。
ベンダープレフィックスとは、CSSの新しいプロパティに付けて、記述したプロパティが拡張機能であることを、各ブラウザに示すために使われる識別子です。
CSSのプロパティは日々新しいものが更新されていますが新しいプロパティについてはブラウザがまだ対応しきっていない場合があります。
そこでブラウザに対して「これはまだプレリリースのプロパティだからね」というものを伝えるものになります。
実際の記述例
div {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
このように、プロパティを記述する前に対応ブラウザごとのベンダープレフィックスをつけます。
ベンダープレフィックス | 対応ブラウザ |
-ms- | Internet Explorer |
-webkit- | Google Chrome / Safari |
-moz- | Firefox / Mozilla |
機能が普及したらベンダープレフィックスを外す
プレリリースであったプロパティが正式リリースになるとベンダープレフィックスを外すことが推奨されています。様々なサイトを管理していると作業量が膨大になりますがそれでも推奨されているので極力外すようにしましょう!
プロパティのブラウザ対応状況は、「Can I use…」というサービスでチェックすることができます。上部に調べたいプロパティ名を入力すれば、各ブラウザごとの対応状況が色別に表示されます。
外部サイトへ遷移します
Can I use…
最近では最新の各ブラウザが素早くアップデートを行うようになり、ベンダープレフィックスが必要になる機会は少なくなってきています。しかし完全に無くしてもいいものではないのでしっかりと記述をしていきましょう!
山下 生真
役員
建築家を志し京都の大学を卒業。様々な業種を経て、IT業界に心惹かれ、一心発起し、プログラミングスクールに業務の傍ら通う。趣味のYouTubeの動画編集・撮影活動で現CEOと出会う。幼少期からの夢であった”魔法使いになってみんなの役に立つ”実現の為、IT技術を駆使し、世の中の役に立つことを目標に起業。座右の銘は”野心・向上心”。
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
【Part7】記事取得のカスタマイズが捗る。WP_Queryの使い方。カスタムフィールドの指定編
【ワードプレス】問い合わせフォームから届く、ひたすら迷惑なスパムメールを防ぐ為には?
サステナブルマーケティングとは
対面マーケティングの重要性
AIとグラフィックデザイン: デザイナーは心配すべきか?
最近のマイブーム(おすすめメディア紹介)
Webサイト制作における開発手法
幼稚園でICT活用のメリットを紹介
デジタルヘルスとは?