網站導航

zblogPHP模板zbpkf
zblog免費模板zblogfree
zblog模板學習zblogxuexi
zblogPHP仿站zbpfang

有沒有辦法只對Safari應用樣式？

我試圖找到一種方法將CSS應用于Safari，但我找到的一切也適用于Chrome。我知道這兩個瀏覽器目前都是WebKit瀏覽器，但我在Chrome和Safari中遇到了div對齊問題；每種顯示方式不同。

我一直在嘗試使用它，但它也影響了Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
}

有人知道另一個只適用于Safari的嗎？

如果你有困難，并且真的想通過發(fā)表評論來獲得幫助或幫助他人，請發(fā)表你的瀏覽器和設備(MacBook/IPad/等)...帶有瀏覽器和操作系統(tǒng)版本號！)

聲稱這些工作沒有一項是不準確的(實際上甚至是不可能的。)其中許多并不是真正的“黑客”，而是蘋果內置在Safari版本中的代碼。需要更多信息。我很高興你來到這里，我真的希望事情能為你解決。

如果你在你的網站上有問題，請通過下面的鏈接檢查測試網站——如果黑客在那里工作，但不在你的網站上，黑客不是問題——你的網站上有其他事情發(fā)生，通常只是如下所述的CSS沖突，或者可能什么都不工作，但你可能沒有意識到你實際上根本沒有使用Safari。請記住，這些信息是為了幫助人們解決(希望)短期問題。

測試地點:

https://browserstrangeness . bit bucket . io/CSS _ hacks . html # safari

還有鏡子！

https://browserstrangeness.github.io/css_hacks.html#safari

注意:過濾器和編譯器(如SASS引擎)期望標準的“跨瀏覽器”代碼，而不是像這樣的CSS黑客，這意味著他們將重寫、破壞或刪除黑客，因為這不是黑客所做的。其中大部分是非標準代碼，這些代碼經過精心制作，只針對單個瀏覽器版本，如果對它們進行修改，它們將無法工作。如果你想使用它，你必須在任何過濾器或編譯器后加載你選擇的CSS hack。這看起來似乎是理所當然的，但是在那些沒有意識到他們通過運行這種不是為這個目的而設計的軟件來撤銷一個黑客的人中間有很多困惑。

許多人已經注意到，Safari從6.1版本開始發(fā)生了變化。

請注意:如果你在iOS上使用Chrome(現(xiàn)在還有Firefox )(至少在iOS 6.1版本和更新版本中)并且你想知道為什么沒有黑客似乎將Chrome與Safari分開，這是因為Chrome的iOS版本使用Safari引擎。它使用的是Safari hacks，而不是Chrome。更多信息請點擊此處:https://all thingsd . com/2012 06 28/Google s-chrome-for-iOS-is-more-like-a-chrome-plated-apple/Firefox for iOS于2015年秋季發(fā)布。它也能回應Safari的黑客攻擊，但不回應Firefox，和iOS Chrome一樣。

此外:如果你已經嘗試了一個或多個黑客攻擊，但無法讓它們工作，請張貼樣本代碼(最好是測試頁)-你正在嘗試的黑客，以及什么瀏覽器(確切版本！)您正在使用的設備以及您正在使用的設備。沒有額外的信息，我或這里的任何人都不可能幫助你。

通常它只是一個簡單的修復或缺少分號。對于CSS來說，如果不僅僅是CSS錯誤，通常是代碼在樣式表中列出的順序問題。請務必在測試網站上測試黑客。如果它在那里工作，這意味著黑客真的為您的設置工作，但這是需要解決的其他問題。這里的人真的很樂意幫忙，或者至少給你指出正確的方向。

這里有一些技巧供你在Safari的最新版本中使用。

你應該先試試這個，因為它涵蓋了當前的Safari版本，而且是純Safari版本:

這個仍然可以在Safari 16.4中正常工作(2023年春季):

/* Safari 7.1+ */

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

  color:#0000FF; 
  background-color:#CCCCCC; 

}

為了覆蓋更多的版本，6.1和更高版本，此時你必須使用下一對css hacks。適用于6.1-10.0的版本與適用于10.1及以上版本的版本相匹配。

這是我為Safari 10.1+設計的一個:

雙重介質查詢在這里很重要，不要刪除它。

/* Safari 10.1+ */

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

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

如果SCSS或其他工具集無法處理嵌套媒體查詢，請嘗試以下方法:

/* Safari 10.1+ (alternate method) */

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

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

下一個版本適用于6.1-10.0，但不適用于10.1(2017年3月下旬更新)

這個黑客是我通過結合多個其他黑客，經過幾個月的測試和實驗創(chuàng)建的。

