🕌

ブラウザ毎にCSSやJSを出し分けたい

2022/07/01に公開約900字

ブラウザ毎にと言いますか、safariを黙らせたくて調べてたらブラウザ毎に出し分ける方法がまとまってしまったので備忘録です

CSS

// safari iOS のみ
_::-webkit-full-page-media,
_:future,
:root .hoge {
  color: red;
}
 
// firefoxのみ
_:lang(x)::-moz-placeholder,
.hoge {
  color: blue;
}
 
// edge chromeのみ
_:lang(x)::-internal-media-controls-overlay-cast-button,
.hoge {
  color: green;
}

JavaScript

// userAgentでブラウザ情報を取得 → toLowerCase()で文字列を全て小文字に変換
const agent = window.navigator.userAgent.toLowerCase();
 
// 各ブラウザは、そのブラウザ名以外にも「chrome」や[safari」などの文字列を含んだブラウザ情報を返してくるため下記順番で判定する
if (agent.indexOf("edg") != -1 || agent.indexOf("edge") != -1) {
  console.log("Edge");
} else if (agent.indexOf("opr") != -1 || agent.indexOf("opera") != -1) {
  console.log("Opera");
} else if (agent.indexOf("chrome") != -1) {
  console.log("Chrome");
} else if (agent.indexOf("safari") != -1) {
  console.log("Safari");
} else if (agent.indexOf("firefox") != -1) {
  console.log("FireFox");
}

Discussion

ログインするとコメントできます