J'essaie de trouver un hack css pour seulement safari et non chrome, je sais que ce sont tous deux des navigateurs webkit mais j'ai des problèmes avec les alignements de div dans chrome et safari, chacun s'affiche différemment.
J'ai essayé d'utiliser ce système mais il affecte également Chrome,
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
} quelqu'un en connaît-il un autre qui s'applique uniquement à safari s'il vous plaît ?
S'IL VOUS PLAÎT, S'IL VOUS PLAÎT Si vous rencontrez des difficultés et que vous souhaitez vraiment obtenir de l'aide ou aider les autres en publiant un commentaire à ce sujet, publiez votre navigateur et votre appareil (MacBook/IPad/etc... avec les numéros de version du navigateur et du système d'exploitation !)
Affirmer qu'aucun de ces éléments ne fonctionne n'est pas exact (et en fait même pas possible). Beaucoup d'entre eux ne sont pas vraiment des "hacks" mais du code intégré dans les versions de Safari par Apple. Des informations supplémentaires sont nécessaires. J'apprécie le fait que vous soyez venu ici, et je souhaite vraiment que les choses se passent bien pour vous.
Si vous avez des problèmes pour que quelque chose d'ici fonctionne sur votre site, veuillez vérifier le site du test via les liens ci-dessous -- Si un hack fonctionne ici, mais pas sur votre site, le hack n'est pas en cause - il y a quelque chose d'autre qui se passe avec votre site, souvent juste un conflit CSS comme mentionné ci-dessous, ou peut-être que rien ne fonctionne mais que vous ne savez pas que vous n'utilisez pas du tout Safari. N'oubliez pas que ces informations sont destinées à aider les gens à résoudre des problèmes à court terme (espérons-le).
Le site d'essai :
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
ET MIRROR !
https://browserstrangeness.github.io/css_hacks.html#safari
REMARQUE : Les filtres et les compilateurs (tels que le moteur SASS) s'attendent à un code standard "cross-browser" -- PAS à des bidouillages CSS comme ceux-ci ce qui veut dire qu'ils vont réécrire, détruire ou supprimer les hacks puisque ce n'est pas ce que font les hacks. Une grande partie de ce code est non standard et a été minutieusement conçu pour cibler des versions de navigateurs uniques et ne peut pas fonctionner si elles sont modifiées. Si vous souhaitez l'utiliser avec ces derniers, vous devez charger votre hack CSS choisi APRÈS tout filtre ou compilateur. . Cela peut sembler évident, mais il y a eu beaucoup de confusion parmi les personnes qui n'ont pas réalisé qu'elles annulaient un piratage en le faisant passer par 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 6.1 et plus récentes d'iOS) et que vous vous demandez pourquoi aucune des bidouilles ne semble séparer Chrome de Safari, c'est parce que la version iOS de Chrome utilise le moteur de Safari. Elle utilise les bidouillages de Safari et non ceux de Chrome. Pour en savoir plus, cliquez ici : https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox pour iOS a été publié à l'automne 2015. Il répond également aux Hacks de Safari, mais aucun de ceux de Firefox, tout comme Chrome pour iOS.
AUSSI : Si vous avez essayé un ou plusieurs des hacks et que vous avez des difficultés à les faire fonctionner, veuillez envoyer un exemple de code (mieux encore, une page de test) - le hack que vous essayez, 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 quiconque ici de vous aider.
Il s'agit souvent d'une simple correction ou d'un point-virgule manquant. Avec les CSS, il s'agit généralement de cela ou d'un problème d'ordre dans lequel le code est listé dans les feuilles de style, sinon il s'agit simplement d'erreurs CSS. Veuillez tester les hacks ici sur le site de test. Si cela fonctionne ici, cela signifie que le hack fonctionne vraiment pour votre configuration, mais qu'il y a quelque chose d'autre qui doit être résolu. Les gens ici aiment vraiment aider, ou au moins vous indiquer la bonne direction.
Ceci étant dit, voici des astuces que vous pouvez utiliser pour les versions plus récentes de Safari.
Essayez d'abord celui-ci, car il couvre les versions actuelles de Safari et est purement 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 d'autres versions, 6.1 et plus, vous devez utiliser la paire de css hacks suivante. Celui pour 6.1-10.0 pour aller avec celui qui gère 10.1 et plus.
Voici donc une solution que j'ai mise au point 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 celle-ci si SCSS ou un autre ensemble d'outils a des problèmes avec la requête mé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;
}
}}La suivante fonctionne pour 6.1-10.0 mais pas pour 10.1 (mise à jour de fin mars 2017).
Ce hack a été créé au cours de plusieurs mois de tests et d'expérimentations en combinant plusieurs autres hacks.
NOTES : comme ci-dessus, la double requête média n'est PAS un accident -- elle exclut de nombreux navigateurs plus anciens qui ne peuvent pas gérer l'imbrication des requêtes média. -- L'espace manquant après l'un des "et" est également important. Après tout, il s'agit d'un hack... et le seul qui fonctionne pour la version 6.1 et toutes les versions plus récentes de Safari à l'heure actuelle. Sachez également, comme indiqué dans les commentaires ci-dessous, que ce hack est un css non standard et qu'il 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 d'essai pour voir comment cela fonctionne tel quel (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 d'informations sur les CSS Safari spécifiques à chaque version, veuillez poursuivre votre lecture 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;
}Légèrement modifié, il fonctionne 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;
}Safari 9 CSS Hacks :
Un piratage simple des fonctions de support pour Safari 9.0 et plus :
@supports (-webkit-hyphens:none)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}Un simple hack de l'underscore 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 fonctions de soutien également :
/* Safari 9+, < 13.1 */
@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 maintenant la détection des fonctionnalités, nous pouvons donc l'utiliser...
/* 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 nous l'avons mentionné plus haut, puisque Chrome sur iOS est ancré dans Safari, il frappe bien sûr celui-ci é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 6.1-7.0, et 7.1+. Ceux-ci ont également nécessité 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;
);}
}Puisque j'ai indiqué le moyen de bloquer les appareils iOS, voici la version modifiée du piratage de Safari 6.1+ qui vise 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 de Safari est la suivante principalement en référence à sa séparation de Google Chrome (encore une fois PAS iOS !) Il peut être important d'afficher l'alternative : comment cibler Chrome séparément de Safari. de Safari, donc je vous le fournis ici au cas où vous en auriez besoin.
Voici les principes de base. Consultez à nouveau ma page de test pour de nombreuses versions spécifiques de Chrome, mais ces principes couvrent Chrome en général. Chrome est en version 45, les versions Dev et Canary vont jusqu'à la version 47 pour le moment.
Mon ancien combo media query que j'ai mis sur browserhacks fonctionne toujours, mais seulement 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 prochains navigateurs Firefox et le navigateur Microsoft Edge ne sont pas pris en charge par cette requête :
/* 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 plus récentes étaient faciles à cibler. J'ai envoyé ce code à browserhacks après l'avoir vu inclus dans un bloc de code CSS (il ne s'agissait pas à l'origine d'un hack CSS) et j'ai réalisé ce qu'il faisait, j'ai donc extrait la partie pertinente pour nos besoins :
[NOTE : ] Cette ancienne méthode ci-dessous fait maintenant apparaître Safari 9 et le navigateur Microsoft Edge sans la mise à jour ci-dessus. Les prochaines versions 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 de la fonctionnalité @supports. Chrome et Firefox incluaient auparavant @supports.
/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */
@supports (-webkit-appearance:none)
{
.chrome_and_safari {
color:#0000FF;
background-color:#CCCCCC;
}
}Il est également possible de cibler le bloc des versions 22 à 28 de Chrome (si nécessaire pour prendre en charge les versions plus anciennes) en modifiant les pirates combinés de 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 astuces de formatage CSS Safari ci-dessus, elles peuvent être utilisées comme suit :
<div class="chrome_only">This text will be Blue in Chrome</div>Pour que vous n'ayez pas à la chercher dans ce billet, 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 comporte beaucoup d'autres, notamment des versions pour approfondir pour vous aider à faire la différence entre Chrome et Safari, ainsi que de nombreuses astuces pour les navigateurs Firefox, Microsoft Edge et Internet Explorer.
REMARQUE : Si quelque chose ne fonctionne pas, consultez d'abord la page de test, mais fournissez un exemple de code et le type de piratage que vous tentez pour que l'on puisse vous aider.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