注意:如上所述，雙重媒體查詢不是偶然的——它排除了許多不能處理媒體查詢嵌套的舊瀏覽器。-一個“和”后面缺少的空格也很重要。這畢竟是一次黑客攻擊...也是目前唯一一款適用于6.1及所有更新Safari版本的。也要知道，正如下面的評論中所列，黑客是非標準的css，必須在過濾器后應用。諸如SASS引擎之類的過濾器將重寫/撤銷或完全刪除它。

如上所述，請檢查我的測試頁面，看看它是如何工作的(沒有修改！)

這是代碼:

/* 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 CSS，請繼續(xù)閱讀下面的內容。

/* Safari 11+ */

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

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

一個用于Safari 11.0:

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

一個用于Safari 10.0:

/* Safari 10.0 (not 10.1) */

_::-webkit-:host:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

稍加修改適用于10.1版(僅限):

/* Safari 10.1 */

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

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Safari 10.0(非iOS設備):

/* Safari 10.0 (not 10.1) but not on iOS */

_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Safari 9 CSS技巧:

針對Safari 9.0及更高版本的簡單支持功能查詢:

@supports (-webkit-hyphens:none)
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

Safari 9.0及以上版本的簡單下劃線破解:

_:not(a,b), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

另一個適用于Safari 9.0及更高版本:

/* Safari 9+ */

_:default:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

另一個支持功能查詢也是如此:

/* Safari 9+, < 13.1 */

@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}

一個用于Safari 9.0-10.0:

/* Safari 9.0-10.0 (not 10.1) */

_::-webkit-:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Safari 9現(xiàn)在包含了功能檢測，所以我們現(xiàn)在可以使用它了...

/* Safari 9 */

@supports (overflow:-webkit-marquee) and (justify-content:inherit) 
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

現(xiàn)在只針對iOS設備。如上所述，由于iOS上的Chrome植根于Safari，它當然也擊中了那個。

/* Safari 9.0 (iOS Only) */

@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

一個適用于Safari 9.0以上版本，但不適用于iOS設備:

/* Safari 9+ (non-iOS) */

_:default:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

一個用于Safari 9.0-10.0，但不用于iOS設備:

/* Safari 9.0-10.0 (not 10.1) (non-iOS) */

_:-webkit-full-screen:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

下面是區(qū)分6.1-7.0和7.1+的方法為了獲得正確的結果，還需要多種攻擊的組合:

/* Safari 6.1-7.0 */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{  
   .safari_only {(;

      color:#0000FF; 
      background-color:#CCCCCC; 

    );}
}

既然我已經指出了屏蔽iOS設備的方法，下面是針對非iOS設備的Safari 6.1+ hack的修改版:

/* Safari 6.1-10.0 (not 10.1) (non-iOS) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    _:-webkit-full-screen, .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

要使用它們:

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

通常(就像這個問題)人們問Safari hacks的原因是主要是指將其從谷歌Chrome中分離出來(同樣不是iOS！) 發(fā)布替代方案可能很重要:如何單獨定位Chrome 也是從Safari下載的，所以我在這里提供給你，以防需要。

這里是基本的，再次檢查我的測試頁的許多具體版本的鉻，但這些涵蓋了鉻的一般。Chrome是版本45，Dev和Canary版本目前是版本47。

我放在browserhacks上的舊媒體查詢組合仍然只適用于Chrome 29+:

/* Chrome 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
    .chrome_only {

       color:#0000FF; 
       background-color:#CCCCCC; 

    }
}

@supports特性查詢也適用于Chrome 29+...下面是我們?yōu)镃hrome 28+使用的版本的修改版。Safari 9、即將推出的Firefox瀏覽器和Microsoft Edge瀏覽器都不在此列:

/* Chrome 29+ */

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
    .chrome_only {

       color:#0000FF; 
       background-color:#CCCCCC; 

    }
}

以前，Chrome 28和更新的版本很容易成為目標。這是我發(fā)送給browserhacks的一個例子，在我看到它包含在一個其他CSS代碼塊中(最初不是打算作為CSS hack)并意識到它的作用后，我提取了相關部分用于我們的目的:

[注意:]下面這個老方法現(xiàn)在pics up Safari 9和微軟Edge瀏覽器沒有上面的更新。即將到來的Firefox和微軟Edg e版本在編程中增加了對多webkit- CSS代碼的支持，Edge和Safari 9都增加了對@supports功能檢測的支持。Chrome和Firefox之前包含了@supports。

/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */

@supports (-webkit-appearance:none) 
{
    .chrome_and_safari {

       color:#0000FF; 
       background-color:#CCCCCC; 

    }
}

Chrome版本22-28(如果需要支持舊版本的話)也有可能成為我在上面發(fā)布的Safari combo黑客攻擊的目標:

/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0)
{
    .chrome_only {-chrome-:only(;

       color:#0000FF; 
       background-color:#CCCCCC; 

    );}
}

NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;

