Y a-t-il un hack css pour safari seulement pas chrome?

Im essayant de trouver un hack css pour seulement safari pas chrome, je sais que ce sont les deux navigateurs webkit mais im ayant des problèmes avec les alignements div en chrome et safari, chaque affiche différemment.

J’ai essayé de l’utiliser mais cela affecte aussi le chrome,

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

Est-ce que quelqu’un sait d’un autre qui va simplement s’appliquer au safari s’il vous plaît?

  • MISE À JOUR POUR SAFARI 11 (mise à jour de l’automne 2017) *

REMARQUE: Les filtres et les compilateurs (tels que le moteur SASS) attendent un code «multi-navigateurs» standard . Il s’agit d’un code non standard qui a été soigneusement conçu pour cibler uniquement les versions à navigateur unique et ne peut pas fonctionner s’il est modifié. Si vous souhaitez l’utiliser avec ceux-ci, vous devez charger le hack CSS choisi APRÈS tout filtre ou compilateur . Cela peut sembler être une évidence mais il y a eu beaucoup de confusion parmi les personnes qui ne réalisent pas qu’elles défont un piratage en l’exécutant via un logiciel qui n’a pas été conçu à cette fin.

Safari a changé depuis la version 6.1, comme beaucoup l’ont remarqué.

S’il vous plaît noter: si vous utilisez Chrome [et maintenant aussi Firefox] sur iOS (au moins dans les versions iOS 6.1 et plus récentes) et vous vous demandez pourquoi aucun hacks ne semble séparer Chrome de Safari, c’est parce que la version iOS de Chrome utilise le moteur Safari. Il utilise des hacks Safari pas ceux de Chrome. Plus à ce sujet ici: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

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 essayez et quel (s) navigateur (s) utilisent aussi bien que l’appareil que vous utilisez. Sans cette information supplémentaire, il est impossible pour moi ou pour quiconque ici de vous aider.

Souvent, il s’agit d’une simple correction ou d’un point-virgule manquant. Avec CSS, c’est généralement cela ou un problème de l’ordre dans lequel le code est répertorié dans les feuilles de style, sinon uniquement des erreurs CSS. Veuillez tester les hacks ici sur le site de test. Si cela fonctionne, cela signifie que le hack fonctionne vraiment pour votre configuration, mais c’est quelque chose qui doit être résolu. Les gens aiment vraiment aider, ou du moins vous orienter dans la bonne direction.

Le site de test:

https://browserstrangeness.bitbucket.io/css_hacks.html#webkit

ET MIROIR!

https://browserstrangeness.github.io/css_hacks.html#webkit

Firefox pour iOS a été publié à l’automne 2015, et il répond également aux Safari Hacks, mais pas à ceux de Firefox, comme iOS Chrome.

Ce sont là des astuces que vous pouvez utiliser pour les versions plus récentes de Safari.

Vous devriez essayer celui-ci en premier car il couvre les versions actuelles de Safari et est pur-Safari uniquement:

