Wie kann ich bestimmte CSS-Regeln nur auf Google Chrome anwenden?

Anwenden spezifischer CSS-Regeln auf Chrome: Techniken und Lösungen

Die Ausrichtung auf bestimmte Elemente in Webseiten basierend auf dem verwendeten Browser kann zu einer verbesserten Benutzererfahrung führen und Optimierung der Website-Performance. Ein solches Szenario beinhaltet die Anwendung von CSS-Stilen auf ein bestimmtes Div nur in Google Chrome.

CSS-Lösung

Um dies zu erreichen, können Sie Medienabfragen mit bestimmten -Webkit- verwenden. Präfixe, wie im folgenden Code gezeigt:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

Diese Abfrage zielt auf Geräte mit einem Mindestpixelverhältnis von 0 ab und beschränkt ihre Anwendung effektiv auf Chrome unspezifische Browser bleiben davon unberührt.

Darüber hinaus können spezifischere Versionen von Chrome mithilfe der Eigenschaften -webkit-min-device-pixel-ratio und min-resolution angesprochen werden:

@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

Für Chrome In den Versionen 22-28 kann das Präfix -chrome- verwendet werden:

@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

JavaScript Lösung

Alternativ können Sie JavaScript verwenden, um zu prüfen, ob Chrome im Browser des Benutzers vorhanden ist:

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // modify button 
}

Dieser Ansatz bietet eine Option zum dynamischen Anwenden von CSS-Stilen basierend auf dem Browser Typ. Es erfordert jedoch JavaScript-Funktionen und ist möglicherweise nicht in allen Szenarien geeignet.

Das obige ist der detaillierte Inhalt vonWie kann ich bestimmte CSS-Regeln nur auf Google Chrome anwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!