Comment puis-je utiliser les hacks CSS pour styliser uniquement Safari ?

Hacks CSS pour cibler Safari uniquement

Pourquoi séparer les styles pour Safari ?

Les hacks CSS sont souvent utilisés pour cibler des navigateurs à des fins de style. Dans ce cas, notre objectif est d'appliquer les styles uniquement à Safari, à l'exclusion des autres navigateurs tels que Chrome.

Inefficacité des hacks actuels

Comme mentionné dans le message d'origine, le L'écran @media et le hack (-webkit-min-device-pixel-ratio:0) affectent à la fois Safari et Chrome.

Solutions mises à jour pour Safari

Cependant, voici plusieurs nouveaux hacks CSS qui cibleront exclusivement Safari :

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

/ Safari 6.1-10.0 (not 10.1) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Utilisation

Pour appliquer ces styles spécifiquement aux éléments de Safari, utilisez l'option classe safari_only comme celle-ci :

<div class="safari_only">This text will be blue in Safari</div>

Remarque :

Il est crucial d'utiliser un nom de classe personnalisé lors de la mise en œuvre de ces hacks pour éviter des conséquences inattendues. De plus, sachez que ces hacks peuvent ne pas fonctionner dans tous les scénarios, surtout si le site Web utilise un filtre ou un compilateur CSS, car ils peuvent modifier ou supprimer les hacks.

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!