Existe-t-il un moyen d'appliquer le CSS suivant à un spécifique div
uniquement dans Google Chrome?
position:relative;
top:-2px;
Existe-t-il un moyen d'appliquer le CSS suivant à un spécifique div
uniquement dans Google Chrome?
position:relative;
top:-2px;
Réponses:
Solution CSS
sur 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;
);}
}
Solution JavaScript
if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button
}
data-ng-class
pour angular et ajouté une .chrome
classe avec l'expression JS. A fonctionné comme un charme. Merci
Comme nous le savons, Chrome est un navigateur Webkit , Safari est également un navigateur Webkit, ainsi que Opera, il est donc très difficile de cibler Google Chrome, en utilisant des requêtes multimédias ou des hacks CSS, mais Javascript est vraiment plus efficace.
Voici le morceau de code Javascript qui ciblera Google Chrome 14 et versions ultérieures,
var isChrome = !!window.chrome && !!window.chrome.webstore;
et ci-dessous est une liste des hacks de navigateur disponibles, pour le Google Chrome, y compris le navigateur influencé, par ce hack
.selector:not(*:root) {}
@supports (-webkit-appearance:none) {}
Google Chrome 28 et Google Chrome> 28, Opera 14 et Opera> 14
.selector { (;property: value;); }
.selector { [;property: value;]; }
Google Chrome 28, et Google Chrome <28, Opera 14 et Opera> 14, et Safari 7 et moins de 7. - Google Chrome : 28 et avant - Safari : 7 et avant - Opera : 14 et plus tard
var isChromium = !!window.chrome;
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
var isChrome = !!window.chrome && !!window.chrome.webstore;
@media \\0 screen {}
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
Pour plus d'informations, veuillez visiter ce site Web
@supports (-webkit-appearance:none) { }
travaille maintenant pour MS Edge.
Une mise à jour pour Chrome> 29 et Safari> 8:
Safari prend désormais également en charge la @supports
fonctionnalité. Cela signifie que ces hacks seraient également valables pour Safari.
je recommanderais
@ http://codepen.io/sebilasse/pen/BjMoye
/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
p {
color: red;
}
}
Ce sélecteur de navigateur css peut vous aider. Regarde.
CSS Browser Selector est un très petit javascript avec une seule ligne qui autorise les sélecteurs CSS. Il vous donne la possibilité d'écrire du code CSS spécifique pour chaque système d'exploitation et chaque navigateur.
http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html
Appliquez des règles CSS spécifiques à Chrome uniquement en utilisant .selector:not(*:root)
vos sélecteurs:
div {
color: forestgreen;
}
.selector:not(*:root), .div1 {
color: #dd14d5;
}
<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>
Je n'ai jamais rencontré d'instance où je devais faire un hack css uniquement Chrome jusqu'à présent. Cependant, j'ai trouvé cela pour déplacer le contenu sous un diaporama où il était clair: les deux; n'a rien affecté dans Chrome (mais a bien fonctionné partout ailleurs - même 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;
}
si vous le souhaitez, nous pouvons ajouter une classe à un navigateur spécifique, voir [lien violon] [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>
J'utilise un mixin sass pour les styles chromés, c'est pour Chrome 29+
emprunter la solution de Martin Kristiansson ci-dessus.
@mixin chrome-styles {
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
@content;
}
}
Utilisez-le comme ceci:
@include chrome-styles {
.header { display: none; }
}
Chrome ne fournit pas de conditions propres pour définir des définitions CSS juste pour cela! Cela ne devrait pas être nécessaire, car Chrome interprète les sites Web comme défini dans les normes w3c.
Donc, vous avez deux possibilités significatives:
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*your rules for chrome*/
#divid{
position:relative;
top:-2px;
}
}
vérifier this.it fonctionne pour moi.
Si simple. Ajoutez simplement une deuxième classe ou un identifiant à votre élément au moment du chargement qui spécifie de quel navigateur il s'agit.
Donc, fondamentalement, à l'avant, détectez le navigateur puis définissez l'id / la classe et votre css sera défini à l'aide de ces étiquettes de nom spécifiques au navigateur.