Comment puis-je appliquer des styles CSS exclusivement à Safari tout en évitant les conflits avec d'autres navigateurs ?

Est-il possible de styliser du contenu exclusivement pour Safari ?

Problème :

Vous' J'ai du mal à trouver du CSS qui affecte uniquement Safari, car les méthodes précédentes ont également un impact sur Chrome en raison du fait que les deux navigateurs utilisent actuellement WebKit. Les différents alignements dans Safari et Chrome rendent le style particulièrement difficile.

Solution :

/* Safari 7.1+ */

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

  color:#0000FF;    /* Example text color */
  background-color:#CCCCCC;   /* Example background color */

}

Alternativement, pour Safari 10.1 et supérieur, utilisez :

/* Safari 10.1+ */

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

    .safari_only { 

        /* CSS styles */

    }
}}

ou

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

        /* CSS styles */

    }
}}

Pour Safari 6.1 à 10.0, utiliser :

/* 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 { 

        /* CSS styles */

    }
}}

Des hacks supplémentaires pour des versions spécifiques de Safari peuvent être trouvés dans la réponse fournie.

Utilisation :

<div>

Remarque :

N'oubliez pas de toujours tester ces hacks sur la page de test en direct fournie avant de les implémenter sur votre site web. Assurez-vous que la page de test fonctionne comme prévu, en éliminant les conflits CSS potentiels.

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!