y at-il un hack css pour safari seulement pas chrome?
j'essaie de trouver un hack css pour Safari NOT Chrome, je sais que ce sont deux navigateurs Webkit, mais j’ai des problèmes avec les alignements div en chrome et safari;.
j'ai essayé d'utiliser cela, mais cela affecte également le chrome,
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
est-ce que quelqu'un connaît un autre qui s'appliquera simplement 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 - PAS des hacks CSS comme ceux-ci, ce qui signifie qu'ils vont réécrire, détruire ou supprimer les hacks depuis ce moment. n'est pas ce que font les hackers. Ce code non standard a été conçu avec soin pour ne cibler que les versions de navigateur unique et ne peut pas fonctionner s'il est modifié. Si vous souhaitez l'utiliser avec ceux-ci, vous devez charger votre hack CSS choisi APRES tout filtre ou compilateur} _. Cela peut sembler acquis, mais il y a beaucoup de confusion chez les personnes qui ne réalisent pas qu’elles corrigent un piratage en le faisant fonctionner avec 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 Firefox] sur iOS (du moins dans les versions iOS 6.1 et ultérieures) 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, qui n'utilise pas le piratage de Chrome. Pour plus d'informations à ce sujet, cliquez ici: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like -a-chromé-Apple/
AUSSI: Si vous avez essayé un ou plusieurs hacks et que vous avez du mal à les faire fonctionner, merci de 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-même ou pour qui que ce soit d’autre de vous aider.
Il s’agit souvent d’une solution simple ou d’un point-virgule manquant. Avec CSS, c’est généralement un problème ou un problème d’ordre dans lequel le code est répertorié dans les feuilles de style, s’il ne s’agit pas d’erreurs CSS. Veuillez tester les hacks ici Si cela fonctionne, 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 aider, ou du moins vous orientent 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 safaris Hacks, mais aucun de ceux de Firefox, comme iOS Chrome.
Ce sont des astuces que vous pouvez utiliser pour les versions plus récentes de Safari.
Commencez par essayer celui-ci, 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 supérieures, vous devez utiliser la prochaine paire de hacks CSS. Celui pour 6.1-10.0 va avec celui qui gère 10.1 et plus.
Voici donc celui que j'ai élaboré pour Safari 10.1+:
La requête double 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 jeu d'outils rencontre des problèmes avec la requête de 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;
}
}}
Ce prochain fonctionne pour 6.1-10.0 mais pas 10.1 (mise à jour de fin mars 2017)
Ce hack que j'ai créé au cours de plusieurs mois de tests et d'expérimentations en combinant plusieurs autres hacks.
REMARQUES: comme ci-dessus, la requête 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ête multimédia. - L'espace manquant après l'un des 'et est également important. Après tout, c’est un hack ... et le seul qui fonctionne pour 6.1 et toutes les versions les plus récentes 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. Des filtres tels que les moteurs SASS vont réécrire/annuler ou le supprimer complètement.
Comme mentionné ci-dessus, veuillez vérifier ma page de test pour voir si elle fonctionne 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», 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;
}
}}
Travaux légèrement modifiés 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;
}
}}
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 (Périphériques 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 plus:
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
et une requête sur les fonctionnalités de support également:
/* 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 de 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, ciblez uniquement les appareils iOS. Comme mentionné ci-dessus, comme Chrome sur iOS est basé sur Safari, il est également concerné./* 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;
}
}
.
/* Safari 9+ (non-iOS) */ _:default:not(:root:root), .safari_only { color:#0000FF; background-color:#CCCCCC; }/* 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 séparant les versions 6.1-7.0 et 7.1 + Ceux-ci ont également nécessité la 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; );} }/* 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; } }}<div class="safari_only">This text will be Blue in Safari</div>
Habituellement, [comme dans cette question], les personnes qui posent des questions sur Safari hacks sont principalement motivées par le fait de le séparer 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, je vous le présente ici au cas où vous en auriez besoin.Voici les bases, consultez à nouveau ma page de test pour connaître les 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 à la version 47 pour le moment.
Mon ancien combo de requêtes multimédia que j'ai mis sur browserhacks fonctionne toujours 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; } }/* 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; } }/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */ @supports (-webkit-appearance:none) { .chrome_and_safari { color:#0000FF; background-color:#CCCCCC; } }./* 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(;<div class="chrome_only">This text will be Blue in Chrome</div>https://browserstrangeness.bitbucket.io/css_hacks.html#webkit
[Ou le miroir]
https://browserstrangeness.github.io/css_hacks.html#webkit
La page de test en contient de nombreuses autres, en particulier en fonction de 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 le type de piratage que vous tentez de faire pour que quelqu'un vous assiste.
NOTE: If something doesn't work for you, check the test page first, but provide example code and WHICH hack you are attempting for anyone to assist you.
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;
}
}
Sarari seulement
.yourClass:not(:root:root){
/* ^_^ */
}
Ce hack 100% ne fonctionne que pour les safaris. 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 veulent implémenter un hack pour Safari 7.0 et inférieur, mais pas pour 7.1 et supérieur - utilisez:
.myclass { (;property: value;); }
.myclass { [;property: value;]; }
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">')
};
Remplacez votre classe dans (.myClass)
/ * Safari uniquement */. myClass: not (: root: root) { enter code here}
Soit dit en passant, pour 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 le .safari_only class à l'élément que vous voulez cibler, exemple:
<div class='safari_only'> This div will have a padding:10px in a mobile with Safari </div>
É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 , contrairement aux autres navigateurs. Cette méthode est également très efficace pour sélectionner différentes versions d’IE. Que la force soit avec toi.
Vous pouvez utiliser un hack de requête multimédia pour sélectionner Safari 7+ à partir d'autres navigateurs.
@media \\0 screen {}
Avertissement: Ce hack vise également les anciennes versions de Chrome (avant juillet 2013).
salut j'ai fait cela et cela 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;
}
}
}
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{
...
}
Ça marche à 100% en safari..j'ai essayé
@media screen and (-webkit-min-device-pixel-ratio:0)
{
::i-block-chrome, Class Name {your styles}
}
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;
}
}
Cela marche:
@media not all and (min-resolution:.001dpcm) {
@media {
/* your code for Safari Desktop & Mobile */
body {
background-color: red;
color: blue;
}
/* end */
}
}
https://stackoverflow.com/a/17637937/3174065 il est répondu ici bien que cette méthode utilise certains JS. s'il est utilisé, assurez-vous de placer le JS dans le pied de page, le corps doit être entièrement chargé pour que celui-ci se déclenche correctement; lorsqu'il est placé dans la tête, il se trompe car il se déclenche avant que le corps ne soit chargé.
il ajoute ensuite une classe .safari au corps, mais uniquement en safari, ce qui facilite le ciblage des CSS.