y a-t-il un hack css pour safari seulement PAS chrome?


183

Im essayant de trouver un hack css pour juste safari PAS chrome, je sais que ce sont deux navigateurs webkit mais j'ai des problèmes avec les alignements div dans chrome et safari, chacun s'affiche différemment.

J'ai essayé de l'utiliser mais cela affecte également le chrome,

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
} 

est-ce que quelqu'un en connaît un autre qui s'appliquera simplement au safari s'il vous plaît?


N'utilisez pas de CSS, vous devrez utiliser javascript. stackoverflow.com/questions/5899783/detect-safari-using-jquery
Christian

Je serais plus intéressé par le problème réel qu'une solution fragile et piratée. Est-il (toujours) disponible quelque part?
Matijs

Pour les personnes qui publient «ne fonctionne pas», sachez que vous devez connaître la version de Safari que vous testez. Il n'y a pas de solution Safari «fourre-tout» pour chaque version. Vous devez fournir ces informations avec votre publication, sinon personne ne peut vous aider à trouver une solution.
Jeff Clayton

Différentes versions de Safari ont des besoins différents - consultez ici des exemples en direct: browsertrangeness.bitbucket.io/css_hacks.html#safari [Or the Mirror] browsererstrangeness.github.io/css_hacks.html#safari
Jeff Clayton

Réponses:


357
  • 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.


9
Je veux juste dire que la page de test est géniale. Je peux maintenant accéder à ce site avec n'importe quel appareil et voir quelles règles CSS sont applicables!
duyn9uyen

1
Cela s'appliquera-t-il à Safari sur iPhone ou iPad?
Greg Rozmarynowycz

1
en fait, je viens de résoudre ma propre question en utilisant une combinaison de l'exemple ci-dessus ET le (; propriété: valeur;); ci-dessous et cela a très bien fonctionné!
mydoglixu

1
Le hack pour Safari 6.1+ en haut de cette réponse jette une erreur dans le compilateur Sass. Y a-t-il un moyen de le résoudre?
Blackbird

2
@Blackbird Désolé mais vous ne pouvez pas compiler ou filtrer les hacks, cela les ruine. Ils doivent être utilisés tels quels. (Ajoutez-les au fichier css terminé après la compilation.) Le fait qu'ils ne soient pas standard est la raison pour laquelle ils fonctionnent.
Jeff Clayton

89

Il existe un moyen de filtrer Safari 5+ à partir de Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }

    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}

3
jeffclayton.wordpress.com/2014/07/22/… - J'ai travaillé sur beaucoup (je teste et crée des hacks css pour browserhacks.com) et testez la page ici: browserhacks.bitbucket.org/css_hacks.html#webkit
Jeff Clayton

Remarque: sous iOS [testé sous iOS 7], la version chrome exécute en fait le moteur safari, donc sur les ipads ou les iphones, vous utilisez les hacks safari. Pour les autres appareils, ils sont différents.
Jeff Clayton

Donc, fondamentalement, le code de la réponse fonctionne pour Safari 5.0 et 6.0 et non 6.1+?
Nic Cottrell

Pour être absolument précis, la construction :: i-block-chrome, .myClass {} n'autorise que Safari 5.1-6.0, mais aussi Chrome 10-24 (l'ancienne version de Chrome n'est plus vraiment utilisée donc pas entièrement à mentionner) mais rien de plus récent - Les hacks Safari ont tendance à fonctionner comme ça: un lot gère 5.1-6.0, un autre gère 6.1-7.0 et les plus récents gèrent 7.1-8.0. Ils semblent beaucoup mettre à jour les choses jusqu'à ce qu'ils décident de passer à la prochaine version numérique qui est très proche de la version précédente «.1».
Jeff Clayton

Au moment de cette réponse en 2013, Safari 6.1 venait de sortir, donc peu de gens avaient vu que le navigateur avait changé, donc c'était le plus précis à l'époque. Si vous avez besoin de plus récents, vérifiez ma réponse ci-dessous. C'était une excellente réponse au moment où elle a été fournie. L'heure change cependant, j'ai donc posté mon travail en tant que mise à jour de celui-ci. Il m'a fallu des mois pour créer les 6.1-7.0 et 7.1-8.0. J'espère que vous aimez les résultats. Très probablement, lorsqu'une version 8.1 est publiée si elle suit le modèle, elle nécessitera également un hack différent. Encore une fois, seul le temps le dira.
Jeff Clayton

21

Sarari uniquement

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}

8
Voulez-vous ajouter une explication? Est-ce que je tape littéralement root: root?
Nubtacular

1
Celui-ci est exactement correct pour Safari 3.x (et Chrome version 1.0 uniquement si personne n'utilise Chrome 1.0 puisqu'il est dans les années 30 maintenant ...)
Jeff Clayton

