如何僅將特定 CSS 規則套用至 Google Chrome？

將特定CSS 規則應用於Chrome：技術和解決方案

根據所使用的瀏覽器定位網頁中的特定元素可以提供增強的使用者體驗並優化網站效能。其中一個場景涉及僅在 Google Chrome 中將 CSS 樣式套用至特定 div。

CSS 解決方案

要實現此目的，您可以使用帶有特定-webkit- 的媒體查詢前綴，如以下程式碼所示：

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

此查詢針對最小像素比為0 的設備，有效地將其應用限制為Chrome，而非特定瀏覽器不受影響。

此外，可以使用-webkit-min-device-pixel-ratio 和min-resolution 屬性來定位更特定版本的Chrome：

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

對於Chrome版本22-28，可以22-28，可以使用-chrome-字首：

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

JavaScript解決方案

或者，您可以使用JavaScript 來檢查使用者瀏覽器中是否存在Chrome：

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

此方法提供了一個根據瀏覽器動態套用CSS 樣式的選項類型。但它需要 JavaScript 能力，可能不適合所有場景。

以上是如何僅將特定 CSS 規則套用至 Google Chrome？的詳細內容。更多資訊請關注PHP中文網其他相關文章！