Written by Kasumi

safariブラウザだけCSSプロパティを適用する方法

safariブラウザだけ特定のCSSプロパティを付与したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

safariブラウザのみCSSを適用する

::-webkit-full-page-media, :future, :root HTML要素名{
//ここにsafariブラウザのみ適用したいCSSプロパティを入れる
  margin-top: -0.3em;
}

safariブラウザのみCSSを適用するコード例です。

CSSファイル内で::-webkit-full-page-media, :future, :rootと記述。

上記の後にスペース開けて、safariのみCSSを適用させたいHTML要素名(セレクタ)を記述。

{}(波括弧)内にCSSプロパティを記述します。

以上で実装完了です。

まとめ

safariブラウザだけCSSプロパティを適用する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

HTMLCSS

CSSだけで行数を指定。三点リーダーを表示する方法

2023.04.18
707
HTMLCSS プログラミング

【簡単】スマホのぱんくずを一行にして、はみ出した分を横スクロールで見せる方法

2022.01.17
765
HTMLCSS

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法【CSS flexbox】

2022.10.03
6090
HTMLCSS jQuery

【CSS】高さ100vh指定時のスマホステータスバーを除く方法

更新日:2022.09.09
2598