- MISE À JOUR POUR CATALINA & SAFARI 13 (mise à jour début 2020) *
REMARQUE: Les filtres et les compilateurs (tels que le moteur SASS) attendent du code standard `` cross-browser '' - PAS des hacks CSS comme ceux- ci, ce qui signifie qu'ils réécriront, détruiront ou supprimeront les hacks car ce n'est pas ce que font les hacks. Une grande partie de cela est du code non standard qui a été minutieusement conçu pour cibler uniquement les versions de navigateur unique et ne peut pas fonctionner si elles sont modifiées. Si vous souhaitez l'utiliser avec ceux-ci, vous devez charger le hack CSS choisi APRÈS tout filtre ou compilateur . Cela peut sembler acquis, mais il y a eu beaucoup de confusion parmi les gens qui ne se rendent pas compte qu'ils sont en train d'annuler un piratage en l'exécutant via un logiciel qui n'a pas été conçu à cet effet.
Safari a changé depuis la version 6.1, comme beaucoup l'ont remarqué.
Remarque: si vous utilisez Chrome [et maintenant aussi Firefox] sur iOS (au moins dans les versions iOS 6.1 et plus récentes) et que vous vous demandez pourquoi aucun des hacks ne semble séparer Chrome de Safari, c'est parce que la version iOS de Chrome utilise le moteur Safari. Il utilise les hacks Safari et non ceux de Chrome. Plus à ce sujet ici: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox pour iOS est sorti à l'automne 2015. Il répond également à les Safari Hacks, mais aucun de ceux de Firefox, comme iOS Chrome.
AUSSI: Si vous avez essayé un ou plusieurs des hacks et que vous avez du mal à les faire fonctionner, veuillez poster un exemple de code (mieux encore une page de test) - le hack que vous tentez, et quel (s) navigateur (s) (version exacte!) Vous utilisez ainsi que l'appareil que vous utilisez. Sans ces informations supplémentaires, il est impossible pour moi ou pour quiconque ici de vous aider.
Il s'agit souvent d'une simple correction ou d'un point-virgule manquant. Avec CSS, c'est généralement cela ou un problème d'ordre dans lequel le code est répertorié dans les feuilles de style, si ce n'est simplement des erreurs CSS. Veuillez tester les hacks ici sur le site de test. Si cela fonctionne là-bas, cela signifie que le hack fonctionne vraiment pour votre configuration, mais c'est quelque chose d'autre qui doit être résolu. Les gens ici aiment vraiment vous aider, ou du moins vous orienter dans la bonne direction.
Le site de test:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
ET MIROIR!
https://browserstrangeness.github.io/css_hacks.html#safari
Il y a des hacks à utiliser pour les versions plus récentes de Safari.
Vous devriez d'abord essayer celui-ci car il couvre les versions actuelles de Safari et est uniquement Safari:
Celui-ci fonctionne toujours correctement avec Safari 13 (début 2020):
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Pour couvrir plus de versions, 6.1 et plus, à ce stade, vous devez utiliser la prochaine paire de hacks css. Celui pour 6.1-10.0 pour aller avec celui qui gère 10.1 et plus.
Alors - en voici un que j'ai élaboré pour Safari 10.1+:
La double requête média est importante ici, ne la supprimez pas.
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Essayez celui-ci si SCSS ou un autre ensemble d'outils rencontre des problèmes avec la requête multimédia imbriquée:
/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Ce prochain fonctionne pour 6.1-10.0 mais pas 10.1 (mise à jour fin mars 2017)
Ce hack que j'ai créé au cours de nombreux mois de tests et d'expérimentation en combinant plusieurs autres hacks.
REMARQUES: comme ci-dessus, la double requête multimédia n'est PAS un accident - elle exclut de nombreux navigateurs plus anciens qui ne peuvent pas gérer l'imbrication des requêtes multimédia. - L'espace manquant après l'un des «et» est également important. C'est après tout, un hack ... et le seul qui fonctionne pour la version 6.1 et toutes les nouvelles versions de Safari pour le moment. Sachez également que comme indiqué dans les commentaires ci-dessous, le hack est un css non standard et doit être appliqué APRÈS un filtre. Les filtres tels que les moteurs SASS le réécriront / l'annuleront ou le supprimeront complètement.
Comme mentionné ci-dessus, veuillez consulter ma page de test pour la voir fonctionner telle quelle (sans modification!)
Et voici le code:
/* 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;
}
}}
Pour plus de CSS Safari «spécifique à la version», veuillez continuer à lire ci-dessous.
/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Un pour Safari 11.0:
/* Safari 11.0 (not 11.1) */
html >> * .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Un pour Safari 10.0:
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Fonctionne légèrement modifiée pour 10.1 (uniquement):
/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Safari 10.0 (appareils non iOS):
/* Safari 10.0 (not 10.1) but not on iOS */
_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Hacks CSS Safari 9:
Un simple piratage de requête de fonctionnalité pour Safari 9.0 et plus:
@supports (-webkit-hyphens:none)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Un simple hack de soulignement pour Safari 9.0 et plus:
_:not(a,b), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Un autre pour Safari 9.0 et plus:
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
et une autre requête sur les fonctionnalités de support:
/* Safari 9+ */
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Un pour Safari 9.0-10.0:
/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 inclut désormais la détection des fonctionnalités afin que nous puissions l'utiliser maintenant ...
/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Désormais, pour cibler uniquement les appareils iOS. Comme mentionné ci-dessus, puisque Chrome sur iOS est enraciné dans Safari, il frappe bien sûr celui-là également.
/* Safari 9.0 (iOS Only) */
@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
un pour Safari 9.0+ mais pas pour les appareils iOS:
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Et un pour Safari 9.0-10.0 mais pas pour les appareils iOS:
/* Safari 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Vous trouverez ci-dessous des hacks qui séparent les versions 6.1-7.0 et 7.1+.Celles-ci nécessitaient également une combinaison de plusieurs hacks afin d'obtenir le bon résultat:
/* Safari 6.1-7.0 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
.safari_only {(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
Depuis que j'ai indiqué la façon de bloquer les appareils iOS, voici la version modifiée du piratage Safari 6.1+ qui cible les appareils non iOS:
/* Safari 6.1-10.0 (not 10.1) (non-iOS) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
_:-webkit-full-screen, .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Pour les utiliser:
<div class="safari_only">This text will be Blue in Safari</div>
Habituellement [comme dans cette question], la raison pour laquelle les gens posent des questions sur les hacks Safari est principalement en référence à sa séparation de Google Chrome (encore une fois PAS iOS!) Il peut être important de publier l'alternative: comment cibler Chrome séparément de Safari également, donc Je vous le fournis ici au cas où cela serait nécessaire.
Voici les bases, vérifiez à nouveau ma page de test pour de nombreuses versions spécifiques de Chrome, mais celles-ci couvrent Chrome en général. Chrome est la version 45, les versions Dev et Canary sont jusqu'à la version 47 pour le moment.
Mon ancien combo de requêtes multimédias que j'ai mis sur les hacks de navigateur fonctionne toujours uniquement pour Chrome 29+:
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Une requête de fonctionnalité @supports fonctionne également bien pour Chrome 29+ ... une version modifiée de celle que nous utilisions pour Chrome 28+ ci-dessous. Safari 9, les navigateurs Firefox à venir et le navigateur Microsoft Edge ne sont pas pris en charge avec celui-ci:
/* Chrome 29+ */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Auparavant, Chrome 28 et les versions ultérieures étaient faciles à cibler. C'est celui que j'ai envoyé à browserhacks après l'avoir vu inclus dans un bloc d'un autre code CSS (pas initialement conçu comme un hack CSS) et réalisé ce qu'il fait, alors j'ai extrait la partie pertinente pour nos besoins:
[REMARQUE:] Cette ancienne méthode ci-dessous illustre maintenant Safari 9 et le navigateur Microsoft Edge sans la mise à jour ci-dessus. Les versions à venir de Firefox et Microsoft Edge ont ajouté la prise en charge de plusieurs codes CSS -webkit- dans leur programmation, et Edge et Safari 9 ont ajouté la prise en charge de la détection des fonctionnalités @supports. Chrome et Firefox incluaient précédemment @supports.
/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */
@supports (-webkit-appearance:none)
{
.chrome_and_safari {
color:#0000FF;
background-color:#CCCCCC;
}
}
Le bloc des versions Chrome 22-28 (si nécessaire pour prendre en charge les anciennes versions) est également possible de cibler avec une torsion sur mes hacks combo Safari que j'ai postés ci-dessus:
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.chrome_only {-chrome-:only(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;
Comme les hacks de formatage CSS Safari ci-dessus, ceux-ci peuvent être utilisés comme suit:
<div class="chrome_only">This text will be Blue in Chrome</div>
Donc, vous n'avez pas à le rechercher dans cet article, voici à nouveau ma page de test en direct:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
[Ou le miroir]
https://browserstrangeness.github.io/css_hacks.html#safari
La page de test en contient également de nombreuses autres, spécifiquement basées sur la version pour vous aider à différencier davantage Chrome et Safari, ainsi que de nombreux hacks pour les navigateurs Web Firefox, Microsoft Edge et Internet Explorer.
REMARQUE: Si quelque chose ne fonctionne pas pour vous, vérifiez d'abord la page de test, mais fournissez un exemple de code et QUEL hack vous tentez pour que quelqu'un vous aide.