est-il un css hack pour safari ne PAS le chrome?
im essayant de trouver un css hack juste pour safari PAS chrome, je sais que ce sont les deux navigateurs webkit, mais je vais avoir des problèmes avec la div alignements dans chrome et safari, chaque affiche différemment.
j'ai essayé d'utiliser cela, mais il affecte chrome ainsi,
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
personne ne sait d'une autre qui ne il suffit d'appliquer à safari s'il vous plaît?
- Pas à l'aide de CSS, vous aurez besoin d'utiliser le javascript. stackoverflow.com/questions/5899783/detect-safari-using-jquery
- Je serais plus intéressé par le problème réel que fragile et hacky solution. Est-il (encore) disponible quelque part?
Vous devez vous connecter pour publier un commentaire.
REMARQUE: les Filtres et les compilateurs (comme le SASS moteur) s'attendent à ce standard "de la croix-navigateur de code" -- PAS des hacks CSS comme ces ce qui signifie qu'ils vont réécrire, de détruire ou d'enlever les hacks car ce n'est pas ce hacks faire. C'est le code non standard qui a été soigneusement conçu pour cibler seul les versions de navigateur et ne peut pas fonctionner si elles sont modifiées. Si vous souhaitez l'utiliser avec ceux, vous devez charger votre choisi CSS hack APRÈS tout filtre ou compilateur. Cela peut sembler comme un donné, mais il y a eu beaucoup de confusion chez les personnes qui ne se rendent pas compte qu'ils sont à l'annulation d'un hack en l'exécutant à travers ce logiciel qui n'a pas été conçu à cette fin.
Safari a changé depuis la version 6.1, comme beaucoup l'ont remarqué.
Veuillez noter: si vous utilisez google Chrome [et maintenant Firefox] sur iOS (au moins dans les versions d'iOS 6.1 et versions plus récentes) et vous vous demandez pourquoi aucun de ces attaques semblent être les séparer Chrome à partir de Safari, c'est parce que la version iOS de google Chrome est en utilisant le moteur de Safari. Il utilise Safari hacks pas le Chrome ceux. Plus à ce sujet ici: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/
AUSSI: Si vous avez essayé l'un ou plusieurs des hacks et ont de la difficulté à obtenir leur travail, s'il vous plaît poster un exemple de code (mieux encore, une page de test) - le hack vous tentent, et quel navigateur(s) (version exacte!) vous utilisez ainsi que l'appareil que vous utilisez. Sans informations supplémentaires, il est impossible pour moi ou quelqu'un d'autre ici pour vous aider.
Souvent, c'est une simple correction ou un point-virgule manquant. Avec CSS, il est généralement qu'un problème d'un ordre dans lequel le code est répertorié dans les feuilles de style, si ce n'est juste CSS erreurs. Testez les hacks ici sur le site de test. Si ça fonctionne, cela signifie que le hack est vraiment de travail pour votre installation, mais c'est autre chose qui doit être résolu. Les gens ici ne les aime aider, ou au moins de vous diriger 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é libéré à l'Automne 2015, et il répond également à la Safari Hacks, mais aucun de ceux Firefox, de même que iOS Chrome.
Que de la façon dont voici hacks pour vous d'utiliser pour les versions plus récentes de Safari.
Vous devriez essayer celui-là en premier car il couvre les versions de Safari et de l'est de la pure-Safari seulement:
Ce seul fonctionne encore correctement avec Safari 10.1:
Pour couvrir plus de versions, 6.1 et, à ce moment, vous devez utiliser la prochaine paire de hacks css. Le un pour de 6,1 10,0 à aller avec un qui gère 10.1 et jusqu'.
Alors -- ici est celle que j'ai travaillé pour Safari 10.1+:
La double requête des médias est important, ici, ne l'enlevez pas.
Essayer celui-ci si SCSS ou d'un autre outil a des ennuis avec la imbriquée media query:
Cette prochaine on travaille pour 6.1-10.0 mais pas 10.1 (à la Fin de Mars 2017 mise à jour)
Ce hack, j'ai créé plus de plusieurs mois de tests et d'expérimentation en combinant plusieurs autres hacks.
NOTES: comme ci-dessus, la double requête de média n'est PAS un accident -- elle exclut de nombreux anciens navigateurs qui ne peuvent pas gérer les requêtes de média de nidification. -- Manque un espace après un de la " et du est important. C'est après tout, un hack... et le seul qui fonctionne pour 6.1 et toutes les nouvelles versions de Safari à ce moment. Aussi, soyez conscient que répertoriés dans les commentaires ci-dessous, le hack est non-standard css et doit être appliqué APRÈS un filtre. Des filtres tels que SASS moteurs de réécrire l'/d'annuler ou de le supprimer purement et simplement.
Comme mentionné ci-dessus, veuillez consulter ma page de test pour voir fonctionner en l'état (sans modification!)
Et voici le code:
Pour plus spécifiques à la version " Safari CSS, s'il vous plaît continuer à lire ci-dessous.
Légèrement modifiés pour 10.1 (uniquement):
Un pour Safari 10.0:
Safari 10.0 (Non-Appareils iOS):
Safari 9 Hacks CSS:
Un pour Safari 9.0, et jusqu':
et un soutien fonctionnalités de requête trop:
Un pour Safari 9.0-10.0:
Safari 9 comprend maintenant la détection de fonctionnalité, de sorte que nous pouvons l'utiliser maintenant...
Maintenant pour cible les appareils iOS seulement. Comme mentionné ci-dessus, depuis Chrome sur iOS est enracinée dans Safari, il des cours de frappe ainsi que une.
un pour Safari 9.0+ mais pas les appareils iOS:
Et un pour Safari 9.0-10.0, mais pas les appareils iOS:
Ci-dessous sont des hacks qui séparent 6.1-7.0 et 7.1+
Ces également sur une combinaison de plusieurs hacks afin d'obtenir le bon résultat:
Depuis que je l'ai souligné la façon de bloquer les appareils iOS, voici la version modifiée de Safari 6.1+ hack qui cible les non-appareils iOS:
Les utiliser:
Habituellement [comme dans cette question] la raison les gens se posent sur Safari hacks est
principalement référence à la séparer de Google Chrome (encore une fois PAS l'iOS!)
Il peut être important de publier l'alternative: comment cibler Chrome séparément
à partir de Safari, donc je suis prévoyant que pour vous, ici, dans le cas où il est nécessaire.
Voici les règles de base, vérifiez de nouveau ma page de test pour beaucoup de versions spécifiques de Chrome, mais ces capot Chrome en général. Chrome est la version 45, Dev et Canary sont les versions jusqu'à la version 47 en ce moment.
Mon vieux media query combo que j'ai mis sur browserhacks fonctionne encore juste pour Chrome 29+:
Un @prend en charge la fonctionnalité de requête fonctionne bien pour Chrome 29+... pour une version modifiée de celui que nous utilisions pour Chrome 28+ ci-dessous. Safari de 9, les prochains Firefox, et Microsoft Bord de navigateur ne sont pas ramassés par celui-ci:
Précédemment, Chrome 28 et versions plus récentes ont été faciles à cibler. C'est celle que j'ai envoyé à browserhacks après l'avoir vu inclus dans un bloc de autres code CSS (pas prévue à l'origine comme un CSS hack) et réalisé que ce qu'il fait, donc j'ai extrait la partie pertinente à nos fins:
[ NOTE: ] Cette ancienne méthode ci-dessous maintenant des photos jusqu'Safari 9 et Microsoft Edge navigateur sans ci-dessus mise à jour. Les prochaines versions de Firefox et Microsoft Edge avons ajouté le support pour de multiples -webkit - code CSS dans leur programmation, et à la fois de Pointe et Safari 9 avons ajouté le support pour @prend en charge la détection de fonctionnalité. Chrome et Firefox inclus @soutient précédemment.
Le bloc de Chrome versions 22-28 (Si nécessaire pour prendre en charge les anciennes versions) sont également possibles pour la cible avec une torsion sur mon Safari combo hacks que j'ai posté ci-dessus:
Comme le Safari de mise en forme CSS hacks ci-dessus, ceux-ci peuvent être utilisés comme suit:
De sorte que vous n'avez pas à rechercher dans ce post, voici mon test en direct à la page de nouveau:
https://browserstrangeness.bitbucket.io/css_hacks.html#webkit
[Ou le Miroir]
https://browserstrangeness.github.io/css_hacks.html#webkit
La page de test a de nombreux autres, plus précisément de la version de base pour de plus amples
vous aider à différencier entre Chrome et Safari, et aussi de nombreux hacks pour Firefox, Microsoft Edge et Internet Explorer, les navigateurs web.
REMARQUE: Si quelque chose ne fonctionne pas pour vous, consultez la page de test de la première, mais de fournir un exemple de code et QUI hack vous essayez de quelqu'un pour vous aider.
@ media screen and (max-width: 767px) { _::-webkit-full-page-media, _:future, :root .flex-container { display: none; } }
Fonctionne sans la media query bien. Des idées?--chrome-10-11-color: red
ou pour Safari,--safari-color: blue
? J'ai un cas d'utilisation maintenant que j'ai besoin de faire des ajustements pour Edge. Si je pouvais dire--edge-color: green
en une seule ligne de CSS je voudrais faire avec le projet. Si, plus tard, sur les changements de Bord, je peux revenir en arrière et modifier cette ligne pour--edge-upto-12-color: green
.-safari-line-height:1
et-webkit-line-height:1
dans Safari et ni ont été appliquées.Il y a un moyen pour filtrer Safari 5+ à partir de google Chrome:
Sarari Seulement
9.1.1
!:not(:root:root)
sélecteur n'est pas valide selon les Sélecteurs CSS 3 spec (dans lequel:not()
peut contenir qu'un simple sélecteur, c'est à dire un sélecteur de type ou un ID ou une classe ou un pseudo-classe), mais tout à fait valable, selon les Sélecteurs CSS 4 (où:not()
accepte la liste des sélecteurs). Il est vrai qu'actuellement, seul Safari comprend les Sélecteurs CSS 4 la syntaxe, mais cette solution n'est pas pérenne.Ce hack 100% de travail uniquement pour safari. J'ai juste testé avec succès.
Pour ceux qui veulent mettre en œuvre un hack pour Safari 7.0 et ci-dessous, mais pas 7.1 et au-dessus-utilisation:
J'aime utiliser la méthode suivante:
Remplacer votre classe en (.myClass)
/* Safari uniquement */
.maclasse:not(:root:root) {
enter code here
}
Par la voie, pour l'un de vous les gars qui ont besoin de cibler Safari sur les mobiles, il suffit d'ajouter une requête de média pour ce hack:
Et n'oubliez pas d'ajouter le .safari_only classe à l'élément que vous souhaitez cibler, par exemple:
Étape 1: utilisation de https://modernizr.com/
Étape 2: utilisez le code html de classe .les régions de sélectionner uniquement Safari
Modernizr va ajouter du code html de classes à la DOM basé sur ce que le navigateur prend en charge. Safari prend en charge les régions http://caniuse.com/#feat=css-regions alors que les autres navigateurs ne sont pas (pas encore de toute façon). Cette méthode est aussi très efficace dans la sélection des différentes versions d'IE. Que la force soit avec vous.
Vous pouvez utiliser un media-query pirater pour sélectionner Safari 7+ à partir d'autres navigateurs.
Avertissement: Ce hack, cible également ancien de Chrome versions (avant juillet 2013).
salut je l'ai fait et cela a fonctionné pour moi
De travail de 100% dans safari..j'ai essayé
Cela fonctionne:
Je l'ai testé et il a travaillé pour moi
À la fin, j'ai utiliser un peu de JavaScript pour l'atteindre:
puis dans mon CSS pour cibler Apple moteur de navigateur le sélecteur sera:
https://stackoverflow.com/a/17637937/3174065
il est répondu ici, mais cette méthode utilise de JS. si elle est utilisée, assurez-vous de mettre le js dans le pied de page, le corps doit être complètement chargé pour ce feu correctement quand il est placé dans la tête il a des erreurs, car il se déclenche avant que le corps est chargé.
il ajoute alors un .safari classe pour le corps, mais seulement dans safari, rendant le ciblage de la css très facile.