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だけで平行四辺形を作る方法

2022.07.05
1592
HTMLCSS jQuery

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

更新日:2022.09.09
1425
HTMLCSS プログラミング

【簡単】inputタグで入力した内容の履歴・入力候補を出さない方法【属性を設定すれば解決】

2022.02.24
4122
HTMLCSS

CSSだけで台形を作る方法

更新日:2022.09.21
339