與上面的Safari CSS格式化技巧一樣，這些技巧可以如下使用:

<div class="chrome_only">This text will be Blue in Chrome</div>

所以你不必在這個帖子中搜索它，這里是我的現(xiàn)場測試頁面:

https://browserstrangeness . bit bucket . io/CSS _ hacks . html # safari

[或鏡子]

https://browserstrangeness.github.io/css_hacks.html#safari

測試頁面還有許多其他的東西，特別是基于版本的幫助您區(qū)分Chrome和Safari，以及許多針對Firefox、Microsoft Edge和Internet Explorer web瀏覽器的黑客。

注意:如果有些東西對你不起作用，首先檢查測試頁面，但是提供示例代碼和你正在嘗試的黑客技術，以便有人幫助你。

有一種方法可以從Chrome中過濾Safari 5+:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }

    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}

僅薩拉里

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}

這個黑客100%只對safari 5.1-6.0有效。我剛剛成功地測試了它。

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome, .yourcssrule {
        your css property
    }
}

在iOS 16和macOS Ventura上工作:

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  .body {
    background-color: red;
  }
}

當使用這個safari專用過濾器時，我可以針對Safari (iOS和Mac)，但排除Chrome(和其他瀏覽器):

@supports (-webkit-backdrop-filter: blur(1px)) {
  .safari-only {
    background-color: rgb(76,80,84);
  }
}

對于那些想為Safari 7.0及以下版本實現(xiàn)hack，而不是7.1及以上版本的人，請使用:

.myclass { (;property: value;); }
.myclass { [;property: value;]; }

將您的類替換為(。myClass)

/*僅限Safari 。myClass:not(:root:root) { 在此輸入代碼 }

我喜歡用下面的方法:

var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) { 
  $('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">') 
};

順便說一句，對于那些只需要在手機上使用Safari的人來說，只需在這個黑客中添加一個媒體查詢:

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

別忘了加上。safari_only類添加到您要定位的元素，例如:

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>

這是可行的:

@media not all and (min-resolution:.001dpcm) { 
  @media {
    /* your code for Safari Desktop & Mobile */
    body {
      background-color: red;
      color: blue;
    }
    /* end */
  }
}

https://www . Bram . us/2021/06/23/CSS-at-supports-rules-to-target-only-Firefox-safari-chromium/# safari

@supports (background: -webkit-named-image(i)) {
// 
}

h1::after {
  content: "No";
  margin-left: .3em;
  color: red;
}

@supports (background: -webkit-named-image(i)) {
  h1::after {
    content: "Yes";
    color: green;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <h1>Safari?</h1>

</body>
</html>

注意:如果只有iOS就足夠了(如果你愿意犧牲Safari桌面)，那么這是可行的:

@supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }

嗨，我做了這個，它對我很有效

@media(max-width: 1920px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 5.5% !important;
        }
    }
}

@media(max-width: 1680px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 15% !important;
        }

    }
}

@media(max-width: 1600px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 18% !important;
        }

    }
}


@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 24.5% !important;
        }

    }

}


@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
    @media {
        .photo_row2 {
            margin-left: -11% !important;
        }

    }

}

第一步:使用https://modernizr.com/

第二步:使用html類。僅選擇Safari的區(qū)域

a { color: blue; }
html.regions a { color: green; }

Modernizr將根據當前瀏覽器支持的內容向DOM添加html類。Safari支持區(qū)域http://caniuse.com/#壯舉= CSS-區(qū)域，而其他瀏覽器不支持(無論如何)。這種方法在選擇不同版本的IE時也非常有效。愿原力與你同在。

您可以使用媒體查詢工具從其他瀏覽器中選擇Safari 6.1-7.0。

@media \\0 screen {}

聲明:此次黑客攻擊也針對舊版本的Chrome(2013年7月之前)。

如果你正在尋找Safari瀏覽器黑客

我試過了，它對我有效(只對Safari有效)

@supports (-webkit-hyphens:none){
        @content
}
    
@media not all and (min-resolution:.001dpcm)
    { @supports (-webkit-appearance:none) and (stroke-color:transparent) {
            @content
    }
}

最后，我用了一點JavaScript來實現(xiàn)它:

if (navigator.vendor.startsWith('Apple'))
    document.documentElement.classList.add('on-apple');

然后在我的CSS目標蘋果瀏覽器引擎的選擇器將是:

.on-apple .my-class{
    ...
}

它在safari中100%工作..我試過了

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
::i-block-chrome, Class Name {your styles}
}

我已經測試過了，它對我有效

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}

上一篇vue.use報錯

下一篇c 空json對象為空

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

網站導航

網站導航

網站分類

有沒有辦法只對Safari應用樣式？

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

網站導航

網站導航

網站分類

有沒有辦法只對Safari應用樣式？

相關文章