ご無沙汰しております。Keitaです。最近コーディングで、よく出くわすのが、
ブラウザチェックでSafariでの崩れ。今回のこの対処方法について書いていきたいと思います。
Safariとは？
Appleが開発しているWebブラウザで、MacやIPhone、iPadなどでデフォルトのブラウザになっているブラウザです。
IEと違い、対応必須のブラウザ
以前この記事でIEについて書いたと思いますが、
IEはサポートを打ち切るのに対し、Safariはそういうのがない上に、
iPhoneのようなシェアが高いデバイスで使うことがあるため、
対応は必須と言えるでしょう。
Safariで崩れる可能性が高い部分
positionとかを多用している部分
positionで絶対要素を使っている部分、特にデザインの調整で擬似要素を使っている部分とかは、
こういった現象が起こることがあります。
数ピクセルの調整で使うと線が切れる、あの要素がズレるといったことがあり、
ブラウザ比較すると違和感があることがあります。
対処方法は？
・ユーザーエージェントでJSを振り分け、Safari用のCSSを書く
・CSSハックを使う
・css_browser_selector.jsというjsライブラリを使う
ユーザーエージェントでJSを振り分ける方法
ユーザーエージェントとは？
アクセスする際に、ブラウザを判定するものです。レスポンシブがまだ普及していなかったときは、PC用とスマホ用のCSSを書いてそれで振り分けている時代もありました。
ユーザーエージェントでCSSを振り分けるには？
headタグ内に以下のコードを入れます。
<script>
var userAgent = window.navigator.userAgent.toLowerCase();
if(userAgent.indexOf('edge') != -1 || userAgent.indexOf('chrome') != -1) {
}else if(userAgent.indexOf('safari') != -1) {{
document.write('<link rel="stylesheet" href="(safari用のcssのパス）">');
}
</script>注意したいのはEdge,ChromeのユーザーエージェントにもSafariという文字が含まれているので、
先に何もしない処理をし、改めてSafariのみ判定してあげる手法です。
CSSハックで、CSSを振り分ける方法
CSSハックとは？
そのブラウザ用にCSSを書いていく手法で、適用箇所が少なければ一番楽な方法であります。
CSSハックの使い方
_:lang(x)+_:-webkit-full-screen-document, body {
/* Safari用のCSS */
}参考：IEEdge用のCSSハック
_:-ms-lang(x)::-ms-backdrop, body {
/*IE11 */
}
_:-ms-lang(x)::backdrop, body {
/* 旧Edge */
}
_:lang(x)::-ms-, body {
/* 新Edge */
}Edgeにつきましては、旧IEベースのものと、Chromeに準じたChromiumベースの新しいEdge
css_browser_selector.jsというjsライブラリを使う方法
このjsライブラリは、読み込ませるとbodyタグに各ブラウザ用のclassを付与されるので、
それを利用し、Safari用のCSSを書いていく手法です。
css_browser_selector.jsのダウンロード
こちらからダウンロードし、headタグ内に読み込ませます。
CSSの書き方
.safari .hoge{
/* safari用のCSS */
}このようにbodyに.safariというclassがjsにより付与されるので、崩れている部分だけ
適用させるといった感じです。
私が対応しているブラウザ
・Chrome
・Firefox
・Safari
・Edge
PCスマホ、タブレットに対応させています。IEは対応必要な場合対応しているといった感じです。
Safariはお付き合いが必要
SafariはiPhoneやMacなどでシェアが高いので、
めんどくさいと思うかもしれませんが、必ず対応するようにしましょう。
コメント