Gibt es einen Google Chrome-exklusiven CSS-Hack?

Ist es ein Google-Chrome-only-CSS-hack?
Und siehe da, Mozilla liest es richtig zu. Ich suchte zehn mal mehr aber es kam nichts, also hier bin ich.

InformationsquelleAutor der Frage Sandy | 2012-05-30

css google-chrome

30

Sicher ist:
```
@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
    #element { properties:value; } 
}
```
Und ein wenig Geige zu sehen, Sie in Aktion - http://jsfiddle.net/Hey7J/

Muss hinzufügen, tho... dies ist in der Regel eine schlechte Praxis, man sollte es nicht wirklich an dem Punkt, wo Sie beginnen müssen, einzelne browser-hacks, um Sie mit CSS arbeiten. Versuchen Sie es mit reset-Stylesheets am Anfang Ihres Projekts, um dies zu vermeiden.

Auch, diese hacks sind möglicherweise nicht zukunftssicher.

InformationsquelleAutor der Antwort Alex

Arbeiten nur chrome oder safari, probieren Sie es aus:

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

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

InformationsquelleAutor der Antwort revton

Nur Chrome CSS-hack:

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

InformationsquelleAutor der Antwort Yonatan Ayalon

8

Versuchen, mit der neuen '@unterstützt " - Funktion, hier ist ein guter hack, die Ihnen gefallen könnten:

* UPDATE!!! * Microsoft Rand und Safari 9 hinzugefügte Unterstützung für das @ - unterstützt die Funktion im Herbst 2015, auch Firefox -- so, hier ist meine aktualisierte version für Sie:
```
/* 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; } 
}
```
Mehr Infos dazu hier (die Umkehrung... von Safari, aber nicht Chrome): [ gibt es einen css hack für safari nur NICHT chrome? ]

Den vorherigen CSS-Hack [vor der Rand-und Safari-9 oder neuere Firefox-Versionen]:
```
/* Chrome 28+ (now also Microsoft Edge, Firefox, and Safari 9+) */

@supports (-webkit-appearance:none) { .selector { color:red; } }
```
Dieser arbeitete für (nur) chrome version 28 und höher.

(Die oben genannten chrome 28+ hack war nicht eine meiner Kreationen. Ich fand diese auf der web-und da war es so gut, ich schickte es an BrowserHacks.com vor kurzem, es gibt noch andere kommen.)

August 17th, 2014 update: Wie ich bereits erwähnte, habe ich die Arbeit auf mehr Versionen von chrome (und vielen anderen Browsern), und hier ist eine, die ich gestaltete, Griffe Chrom 35 und höher.
```
/* Chrome 35+ */

_::content, _:future, .selector:not(*:root) { color:red; }
```
Unten In den Kommentaren erwähnt wurde von @BoltClock über Zukunft, Vergangenheit, nicht... etc... Wir können in der Tat nutzen Sie, um zu gehen ein wenig weiter hinten in Chrom Geschichte.

So, dann ist dies eine, die auch funktioniert, aber nicht "Chrome-only", das ist, warum ich nicht hier. Haben Sie immer noch zu trennen, die von einem Safari-only-hack um den Vorgang abzuschließen. Ich habe die css-hacks zu tun, diese ist jedoch nicht zu befürchten. Hier sind ein paar von Ihnen, beginnend mit dem einfachsten:
```
/* Chrome 26+, Safari 6.1+ */

_:past, .selector:not(*:root) { color:red; }
```
Oder stattdessen eine, die geht zurück zu Chrome 22 und neueren, aber in Safari als auch...
```
/* 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; } 
}
```
Den block von Chrome-Versionen 22-28 (komplizierter, aber funktioniert gut) sind auch möglich, den Gegner über eine Kombination, die ich ausgearbeitet:
```
/* Chrome 22-28 (Only!) */

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

       color:red; 

    );}
}
```
Jetzt follow-up mit dieser kommenden paar, die ich auch erstellt, dass die Ziele von Safari 6.1+ (nur) um noch separat Chrome und Safari. Aktualisiert 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; } 
```
Also, wenn Sie eines der " Chrome+Safari hacks oben, und dann den Safari 6.1-7 und 8-hacks in Ihrem Stile nacheinander, Sie haben Chrom-Elemente in rot-und Safari-Elemente in blau.

InformationsquelleAutor der Antwort Jeff Clayton

Könntest du javascript verwenden. Die anderen Antworten bisher scheinen sich auch auf Safari.

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

InformationsquelleAutor der Antwort Jayden Lawson

0

Habe ich gefunden, diese funktioniert NUR in Chrome (wo es rot ist) und nicht Safari und alle anderen Browser (wo es grün ist)...
```
.style {
color: green;
(-bracket-:hack;
    color: red;
);
}
```
Vom http://mynthon.net/howto/webdev/css-hacks-for-google-chrome.htm

InformationsquelleAutor der Antwort atype

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.