Wie kann ich CSS-Stile ausschließlich auf Safari anwenden und gleichzeitig Konflikte mit anderen Browsern vermeiden?

Ist es möglich, Inhalte ausschließlich für Safari zu stilisieren?

Problem:

Sie' Es fällt mir schwer, CSS zu finden, das sich ausschließlich auf Safari auswirkt, da sich frühere Methoden auch auf Chrome auswirken, da beide Browser derzeit WebKit verwenden. Unterschiedliche Ausrichtungen in Safari und Chrome machen das Styling zu einer besonderen Herausforderung.

Lösung:

/* Safari 7.1+ */

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

  color:#0000FF;    /* Example text color */
  background-color:#CCCCCC;   /* Example background color */

}

Alternativ können Sie für Safari 10.1 und höher Folgendes verwenden:

/* Safari 10.1+ */

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

    .safari_only { 

        /* CSS styles */

    }
}}

oder

/* Safari 10.1+ (alternate method) */

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

    .safari_only { 

        /* CSS styles */

    }
}}

Für Safari 6.1 bis 10.0, verwenden:

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

        /* CSS styles */

    }
}}

Weitere Hacks für bestimmte Safari-Versionen finden Sie in der bereitgestellten Antwort.

Verwendung:

<div>

Hinweis:

Denken Sie daran, diese Hacks immer auf der bereitgestellten Live-Testseite zu testen, bevor Sie sie auf Ihrem Gerät implementieren Website. Stellen Sie sicher, dass die Testseite wie vorgesehen funktioniert und vermeiden Sie potenzielle CSS-Konflikte.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Stile ausschließlich auf Safari anwenden und gleichzeitig Konflikte mit anderen Browsern vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!