Safari にのみスタイルを適用する方法はありますか? 質問する

• SONOMA & SAFARI 17.0 向けに更新 (2023 年秋のアップデート) *

お願いします、お願いします --問題があり、本当に助けを得たい場合や、コメントを投稿して他の人を助けたい場合は、ブラウザとデバイス (MacBook/iPad など) をブラウザと OS のバージョン番号とともに投稿してください。

これらのどれも機能しないと主張するのは正確ではありません(実際には不可能です)。これらの多くは実際には「ハック」ではなく、Apple によって Safari のバージョンに組み込まれたコードです。さらに情報が必要です。あなたがここに来てくれたという事実を嬉しく思いますし、物事がうまくいくことを本当に願っています。

ここから何かを自分のサイトで動作させるのに問題がある場合は、以下のリンクからテスト サイトを確認してください。ハックがそこでは動作しているのに自分のサイトでは動作していない場合、ハックは問題ではありません。サイトで何か他のことが起こっています。多くの場合、以下で説明するように CSS の競合だけです。または、何も動作していないのに実際には Safari をまったく使用していないことに気づいていない可能性があります。この情報は、(願わくば) 短期的な問題を抱えている人々を助けるためにここにあることを忘れないでください。

テストサイト:

https://browserstrangeness.bitbucket.io/css_hacks.html#safari より

そして鏡！

https://browserstrangeness.github.io/css_hacks.html#safari より

注意: フィルターやコンパイラー (SASS エンジンなど) は、標準の「クロスブラウザー」コードを想定しています。このような CSS ハックは想定していません。つまり、ハックは書き換え、破壊、または削除することになります。これはハックが行うことではないからです。これらの多くは、単一のブラウザー バージョンのみを対象に苦労して作成された非標準コードであり、変更されると機能しません。これらを使用する場合は、フィルターまたはコンパイラーの後に、選択した CSS ハックをロードする必要があります。これは当然のことのように思えるかもしれませんが、このような目的のために設計されていないソフトウェアを介してハックを実行することでハックを元に戻していることに気付いていない人々の間で多くの混乱が生じています。

多くの人が気づいているように、Safari はバージョン 6.1 以降変更されています。

注意: iOS (少なくとも iOS バージョン 6.1 以降) で Chrome (および Firefox) を使用している場合、どのハックも Chrome と Safari を分離していないように見えるのはなぜかと疑問に思うかもしれませんが、それは iOS バージョンの Chrome が Safari エンジンを使用しているためです。Chrome のハックではなく、Safari のハックを使用しています。詳細については、こちらをご覧ください。https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/iOS 版 Firefox は 2015 年秋にリリースされました。iOS Chrome と同様に、Safari Hacks には対応していますが、Firefox Hacks には対応していません。

また、1 つ以上のハックを試してもうまくいかない場合は、サンプル コード (できればテスト ページ)、試しているハック、使用しているブラウザー (正確なバージョン)、使用しているデバイスを投稿してください。その追加情報がなければ、私も他の誰もあなたを支援することができません。

多くの場合、単純な修正か、セミコロンの欠落です。CSS の場合、通常はそれが原因か、スタイル シートにコードがリストされている順序の問題、または CSS エラーだけの問題です。テスト サイトでハックをテストしてください。そこで機能する場合、ハックは実際にセットアップで機能していますが、解決する必要がある別の問題があります。ここの人々は、本当に喜んで手助けをしてくれます。少なくとも、正しい方向を指し示してくれます。

さて、ここでは、Safari の最新バージョンで使用できるハックを紹介します。

これは現在の Safari バージョンをカバーしており、純粋な Safari のみを対象としているため、最初にこれを試してください。

This one still works properly with Safari 17.0 (Fall-2023):

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

/* Safari 6.1-10.0 (not 10.1) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

/* Safari 11+ */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 10.0 (not 10.1) */

_::-webkit-:host:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 10.1 */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

/* Safari 10.0 (not 10.1) but not on iOS */

_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

@supports (-webkit-hyphens:none)
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

_:not(a,b), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 9+ */

_:default:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 9+, < 13.1 */

@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}

/* Safari 9.0-10.0 (not 10.1) */

_::-webkit-:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 9 */

@supports (overflow:-webkit-marquee) and (justify-content:inherit) 
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

/* Safari 9.0 (iOS Only) */

@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

/* Safari 9+ (non-iOS) */

_:default:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 9.0-10.0 (not 10.1) (non-iOS) */

_:-webkit-full-screen:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 6.1-7.0 */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{  
   .safari_only {(;

      color:#0000FF; 
      background-color:#CCCCCC; 

    );}
}

/* Safari 6.1-10.0 (not 10.1) (non-iOS) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    _:-webkit-full-screen, .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

<div class="safari_only">This text will be Blue in Safari</div>

/* Chrome 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
    .chrome_only {

       color:#0000FF; 
       background-color:#CCCCCC; 

    }
}

/* Chrome 29+ */

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
    .chrome_only {

       color:#0000FF; 
       background-color:#CCCCCC; 

    }
}

/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */

@supports (-webkit-appearance:none) 
{
    .chrome_and_safari {

       color:#0000FF; 
       background-color:#CCCCCC; 

    }
}

/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0)
{
    .chrome_only {-chrome-:only(;

       color:#0000FF; 
       background-color:#CCCCCC; 

    );}
}

NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;

<div class="chrome_only">This text will be Blue in Chrome</div>