Celui-ci cible désormais Safari 9.0 également, donc les statistiques complètes ont été mises à jour: / * Chrome 1.0, Safari 3.X, Safari 9.0+ * /
Jeff Clayton

4
Le :not(:root:root)sélecteur est invalide selon la spécification CSS Selectors 3 (dans lequel :not()ne peut contenir qu'un simple sélecteur, c'est-à-dire un sélecteur de type ou un ID ou une classe ou une pseudo-classe), mais complètement valide selon CSS Selectors 4 (où :not()accepte la liste de sélecteurs). Il est vrai qu'actuellement, seul Safari comprend la syntaxe CSS Selectors 4, mais cette solution n'est pas à l'épreuve du temps.
Ilya Streltsyn

2
Très peu de hacks ne sont pas (et une grande partie du code standard actuel n'est pas dû à des changements de version) à l'épreuve du temps. Le meilleur plan est que si vous allez utiliser un hack css, utilisez-le uniquement comme solution temporaire afin de gagner du temps pour faire une mise à jour inter-navigateurs plus officielle.
Jeff Clayton

14

Ce hack fonctionne à 100% uniquement pour safari 5.1-6.0. Je viens de le tester avec succès.

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome, .yourcssrule {
        your css property
    }
}

3
Ce hack est en fait pour Chrome et Safari dans différentes versions. Il autorise Chrome 10-24 (que personne n'utilise plus, c'est pourquoi les gens ont indiqué qu'il bloquait Chrome) et Safari 5.1-6.0 uniquement. Cela ne fonctionne pas pour Safari 6.1 et plus récent cependant. À l'époque, il n'y avait pas de meilleur hack du genre.
Jeff Clayton

1
@ veronica-lotti, cela a fonctionné pour moi aussi. Vous débarrassez de mon mal de tête. Merci
Andhi Irawan

Les gens - soyez prudent. Ce que ces commentaires décrivent est une méthode qui ne fonctionne pas pour les versions de Safari au cours des dernières années et qui ne fonctionne que pour les anciennes versions. Ce que cela signifie vraiment, c'est que la plupart des internautes n'obtiendront pas le résultat que vous recherchez, mais uniquement les personnes disposant d'ordinateurs plus anciens. Cela ne fonctionne pas pour les systèmes d'exploitation actuels. À l'heure actuelle, la plupart des gens ont la version 12 et supérieure (et non la version 6.0 et inférieure, qui n'étaient en vigueur qu'à l'époque de Windows XP.)
Jeff Clayton

8

Pour ceux qui souhaitent implémenter un hack pour Safari 7.0 et inférieur, mais pas 7.1 et supérieur - utilisez:

.myclass { (;property: value;); }
.myclass { [;property: value;]; }

J'ai essayé cela sur Safari 7 et je n'ai pas pu le faire fonctionner. Pouvez-vous donner un exemple de travail par hasard?
Juicy

@Juicy: Il existe des tests en direct sur browserhacks.com - Ils fonctionnent sur Safari 7 et versions antérieures, ainsi que Chrome 28 et versions antérieures. (Comme mentionné dans une autre publication, iOS 7 et 8, peut-être que d'autres utilisent également le moteur Safari pour Chrome, donc Chrome et Safari sur iPad sont tous deux vraiment Safari)
Jeff Clayton

Vous l'avez peut-être essayé dans Safari 7.1, pas dans Safari 7.0. Il est valide pour les versions 7.0 et antérieures, et non pour 7.1 et plus récentes. Lorsque cette réponse a été publiée, la version 7.0 était la dernière version de Safari, donc c'était vrai à l'époque.
Jeff Clayton

fonctionne pour Safari pour Windows (version 5.1.7 (7534.57.2))
jave.web

fonctionne pour Safari pour Mac (Version 6.0.2 (7536.26.17))
Merlin

6

Remplacez votre classe dans (.myClass)

/ * Safari uniquement * / .myClass: not (: root: root) { enter code here }


C'est un bon pour Safari - le seul autre navigateur qu'il cible est Chrome 1 (personne n'utilise plus Chome 1)
Jeff Clayton

Spécifications exactes pour les personnes qui n'utilisent pas les derniers Mac: Chrome 1, Safari 3.X, Safari 9.0+ (pas Safari 4-8)
Jeff Clayton

Cela fonctionne avec la dernière version de Safari 7+ et pour autant que je sache, la réponse devrait être acceptée.
Jason Engage

Wow merci, cela a finalement fonctionné pour moi après avoir essayé tant de piratages de navigateur pour Safari !!!
FairyQueen

4

À propos, pour tous ceux d'entre vous qui ont juste besoin de cibler Safari sur les mobiles, ajoutez simplement une requête multimédia à ce hack:

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

Et n'oubliez pas d'ajouter la classe .safari_only à l'élément que vous souhaitez cibler, exemple:

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>

4

J'aime utiliser la méthode suivante:

var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) { 
  $('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">') 
};

Cette méthode de piratage JavaScript nécessite l'installation du package JQuery.
Jeff Clayton

Ceci est considéré comme une pratique extrêmement mauvaise, le reniflement du navigateur est très sujet aux erreurs et conduit à des tas de faux positifs. Ne faites pas cela, même le reniflage de requêtes multimédias est très sale mais pourrait être acceptable pour de très petits changements.
Wannes

3

Lors de l'utilisation de ce filtre uniquement safari, je pouvais cibler Safari (iOS et Mac), mais exclure Chrome (et d'autres navigateurs):

