今さら感が半端ないのですが、、、先頭に付ける-moz-や-webkit-などについて。
先頭に付ける-moz-や-webkit-などはベンダープレフィックス(ベンダー接頭辞、vendor prefix)と言う。
これはCSS3で採用予定の機能を各ブラウザで動作させるためのもの。2021年現在ではベンダープレフィックスが不要になっている機能やベンダープレフィックスがついていると機能しない機能もあるとのこと。
ブラウザごとのベンダープレフィックス
- -moz- → Firefox
- -webkit- → Google Chrome、Safari
- -o- → Opera
- -ms- → Internet Explorer
ベンダープレフィクスが必要かどうか
いま現在、どのプロパティや値にベンダープリフィックスが必要かどうかはhttps://caniuse.com/でわかる。
使わないプロパティ&要素
使っているDreamWeaverのスニペットからベンダープレフィクスを削除する。
- opacity (Can I use opacity)
- transition (Can I use transition)
- display: flex (Can I use flex)
- flex-direction:row-reverse (Can I use flex-direction)
- box-shadow (Can I use box-shadow)
- transform(2D) (Can I use transform(2D))
- box-sizing (Can I use box-sizing)
- radial-gradient (Can I use radial-gradient)
まだ残すプロパティ&要素
- justify-content (Can I use justify-content)・・・ie 11
- flex-wrap (Can I use flex-wrap)・・・ie 11
- align-items (Can I use align-items)・・・ie 11
- align-content (Can I use align-content)・・・ie 11
- linear-gradient (Can I use linear-gradient)・・・ie 11
- appearance (Can I use appearance)・・・Safari, iOS
- calc() (Can I use calc())・・・ie 11(プレフィックスではなく通常指定でフォールバックする)