Come applicare regole CSS specifiche solo a Chrome?

C'è un modo per applicare il seguente CSS a uno specifico divsolo in Google Chrome?

position:relative;
top:-2px;

Soluzione CSS

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

Soluzione JavaScript

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}

Come sappiamo, Chrome è un browser Webkit , Safari è anche un browser Webkit e anche Opera, quindi è molto difficile scegliere come target Google Chrome, utilizzando query multimediali o hack CSS, ma Javascript è davvero più efficace.

Ecco il pezzo di codice Javascript che avrà come target Google Chrome 14 e versioni successive,

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

e di seguito è riportato un elenco di hack del browser disponibili, per Google Chrome incluso il browser influenzato, da quell'hack

Hack WebKit:

.selector:not(*:root) {}

• Google Chrome : tutte le versioni
• Safari : tutte le versioni
• Opera : 14 e successive
• Android : tutte le versioni

Supporta gli hack:

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

Google Chrome 28 e Google Chrome> 28, Opera 14 e Opera> 14

• Google Chrome : 28 e successivi
• Opera : 14 e successive

Hack di proprietà / valore:

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

Google Chrome 28 e Google Chrome <28, Opera 14 e Opera> 14 e Safari 7 e inferiore a 7. - Google Chrome : 28 e precedenti - Safari : 7 e precedenti - Opera : 14 e successivi

Hack JavaScript: 1

var isChromium = !!window.chrome;

• Google Chrome : tutte le versioni
• Opera : 14 e successive
• Android : 4.0.4

Hack JavaScript: 2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

• Google Chrome : tutte le versioni
• Safari : 3 e successivi
• Opera : 14 e successive

Hack JavaScript: 3

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

• Google Chrome : 14 e successivi

Hack di media query: 1

@media \\0 screen {}

• Google Chrome : da 22 a 28
• Safari : 7 e successivi

Hack di media query: 2

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

• Google Chrome : 29 e successivi
• Opera : 16 e successive

Per ulteriori informazioni visitare questo sito web

Un aggiornamento per Chrome> 29 e Safari> 8:

Safari ora supporta anche la @supportsfunzione. Ciò significa che quegli hack sarebbero validi anche per Safari.

io raccomanderei

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

/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  p {
    color: red;
  }
}

Questo selettore del browser CSS può aiutarti. Guarda.

CSS Browser Selector è un javascript molto piccolo con una sola riga che abilita i selettori CSS. Ti dà la possibilità di scrivere codice CSS specifico per ogni sistema operativo e ogni browser.

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

Applica regole CSS specifiche a Chrome solo utilizzando .selector:not(*:root)con i tuoi selettori:

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}

<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>

Non mi sono mai imbattuto in un'istanza in cui ho dovuto eseguire un hack CSS solo per Chrome fino ad ora. Tuttavia, ho trovato questo per spostare il contenuto sotto una presentazione dove era chiaro: entrambi; non ha influenzato nulla in Chrome (ma ha funzionato bene ovunque, anche in 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;
    }

se vuoi possiamo aggiungere una classe a un browser specifico vedi [fiddle link] [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>

Sto usando un sass mixin per gli stili chrome, questo è per Chrome 29+prendere in prestito la soluzione di Martin Kristiansson sopra.

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

Usalo in questo modo:

@include chrome-styles {
  .header { display: none; }
}

Chrome non fornisce condizionali propri per impostare definizioni CSS solo per questo! Non dovrebbe essere necessario farlo, poiché Chrome interpreta i siti Web come definito negli standard w3c.

Quindi, hai due possibilità significative:

1. Ottieni il browser corrente da javascript ( guarda qui )
2. Ottieni il browser corrente da php / serverside ( guarda qui )

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

controlla this.it funziona per me.

Così semplice. Basta aggiungere una seconda classe o id al tuo elemento al momento del caricamento che specifica di quale browser si tratta.

Quindi, fondamentalmente nel front-end, rileva il browser, quindi imposta id / classe e il tuo css verrà definito utilizzando quei nomi specifici del browser