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

【CSS3】アニメショーンプロパティを使いこなそう!

更新日:2019.11.28
766
HTMLCSS

CSSのwhite-space nowrapを子要素だけ解除する方法

2022.08.28
3236
HTMLCSS プログラミング

HTML・CSSのみで開閉アコーディオンを作る【JS不要簡単】

2020.04.12
4054
HTMLCSS プログラミング

スクロールバーをiphone、ipadでも常に表示しとく方法

更新日:2022.11.01
8896