Celui-ci fonctionne toujours correctement avec Safari 10.1:

 /* 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 récentes, vous devez utiliser la paire de hacks css suivante. Celui pour 6.1-10.0 pour aller avec celui qui gère 10.1 et plus.

Alors, voici un exemple pour Safari 10.1+:

La requête de double média est importante ici, ne la supprimez pas.

 /* Safari 10.1+ (which is the latest version of Safari at this time) */ @media not all and (min-resolution:.001dpcm) { @media { .safari_only { color:#0000FF; background-color:#CCCCCC; } }} 

Essayez celle-ci si SCSS ou un autre ensemble d’outils rencontre des problèmes avec la requête de média nestede:

 /* 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 de fin mars 2017)

Ce hack que j’ai créé pendant plusieurs mois de tests et d’expérimentation en combinant plusieurs autres hacks.

NOTES: comme ci-dessus, la requête de double média N’EST PAS un accident – elle exclut de nombreux navigateurs plus anciens qui ne peuvent pas gérer l’imbrication de requêtes de mé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 versions plus récentes de Safari. Sachez également que comme indiqué dans les commentaires ci-dessous, le hack est un css non standard et doit être appliqué APRES un filtre. Des filtres tels que les moteurs SASS vont réécrire / annuler ou les supprimer complètement.

Comme mentionné ci-dessus, s’il vous plaît vérifier ma page de test pour voir qu’il fonctionne tel quel (sans modification!)

Et voici le code:

 /* Safari 6.1-10.0 (not 10.1, which is the latest version of Safari at this time) */ @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media { .safari_only { color:#0000FF; background-color:#CCCCCC; } }} 

Pour plus d’informations sur la version de Safari CSS, continuez à 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; } }} 

Les travaux légèrement modifiés pour 10.1 (seulement):

 /* 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; } }} 

Un pour Safari 10.0:

 /* Safari 10.0 (not 10.1) */ _::-webkit-:host:not(:root:root), .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; } 

Safari 9 CSS Hacks:

Un pour Safari 9.0 et supérieur:

 /* Safari 9+ */ _:default:not(:root:root), .safari_only { color:#0000FF; background-color:#CCCCCC; } 

et une requête de fonctionnalités de support aussi:

 /* 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 pour que nous puissions l’utiliser maintenant …

 /* Safari 9 */ @supports (overflow:-webkit-marquee) and (justify-content:inherit) { .safari_only { color:#0000FF; background-color:#CCCCCC; } } 

Maintenant, pour cibler uniquement les appareils iOS. Comme mentionné ci-dessus, puisque Chrome sur iOS est ancré dans Safari, celui-ci est bien sûr également disponible.

 /* 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 6.1-7.0 et 7.1+. Ils nécessitaient également une combinaison de plusieurs hacks pour 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 voie pour bloquer les appareils iOS, voici la version modifiée du hack 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:

 
This text will be Blue in Safari

Habituellement [comme dans cette question] la raison pour laquelle les gens posent des questions sur les hacks Safari est surtout la 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? Je vous le fournit ici au cas où cela serait nécessaire.

Voici les bases, vérifiez à nouveau ma page de test pour un grand nombre de 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 en version 47 pour le moment.

Mon ancien combo de requêtes multimédia que je mets sur browserhacks 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 bien pour Chrome 29+ également … 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 utilisés 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 versions ultérieures étaient faciles à cibler. C’est celui que j’ai envoyé à browserhacks après l’avoir vu inclus dans un bloc de code CSS (non conçu à l’origine comme un hack CSS) et j’ai réalisé ce qu’il faisait. J’ai donc extrait la partie appropriée pour nos besoins:

[NOTE:] Cette ancienne méthode ci-dessous affiche 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 -webkit-CSS dans leur programmation, et Edge et Safari 9 ont tous deux pris en charge la détection des fonctionnalités de @supports. Chrome et Firefox inclus @supports précédemment.

 /* 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 de Chrome 22-28 (Si nécessaire pour prendre en charge les anciennes versions) est également possible de cibler avec une torsion sur mon hack de Safari combo j’ai posté 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:

 
This text will be Blue in Chrome

Donc, vous n’avez pas à le rechercher dans cet article, voici ma page de test en direct:

https://browserstrangeness.bitbucket.io/css_hacks.html#webkit

[Ou le miroir]

https://browserstrangeness.github.io/css_hacks.html#webkit

La page de test en a également beaucoup d’autres, en particulier celles basées sur la version pour vous aider à différencier 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 type de piratage vous essayez pour quiconque de vous aider.

Il existe un moyen de filtrer Safari 5+ depuis 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; } } 

Sarari seulement

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

Ce hack 100% ne fonctionne que pour le safari. 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 } } 

Pour ceux qui souhaitent implémenter un hack pour Safari 7.0 et les versions ultérieures, mais pas pour les versions 7.1 et supérieures, utilisez:

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

Remplacez votre classe dans (.myClass)

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

Au fait, pour ceux d’entre vous qui ont juste besoin de cibler Safari sur les mobiles, ajoutez simplement une requête mé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’append la classe .safari_only à l’élément que vous souhaitez cibler, par exemple:

 
This div will have a padding:10px in a mobile with Safari

J’aime utiliser la méthode suivante:

 var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor); if (isSafari) { $('head').append('') }; 

Vous pouvez utiliser un hack de requêtes multimédia pour sélectionner Safari 7+ à partir d’autres navigateurs.

 @media \\0 screen {} 

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

É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 appenda 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 que ce soit). Cette méthode est également très efficace pour sélectionner différentes versions d’IE. Que la force soit avec toi.

Il travaille à 100% en safari..J’ai essayé

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

salut j’ai fait ça et ça a fonctionné 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; } } }