2022-05-12
あなたのお役に立ちたいわんど。
ブラウザごとの対応まとめ
年々身体の動きが遅く、重くなっていっているかねです。
今回はWebサイトを構築する上でいつもぶち当たるブラウザごとのまとめていきたいと思います。
なぜこれをまとめようと思ったか
ブラウザごとで表示が異なる場合があります。
「表示が違うけどどうしよう」と思ったそんな時に、ちらっとでもみていただけたらと思ってまとめようと思いました。
特にIE。。。
・IEについて
・Edgeについて
・Firefoxについて
・Chrome/Opera/Safariについて
・Chrome/Operaについて
・Safariについて
IEについて
@media all and (-ms-high-contrast: none) {
/* スタイル */
}
/* こっちでも対応可能！ */
_:-ms-lang(x)::-ms-backdrop, .selector {
/* スタイル */
}
Edgeについて
@supports (-ms-ime-align: auto) {
/* スタイル */
}
/* こっちでも対応可能！ */
_:-ms-lang(x)::backdrop, p {
/* スタイル */
}
Firefox
@-moz-document url-prefix() {
/* スタイル */
}
Chrome/Safari/Opera
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* スタイル */
}
Chrome/Opera
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
/* スタイル */
}
Safari
_::-webkit-full-page-media, _:future, :root p {
/* スタイル */
}
番外編
Windowsのみ（PHP）
if(strpos($_SERVER['HTTP_USER_AGENT'],'Win') !== false){
/* ここに書く */
}
Mac OSのみ（PHP）
if(strpos($_SERVER['HTTP_USER_AGENT'],'Mac') !== false){
/* ここに書く */
}
まとめ
ブラウザごとはもちろんですが、OSごとによって表示が若干ずれることがあります。
例えば、WindowsのChromeとMacのChromeで表示が若干違うことがありました。
その場合などの時、OSを判定してCSSを読み込ませたりすることもできます。
ちなみにJavescriptでもOSやブラウザ判定ができます。
参考サイトにリンクさせてもらっています。
本当に毎日勉強そして経験値です。。
メタルの王様とか倒して経験値どかっともらえるのはゲームだけですね。
現実は一歩一歩の積み重ねが経験値です。
今回は下記のサイトを参考にさせていただきました。
参考サイト
cssをブラウザ単位（IE、Chrome、FireFox、Safari）で適用する方法
https://dot-blog.jp/news/css-browser-unit-apply/CSSでスタイルをIEのみ・Edgeのみ・Firefoxのみ・Chrome(とOpera)のみ・Safariのみに適用する方法
https://techmemo.biz/css/only-firefox-chrome-hack/JavaScriptでブラウザとOSを判定する2つの方法
https://qiita.com/TD12734/items/671064e8fce75faea98d
もしわからないことや相談したいことなどがありましたら、ぜひ株式会社あんどぷらすへ！
投稿者プロフィール
- 脱肥満
最新の投稿
html2020.09.16ブラウザごとの対応まとめ
jQuery2020.08.25WP REST APIで記事を取得してみた
web2019.10.17Instagram Graph APIの使い方
css2019.09.27セレクトボックスを作ろう
シェア・購読で応援していただけると喜びます：）
こちらもおすすめ
