Jak zastosować określone reguły CSS tylko do Chrome?

102

Czy istnieje sposób na zastosowanie następującego kodu CSS do określonego divtylko w Google Chrome?

position:relative;
top:-2px;
user1213707
źródło
1
Jaki masz problem, który zmusza cię do tego? Kierowanie na reguły CSS dla konkretnych przeglądarek nie jest świetnym projektem iw większości przypadków nie powinno być już potrzebne.
Pekka,
@Pekka to jest mój problem stackoverflow.com/questions/9311965/ ... i stwierdziłem, że jedynym rozwiązaniem jest dodanie tych, ale tylko dla Chrome, proszę o pomoc :(
user1213707
Czy odpowiedź na Twoje pierwotne pytanie nie pomogła?
Pekka,
2
Osobiście tworzę dla Chrome (który zwykle kopiuje do Firefoksa) i na końcu martwię się o IE.
SpaceBeers,

Odpowiedzi:

196

Rozwiązanie CSS

z https://jeffclayton.wordpress.com/2015/08/10/1279/

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

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

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

Rozwiązanie JavaScript

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}
Martin Kristiansson
źródło
16
Ta reguła będzie miała zastosowanie zarówno do Safari, jak i Chrome
Miuranga
1
@AlirezaNoori prawdopodobnie dlatego, że dotyczy zarówno Chrome, jak i Safari, a nie tylko Chrome.
thom_nic
2
Działa również w przeglądarce IE Edge, sprawdź to jeffclayton.wordpress.com/2015/08/10/1279
llamerr
1
Użyłem data-ng-classdla angular i dodałem .chromeklasę z wyrażeniem JS. Działał jak urok. Dzięki
Kraken
1
Zauważyłem, że pomogło to, aby zapytania medialne znajdowały się na dole.
Brownrice
27

Jak wiemy, Chrome to przeglądarka Webkit , Safari to także przeglądarka Webkit, a także Opera, więc bardzo trudno jest kierować reklamy na Google Chrome, używając zapytań o media lub hacków CSS, ale Javascript jest naprawdę skuteczniejszy.

Oto fragment kodu Javascript, który będzie przeznaczony dla przeglądarki Google Chrome 14 i nowszych,

  var isChrome = !!window.chrome && !!window.chrome.webstore;

a poniżej znajduje się lista dostępnych hacków przeglądarki, dla Google Chrome, w tym przeglądarki, na którą wpłynął ten hack

Hack do WebKit:

.selector:not(*:root) {}
  • Google Chrome : wszystkie wersje
  • Safari : wszystkie wersje
  • Opera : 14 i później
  • Android : wszystkie wersje

Obsługuje hacki:

@supports (-webkit-appearance:none) {}

Google Chrome 28 i Google Chrome> 28, Opera 14 i Opera> 14

  • Google Chrome : 28 i później
  • Opera : 14 i później

Hacki dotyczące własności / wartości:

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

Google Chrome 28 i Google Chrome <28, Opera 14 i Opera> 14 oraz Safari 7 i mniej niż 7. - Google Chrome : 28 i wcześniej - Safari : 7 i wcześniej - Opera : 14 i później

Hacki JavaScript: 1

var isChromium = !!window.chrome;
  • Google Chrome : wszystkie wersje
  • Opera : 14 i później
  • Android : 4.0.4

Hacki JavaScript: 2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;
  • Google Chrome : wszystkie wersje
  • Safari : 3 i później
  • Opera : 14 i później

Hacki JavaScript: 3

var isChrome = !!window.chrome && !!window.chrome.webstore;
  • Google Chrome : 14 i później

Hacki dotyczące zapytań o media: 1

@media \\0 screen {}
  • Google Chrome : od 22 do 28
  • Safari : 7 i później

Hacki dotyczące zapytań o media: 2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
  • Google Chrome : 29 i później
  • Opera : 16 i później

Aby uzyskać więcej informacji, odwiedź tę witrynę internetową

Hbirjand
źródło
jak powiedział Sebastian @supports (-webkit-wyglądy: brak) {} dotyczy Safari, testowano w wersji 10
Dmitrii Malyshev
1
@supports (-webkit-appearance:none) { }pracuje teraz dla MS Edge.
Vadim Ovchinnikov
@media all i (-webkit-min-device-pixel-ratio: 0) i (min-resolution: .001dpcm) {.selector {}} mają teraz wpływ również na Firefoksa
Joe Salazar
13

Aktualizacja dla Chrome> 29 i Safari> 8:

Safari obsługuje teraz @supports funkcję. Oznacza to, że te hacki będą również ważne dla Safari.

Chciałbym polecić

@ http://codepen.io/sebilasse/pen/BjMoye

/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  p {
    color: red;
  }
}
sebilasse
źródło
4
Dla mnie tekst jest również czerwony w FireFox.
Kerry7777
9

Ten selektor przeglądarki CSS może ci pomóc. Spójrz.

Selektor przeglądarki CSS to bardzo mały skrypt javascript zawierający tylko jedną linię, która umożliwia selektor CSS. Daje możliwość napisania określonego kodu CSS dla każdego systemu operacyjnego i każdej przeglądarki.

