如何使用 CSS Hacks 只設定 Safari 的樣式？

僅針對 Safari 的 CSS 駭客

為什麼要為 Safari 單獨設定樣式？

CSS 駭客通常用於針對特定目標用於樣式目的的瀏覽器。在這種情況下，我們的目標是僅將樣式套用至 Safari，不包括 Chrome 等其他瀏覽器。

目前駭客的無效性

如原文中所提到的， @media screen 和(-webkit-min-device-pixel-ratio:0) 駭客攻擊已經影響了Safari 和Chrome。

Safari 的更新解決方案

但是，這裡有一些新的 CSS hack，專門針對Safari：

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

    }
}}

用法

要將這些樣式專門應用於 Safari 中的元素，請使用 safari_only類，例如this:

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

注意：

在實現這些 hack 時使用自訂類別名稱至關重要，以避免出現意想不到的後果。此外，請注意，這些 hack 可能並非在所有情況下都有效，特別是當網站使用 CSS 過濾器或編譯器時，因為它們可能會改變或刪除 hack。

以上是如何使用 CSS Hacks 只設定 Safari 的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！