どうも！かけちまるです！
コーディングしているときに地味に時間が取られてしまうのがブラウザごとの対応ですよね？Chrome、Safari、Firefox、Edge、IEそれぞれにクセがあり特定のブラウザのみにCSSを特定したい時があると思います。
実はCSSには特定のブラウザのみにスタイルを適応させるハックが存在するのでまとめていきます。
Chrome、Safari、Firefox、Edge、IEそれぞれまとめていて、コピペで使えるので参考にしてください。
CSSコピー@media screen and (-webkit-min-device-pixel-ratio:0){ .class_name{ /* ここに書く */ } }
CSSコピー::-webkit-full-page-media, :future, :root .class_name{ /* ここに書く */ }
CSSコピー@-moz-document url-prefix(){ .class_name{ /* ここに書く */ } }
CSSコピー@supports (-ms-ime-align: auto){ .class_name{ /* ここに書く */ } }
CSSコピー@media all and (-ms-high-contrast: none){ .class_name{ /* ここに書く */ } }
おわり
フィードバックを送信
記事についてのフィードバックはTwitterかお問い合わせフォームから受け付けております。
