有沒有Google Chrome瀏覽器的CSS黑客？

Question

是否有谷歌Chrome瀏覽器的CSS破解？你看，Mozilla也讀得很好。我搜索了十次，但沒有提出什麼，所以我在這裏。

Answer 1

當然是：

@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
    #element { properties:value; } 
} 

還有一點小提琴看到它在行動 - http://jsfiddle.net/Hey7J/

必須加壽...這通常是不好的做法，你真的不應該是在點你開始需要單獨的瀏覽器黑客來讓你的CSS工作。在項目開始時嘗試使用reset style sheets，以避免這種情況。

此外，這些黑客可能不是未來的證明。

Answer 2

若要僅Chrome或Safari，試試吧：

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

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

Answer 3

你可以使用JavaScript。迄今爲止的其他答案似乎也針對Safari。

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { 
    alert("You'll only see this in Chrome"); 
    $('#someID').css('background-position', '10px 20px'); 
} 

Answer 4

只有Chrome的CSS破解：

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
    #selector { 
     background: red; 
    } 
} 

Answer 5

我發現這隻能在Chrome瀏覽器（它是紅色的），而不是Safari和其他瀏覽器（它是綠色的）...

.style { 
color: green; 
(-bracket-:hack; 
    color: red; 
); 
} 

從http://mynthon.net/howto/webdev/css-hacks-for-google-chrome.htm

Answer 6

嘗試使用新的「@supports」功能，這裏是一個不錯的黑客ŧ你可能喜歡的帽子：

*更新！ *微軟邊緣和Safari都9添加支持的@supports在2015年秋季功能，火狐也 - 所以這裏是我的版本更新爲你：在這個位置

/* Chrome 29+ (Only) */ 

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) 
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) { 
    .selector { color:red; } 
} 

更多信息（反... Safari瀏覽器而不是瀏覽器）：is there a css hack for safari only NOT chrome?]

以前的CSS破解[邊緣之前和Safari瀏覽器9或更高版本的Firefox版本]：

/* Chrome 28+ (now also Microsoft Edge, Firefox, and Safari 9+) */ 

@supports (-webkit-appearance:none) { .selector { color:red; } } 

這個工作對（只）鉻，版本28和更新。

（以上鉻28+的手筆不是我的創作之一。我發現這個在網絡上，並因爲它是那麼好，我把它發給BrowserHacks.com最近，有其他人來了。）

八月2014年5月17日更新：正如我所提到的，我一直致力於實現更多版本的Chrome（以及許多其他瀏覽器），並且這是我製作的一款可處理35和更新版本的Chrome。

/* Chrome 35+ */ 

_::content, _:future, .selector:not(*:root) { color:red; } 

在評論下方被@BoltClock未來，過去，不...等...提到我們實際上用它們來再走一回在Chrome的歷史。

那麼這是一個也可以工作，但不是'僅限Chrome'這就是爲什麼我沒有把它放在這裏。您仍然需要通過Safari瀏覽器進行分離才能完成此過程。不過，我已經創建了CSS黑客來做這件事，不用擔心。這裏有幾個人，從最簡單的：

/* Chrome 26+, Safari 6.1+ */ 

_:past, .selector:not(*:root) { color:red; } 

或者代替，這個可以追溯到22鉻和更新，但Safari瀏覽器以及...

/* Chrome 22+, Safari 6.1+ */ 

@media screen and (-webkit-min-device-pixel-ratio:0) 
and (min-resolution:.001dpcm), 
screen and(-webkit-min-device-pixel-ratio:0) 
{ 
    .selector { color:red; } 
} 

的塊Chrome的版本22-28（更復雜，但工作得很好），也可以通過組合我制定了目標：

/* Chrome 22-28 (Only!) */ 

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

     color:red; 

    );} 
} 

現在跟進，這接下來的幾個我還創建了針對Safari瀏覽器6.1以上（只）在爲了直到單獨的Chrome和Safari。 更新包括Safari瀏覽器8

/* Safari 6.1-7.0 */ 

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


/* Safari 7.1+ */ 

_::-webkit-full-page-media, _:future, :root .selector { color:blue; } 

所以如果你把瀏覽器+ Safari瀏覽器的一個以上的黑客，然後Safari的6.1-7在您的樣式8名黑客順序，你將有紅色的Chrome項目，和藍色的Safari項目。