Wie kann ich CSS-Hacks verwenden, um nur Safari zu formatieren?

CSS-Hacks nur für die Ausrichtung auf Safari

Warum separate Stile für Safari?

CSS-Hacks werden häufig für die gezielte Ausrichtung auf Safari verwendet Browser für Styling-Zwecke. In diesem Fall möchten wir Stile ausschließlich auf Safari anwenden und andere Browser wie Chrome ausschließen.

Ineffektivität aktueller Hacks

Wie im ursprünglichen Beitrag erwähnt, ist der @media screen und (-webkit-min-device-pixel-ratio:0) Hack haben sich sowohl auf Safari als auch auf Safari ausgewirkt Chrome.

Aktualisierte Lösungen für Safari

Hier sind jedoch mehrere neue CSS-Hacks, die ausschließlich auf Safari abzielen:

/* 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 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; 

    }
}}

Verwendung

Um diese Stile speziell auf Elemente in Safari anzuwenden, verwenden Sie die safari_only-Klasse wie diese:

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

Hinweis:

Es ist wichtig, bei der Implementierung dieser Hacks einen benutzerdefinierten Klassennamen zu verwenden, um unbeabsichtigte Folgen zu vermeiden. Beachten Sie außerdem, dass diese Hacks möglicherweise nicht in allen Szenarien funktionieren, insbesondere wenn die Website einen CSS-Filter oder -Compiler verwendet, da diese die Hacks möglicherweise ändern oder entfernen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Hacks verwenden, um nur Safari zu formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!