@supports (-webkit-backdrop-filter: blur(1px)) {
  .safari-only {
    background-color: rgb(76,80,84);
  }
}

2

Étape 1: utilisez https://modernizr.com/

Étape 2: utilisez la classe html .regions pour sélectionner uniquement Safari

a { color: blue; }
html.regions a { color: green; }

Modernizr ajoutera des classes html au DOM en fonction de ce que le navigateur actuel prend en charge. Safari prend en charge les régions http://caniuse.com/#feat=css-regions alors que les autres navigateurs ne le font pas (encore de toute façon). Cette méthode est également très efficace pour sélectionner différentes versions d'IE. Que la force soit avec toi.


1
modernizr est un excellent addon javascript aux sites Web pour identifier les navigateurs, un excellent outil! - ce hack fonctionnera (comme les autres) jusqu'à ce que d'autres navigateurs décident de prendre en charge la fonctionnalité des régions
Jeff Clayton

1
Les régions CSS ne sont plus prises en charge.
1stthomas

2
Les régions me permettent de cibler Safari 6.1 à 11 et 7.1 à 11.2 sur iOS et cela seul est déjà génial.
lowtechsun

@lowtechsun - super publier vos statistiques à ce sujet, les hacks ne valent que la connaissance des navigateurs qu'ils ciblent.
Jeff Clayton

2

salut j'ai fait ça et ça a marché pour moi

@media(max-width: 1920px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 5.5% !important;
        }
    }
}

@media(max-width: 1680px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 15% !important;
        }

    }
}

@media(max-width: 1600px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 18% !important;
        }

    }
}


@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 24.5% !important;
        }

    }

}


@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
    @media {
        .photo_row2 {
            margin-left: -11% !important;
        }

    }

}

C'est un bel ensemble, une bonne utilisation du hack avec plusieurs paramètres de périphérique pour les sites Web utilisant des vues réactives.
Jeff Clayton

2

Remarque: si iOS uniquement est suffisant (si vous êtes prêt à sacrifier le bureau Safari), cela fonctionne:

    @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }

1

Vous pouvez utiliser un hack de requête multimédia pour sélectionner Safari 6.1-7.0 à partir d'autres navigateurs.

@media \\0 screen {}

Avertissement: ce hack cible également les anciennes versions de Chrome (avant juillet 2013).


Cela ne fonctionne pas sur Safari plus récent, les statistiques de celui-ci sont cependant chirurgicales: Safari 6.1-7.0, Chrome 22-28 donc toujours pratique.
Jeff Clayton

0

Cela marche:

@media not all and (min-resolution:.001dpcm) { 
  @media {
    /* your code for Safari Desktop & Mobile */
    body {
      background-color: red;
      color: blue;
    }
    /* end */
  }
}

0

A la fin j'utilise un peu de JavaScript pour y parvenir:

if (navigator.vendor.startsWith('Apple'))
    document.documentElement.classList.add('on-apple');

puis dans mon CSS pour cibler le moteur de navigateur Apple, le sélecteur sera:

.on-apple .my-class{
    ...
}

0

https://stackoverflow.com/a/17637937/3174065 il est répondu ici bien que cette méthode utilise du JS. s'il est utilisé, assurez-vous de mettre le js dans le pied de page, le corps doit être complètement chargé pour que cela tire correctement, lorsqu'il est placé dans la tête, il se trompe car il tire avant que le corps ne soit chargé.

il ajoute ensuite une classe .safari au corps, mais uniquement en safari, ce qui rend le ciblage du css très facile.


-1

Cela fonctionne à 100% en safari ... j'ai essayé

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
::i-block-chrome, Class Name {your styles}
}

Cela fonctionne sur les anciennes versions de Safari, pas sur les versions actuelles - 6.1 et plus récentes.
Jeff Clayton

-1

J'ai testé et cela a fonctionné pour moi

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.