- カタリナ＆サファリ13に更新（2020年初頭に更新）*
注：フィルターとコンパイラー（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年秋にリリースされました。また、 Safariハックはありますが、Firefoxのものはなく、iOS Chromeと同じです。
また、1つ以上のハックを試し、それらを機能させるのに問題がある場合は、サンプルコード（より良いテストページ）を投稿してください-試みているハックと、どのブラウザ（正確なバージョン！）あなたが使用しているデバイスと同様に使用しています。その追加情報がないと、私や他の誰かがあなたを支援することは不可能です。
多くの場合、これは単純な修正または欠落したセミコロンです。CSSでは、CSSエラーだけではなく、通常、スタイルシートにコードがリストされる順序または問題です。ここでテストサイトでハックをテストしてください。それがそこで機能する場合、それはハックが実際にセットアップで機能していることを意味しますが、解決する必要がある別のものです。ここの人々は本当に助けが大好きで、少なくともあなたを正しい方向に向けています。
テストサイト：
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
そしてミラー！
https://browserstrangeness.github.io/css_hacks.html#safari
ここで邪魔にならないのは、Safariの最新バージョンに使用するハックです。
これは現在のSafariバージョンをカバーし、純粋なSafariのみなので、最初に試してみてください。
これはまだSafari 13（2020年初頭）で正常に動作します。
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
6.1以降のバージョンをカバーするには、現時点では次のペアのcssハックを使用する必要があります。6.1〜10.0用のものは10.1以上を処理するものと一緒に使用します。
それで-これが私がSafari 10.1+のために作成したものです：
ここでは二重のメディアクエリが重要です。削除しないでください。
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
SCSSまたは他のツールセットがネストされたメディアクエリに問題がある場合は、これを試してください。
/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
次のバージョンは6.1〜10.0で機能しますが、10.1では機能しません（2017年3月下旬更新）
このハックは、他の複数のハックを組み合わせることによって、何ヶ月にもわたってテストと実験を行って作成しました。
注：上記のように、二重のメディアクエリは偶然ではありません。メディアクエリのネストを処理できない多くの古いブラウザが除外されています。-andの後にスペースがないことも重要です。結局のところ、これはハックです...そして、現時点で6.1以降のすべての新しいSafariバージョンで機能する唯一の方法です。また、以下のコメントに記載されているように、ハッキングは非標準のcssであり、フィルターの後で適用する必要があることに注意してください。SASSエンジンなどのフィルターは、完全に書き換え/元に戻すか、完全に削除します。
上記のように、テストページをチェックして、そのまま（変更なしで）機能することを確認してください
そしてここにコードがあります：
/* 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 CSSについては、以下をお読みください。
/* 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の1つ：
/* Safari 11.0 (not 11.1) */
html >> * .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 10.0用：
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
10.1でわずかに変更された作品（のみ）
/* 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（iOS以外のデバイス）：
/* 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;
}
Safari 9 CSSハック：
Safari 9.0以降では、シンプルな機能クエリハックがサポートされています。
@supports (-webkit-hyphens:none)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Safari 9.0以降の簡単なアンダースコアハック：
_:not(a,b), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9.0以降用のもう1つ：
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
そして、他のサポート機能クエリも：
/* Safari 9+ */
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Safari 9.0-10.0用の1つ：
/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9に機能検出が含まれるようになったので、これを使用できます...
/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
iOSデバイスのみをターゲットに設定します。先に述べたように、iOS上のChromeはSafariをルートとしているので、もちろんこれも当てはまります。
/* 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.0以降用ですが、iOSデバイス用ではありません。
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
そして、Safari 9.0-10.0用ですが、iOSデバイス用ではありません。
/* Safari 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
以下は6.1-7.0と7.1+を分離するハックです。これらも正しい結果を得るために複数のハックの組み合わせを必要としました：
/* 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;
);}
}
iOSデバイスをブロックする方法を指摘してきたので、iOS以外のデバイスを対象とするSafari 6.1+ハックの修正バージョンを次に示します。
/* 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>
通常、この質問のように、人々がSafariのハックについて尋ねる理由は、ほとんどがGoogle Chromeからそれを分離することに関するものです（これもiOSではありません！）代替を投稿することが重要な場合があります。必要な場合に備えて、ここで提供します。
ここに基本があります。Chromeの特定のバージョンがたくさんあるかどうかをもう一度テストページで確認してください。Chromeはバージョン45で、DevとCanaryのバージョンは現在バージョン47までです。
私がbrowserhacksに置いた古いメディアクエリコンボは、Chrome 29以降でのみ機能します。
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
@supports機能のクエリは、Chrome 29以降でも適切に機能します。以下のChrome 28以降で使用していたものの修正バージョンです。Safari 9、今後のFirefoxブラウザー、およびMicrosoft Edgeブラウザーは、このブラウザーでは選択されません。
/* 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以降はターゲティングが簡単でした。これは、他のCSSコードのブロック（元々はCSSハックとして意図されていなかった）に含まれているのを見てブラウザハックに送信し、それが何をするのかを理解したので、目的のために関連部分を抽出しました：
[注：]以下の古い方法では、上記のアップデートなしでSafari 9とMicrosoft Edgeブラウザーを撮影しています。FirefoxとMicrosoft Edgeの次期バージョンでは、プログラミングに複数の-webkit- CSSコードのサポートが追加され、EdgeとSafari 9の両方で@supports機能検出のサポートが追加されました。ChromeとFirefoxには以前、@ supportsが含まれていました。
/* 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のブロック（古いバージョンをサポートするために必要な場合）も、上に投稿したSafariコンボハックをひねってターゲットに設定できます。
/* 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(;
上記のSafari CSSフォーマットハックと同様に、これらは次のように使用できます。
<div class="chrome_only">This text will be Blue in Chrome</div>
したがって、この投稿で検索する必要はありません。ここに私のライブテストページがあります。
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
[または鏡]
https://browserstrangeness.github.io/css_hacks.html#safari
テストページには他にも多くのものがあり、特にChromeとSafariを区別するのに役立つバージョンベースのほか、Firefox、Microsoft Edge、Internet Explorer Webブラウザーの多くのハックもあります。
注：何かがうまくいかない場合は、最初にテストページを確認してください。ただし、コードの例と、誰かが手助けしようとしているハッキングの例を入力してください。