appliquant des règles CSS spécifiques à Chrome exclusivement

pour répondre au moteur de rendu unique de Google Chrome, il est souvent nécessaire d'appliquer les règles CSS exclusivement à lui. Un exemple consiste à ajuster la position d'un élément div.

solution CSS:

Tiretant les préfixes du fournisseur, vous pouvez cibler les styles spécifiques au chrome comme suit:

• pour Chrome, Safari, Edge, and Firefox:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  div {
    top: 10px;
  }
}

• pour Chrome 29 (prend en charge les valeurs DPI fractionnaires)

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  div {
    top: 0px;
  }
}

• pour Chrome 22-28:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector {
    -chrome-only(top: 0px);
  }
}

solution JavaScript:

En tant qu'alternative à CSS, vous pouvez utiliser JavaScript pour détecter le navigateur Chrome et modifier le style du div en conséquence:

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // Modify the div's top position here
}