Comment puis-je cibler les règles CSS spécifiques à Chrome ?

Comment cibler les règles CSS spécifiques à Chrome

Lors de la personnalisation d'éléments Web avec CSS, vous pouvez rencontrer des situations dans lesquelles vous devez appliquer des styles spécifiques à certains éléments DOM uniquement dans le navigateur Chrome. Voici quelques solutions pour y parvenir :

Solution CSS

1. Webkit Media Query : Chrome utilise le préfixe "-webkit" pour bon nombre de ses propriétés CSS . Vous pouvez cibler des styles spécifiques à Chrome à l'aide de la requête média "-webkit-min-device-pixel-ratio" comme indiqué ci-dessous :

/* Chrome, Safari, Edge, Firefox */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

2. Requête média spécifique à Chrome : Pour les versions 29 de Chrome, vous pouvez utiliser la requête multimédia suivante pour cibler Chrome uniquement :

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

3. Syntaxe CSS spécifique à Chrome (Chrome 22-28) : Dans les versions 22 à 28 de Chrome, vous pouvez utiliser le "-chrome- Syntaxe :only" pour cibler des éléments spécifiques dans le navigateur :

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

JavaScript Solution

Vous pouvez également utiliser JavaScript pour vérifier si un navigateur est Chrome et appliquer les styles souhaités en conséquence :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!