CSSプロパティのサポート確認
CSSには、すべてのブラウザでサポートされているかなり古いプロパティもあれば、最新のブラウザでのみサポートされ、しかもすべてではない新しいプロパティもあります。
コーディングをする際には、そのプロパティをすでに使用できるかどうかを判断する必要があります。これには特別なルールがあります:ユーザーの1%未満が利用しているブラウザでプロパティのサポートが欠如している場合、そのプロパティを使用できます。
ただし、ここにはニュアンスがあります。サポートがなくてもサイトのレイアウトが崩壊することはないが、機能性が重要でないプロパティもあります。例えば、hyphensの動作しないハイフネーションは、サイトを大幅に悪くするわけではありません。
プロパティのブラウザサポートを確認するには、caniuse.comサービスを使用する必要があります。これは、すべてのブラウザの各バージョンでのプロパティのサポート状況と、各バージョンを利用しているユーザーの割合を示します。
このデータをもとに、特定のプロパティをすでに使用できるかどうか判断を下すことができます。また、一部のプロパティは、まだユーザーが利用している一部のブラウザバージョンではベンダープレフィックス付きである場合があります。これにも注意を払う必要があります。
サポートが重要なプロパティの例を挙げてください。
サポートが重要ではないプロパティの例を挙げてください。
box-sizingプロパティのサポート状況を確認してください。もう使用できますか?
hyphensプロパティのサポート状況を確認してください。もう使用できますか?
animationプロパティのサポート状況を確認してください。もう使用できますか?
flexプロパティのサポート状況を確認してください。もう使用できますか?
gridプロパティのサポート状況を確認してください。もう使用できますか?