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

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

position:relative;
top:-2px;

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 
}

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ą

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;
  }
}

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.

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>

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;
    }

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>

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; }
}

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 )

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

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