Come applicare regole CSS specifiche solo a Chrome?

C’è un modo per applicare il seguente CSS a un div specifico solo 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 sotto c’è un elenco di hack del browser disponibile, per il Chrome di Google incluso il browser influenzato, da quel trucco

WebKit mod:

 .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 versioni successive
  • Opera : 14 e successive

Hack proprietà / valore:

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

Google Chrome 28 e Google Chrome <28, Opera 14 e Opera> 14 e Safari 7 e Meno di 7. – Google Chrome : 28 e precedentiSafari : 7 e precedentiOpera : 14 e versioni successive

Hack di JavaScript: 1

 var isChromium = !!window.chrome; 
  • Google Chrome : tutte le versioni
  • Opera : 14 e successive
  • Android : 4.0.4

Hacks JavaScript: 2 {Webkit}

 var isWebkit = 'WebkitAppearance' in document.documentElement.style; 
  • Google Chrome : tutte le versioni
  • Safari : 3 e successivi
  • Opera : 14 e successive

Hack di JavaScript: 3

 var isChrome = !!window.chrome && !!window.chrome.webstore; 
  • Google Chrome : 14 e versioni successive

Media Query Hacks: 1

 @media \\0 screen {} 
  • Google Chrome : dal 22 al 28
  • Safari : 7 e successivi

Media Query Hacks: 2

 @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} } 
  • Google Chrome : 29 e versioni successive
  • Opera : 16 e successive

Per maggiori informazioni visita questo sito

Un aggiornamento per chrome> 29 e Safari> 8:

Safari ora supporta anche la funzione @supports . Ciò significa che tali 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 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.

Non ho mai imbattuto in un’istanza in cui ho dovuto fare un hacking css Chrome-only fino ad ora. Tuttavia, ho trovato questo per spostare il contenuto sotto una presentazione dove chiaro: entrambi; influenzato nulla in Chrome (ma ha funzionato bene ovunque – anche 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; } 

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 selettori:

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

Chrome non fornisce i propri condizionali per impostare le definizioni CSS solo per questo! Non dovrebbe esserci la necessità di farlo, perché 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 / serveride ( guarda qui )
 /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { /*your rules for chrome*/ #divid{ position:relative; top:-2px; } } 

controlla questo lavoro per me.

se vuoi possiamo aggiungere una class a uno specifico brwoser vedi [collegamento fiddle] [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; } 
   

Sto usando un sass mixin per gli stili di Chrome, questo è per Chrome 29+ prendendo 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; } } 

Cosi ‘semplice. Basta aggiungere una seconda class o id all’elemento in fase di caricamento che specifica quale browser è.

Quindi, fondamentalmente al front-end, rileva il browser, quindi imposta id / class e il tuo css verrà definito usando tali nametags specifici del browser