tarashish
źródło
Deklaracja „selektor przeglądarki css” jest nieco myląca dla prostego kodu JavaScript. Sam CSS nie obsługuje żadnych wyborów dokonywanych przez przeglądarki!
Armin
Przepraszam, ale tak to nazwał jego twórca. Właśnie go zacytowałem :(
tarashish
Bardzo ponura fraza autora ;-)
Armin
1
tak, nie chcę dodawać całego zestawu plików js tylko po to :( ale w przeciwnym razie może być pomocne.
Jamie Hutber
Głównym problemem jest to, że staje się kruchym pojedynczym punktem awarii, ponieważ jest zależny od jednego dedykowanego programisty i że trzeba by śledzić ich zmiany, aby być na bieżąco. Zasadniczo wątpliwy sposób radzenia sobie z trwającym problemem, ponieważ może pomóc w krótkim okresie, ale nie rozwiązuje problemu.
Patanjali
7

http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html

Zastosuj określone reguły CSS do Chrome tylko za pomocą .selector:not(*:root)swoich selektorów:

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}
<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>

CodeGust
źródło
2
Ten hack zadziałał dla mnie. Rozwiązania, które polegały na rozdzielczości ekranu, dotyczyły również Firefoksa.
Steve Breese
@stevebreese Zauważyłem to, podejrzewam, że jest to tylko dla nowoczesnych przeglądarek.
Shasha
3

Do tej pory nigdy nie natknąłem się na wystąpienie, w którym musiałem zrobić hack CSS tylko dla Chrome. Jednak znalazłem to, aby przenieść zawartość poniżej pokazu slajdów, gdzie jest jasne: oba; nie wpłynęło na nic w Chrome (ale działało dobrze wszędzie - nawet IE!).

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome, if Chrome rule needed */
    .container {
     margin-top:100px;
    }

    /* Safari 5+ ONLY */
    ::i-block-chrome, .container {
     margin-top:0px;
    }
Elaine
źródło
1

jeśli chcesz, możemy dodać klasę do konkretnego przeglądarki, patrz [link do skrzypiec] [1] [1]:

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});
.relative {
  background-color: red;
  height: 30px;
  position: relative;
  width: 30px;
}
.relative .child {
  left: 10px;
  position: absolute;
  top: 4px;
}
.oc {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 500px;
  float:left;
}
.oc1 {
  background: #ddd none repeat scroll 0 0;
  height: 300px;
  position: relative;
  width: 300px;
  float:left;
  margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="relative">
<span class="child"></span>
</div>
<div class="oc">
<div class="data"> </div>
</div>
<div class="oc1" style="display: block;">
<div class="data"> </div>
</div>

neel upadhyay
źródło
1

Używam mieszanki sass do stylów chromowanych, to jest do Chrome 29+pożyczenia rozwiązania od Martina Kristianssona powyżej.

@mixin chrome-styles {
  @media screen and (-webkit-min-device-pixel-ratio:0)
    and (min-resolution:.001dpcm) {
      @content;
  }
}

Użyj tego w ten sposób:

@include chrome-styles {
  .header { display: none; }
}
svnm
źródło
5
Firefox odczytuje teraz również tę regułę, więc nie jest już dobre, jeśli chcesz kierować wyłącznie na Chrome.
Mahn
0

Chrome nie udostępnia własnych warunków warunkowych do ustawiania definicji CSS tylko dla niego! Nie powinno być takiej potrzeby, ponieważ Chrome interpretuje strony internetowe zgodnie ze standardami w3c.

Masz więc dwie znaczące możliwości:

  1. Pobierz aktualną przeglądarkę za pomocą javascript ( patrz tutaj )
  2. Pobierz aktualną przeglądarkę przez php / serveride ( spójrz tutaj )
Armin
źródło
2
Na pewno są powody, dla których chciałbyś zastosować do Chrome, ale nie np. Safari czy Firefox, np. Różnice w sposobie renderowania elementów <select> przez przeglądarki. Rozwiązanie oparte tylko na CSS byłoby o wiele czystsze niż konieczność angażowania kodu po stronie serwera lub klienta.
thom_nic
1
Chrome nie jest doskonały. Podobnie jak każdy inny program, zawiera błędy, w tym w silniku renderującym, a niektóre nie są naprawiane po kilku latach. Dlatego ważne jest, aby móc wykryć Chrome w celu przeciwdziałania skutkom tych błędów. bugs.chromium.org/p/chromium/issues/…
Joe Salazar
0
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

sprawdź to. to działa dla mnie.

ashanrupasinghe
źródło
0

Tak prosty. Po prostu dodaj drugą klasę lub identyfikator do elementu podczas ładowania, który określa, która to przeglądarka.

Więc w zasadzie na początku, wykryj przeglądarkę, a następnie ustaw id / klasę, a twój css zostanie określony przy użyciu tych specyficznych dla przeglądarki znaczników nazw

yan bellavance
źródło