SafariのCSSハック

Django

概要

  • iphoneやipadでのSafariブラウザ
  • inputのtype="text"やtextareaなどがdisabledがtrueになっている文字列にcssのstyleのcolorを指定
  • Safariではdisabledが優先されていた

    iphoneやipadのSafariから開発モードでデバックして調査する

  • SafariのWebインスペクタをONにしてブラウザで iphoneやipadの実機でCSSを調査する

    • Macなどのブラウザで疑似デバイスを使用しても結果が異なっているので実機を使用した

  • Safariのバージョン12.0.3でも以下の記事のように「開発」から表示がされなかった

Webインスペクタの使用方法はググったら以下のような記事が多くみられた blanche-toile.com

SafariのCSSハック

  • 特定のデバイスにstyleを当てたい時はCSSハックなど指定が裏技的なものが存在する
    • デバイスやバージョンによって記述が異なる
  • .css-hoge-selectorにセレクタやclassを指定する
// safariのみ適応させる
_::-webkit-full-page-media, _:future, :root .css-hoge-selector {

}

disabledのstyleを適応させる

  • 普通のcolorではなく-webkit-text-fill-colorを使用
  • -webkit-text-fill-colorにrgbaを使用していたが別途opacityを設定しないと反映されなかったので追加指定して対応した
_::-webkit-full-page-media,
_:future,
:root
input[type="text"]:disabled,
textarea:disabled {
  -webkit-text-fill-color: $color;
  opacity: 1;
}