existe um hack css para safari apenas NÃO chrome?


183

Estou tentando encontrar um css hack para apenas safari NÃO chrome, eu sei que estes são os dois navegadores webkit, mas estou tendo problemas com alinhamentos div no chrome e safari, cada um é exibido de forma diferente.

Eu tenho tentado usar isso, mas isso afeta o cromo também,

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

alguém sabe de outro que se aplica apenas ao safari, por favor?


Não usando CSS, você precisará usar javascript. stackoverflow.com/questions/5899783/detect-safari-using-jquery
Christian

Eu estaria mais interessado no problema real do que em uma solução frágil e hacky. Ainda está disponível em algum lugar?
Matijs

Para as pessoas que estão postando 'não funciona' - saiba que você precisa conhecer a versão do Safari que está testando. Não existe uma solução 'catch-all' Safari para todas as versões. Você precisa fornecer essas informações com sua postagem ou ninguém pode ajudá-lo a encontrar uma solução.
Jeff Clayton

Versões diferentes do Safari têm necessidades diferentes - confira aqui exemplos ao vivo: browserstrangeness.bitbucket.io/css_hacks.html#safari [Or the Mirror] browserstrangeness.github.io/css_hacks.html#safari
Jeff Clayton

Respostas:


357
  • ATUALIZADO PARA CATALINA E SAFARI 13 (Atualização no início de 2020) *

NOTA: Filtros e compiladores (como o mecanismo SASS) esperam código padrão 'entre navegadores' - NÃO hacks CSS como esses, o que significa que eles reescreverão, destruirão ou removerão os hacks, pois não é isso que os hacks fazem. Muito disso é um código não-padrão que foi cuidadosamente desenvolvido para segmentar apenas versões de navegador único e não pode funcionar se elas forem alteradas. Se você deseja usá-lo com esses, você deve carregar o CSS hack escolhido depois de qualquer filtro ou compilador . Isso pode parecer um dado, mas tem havido muita confusão entre as pessoas que não percebem que estão desfazendo um hack, executando-o através de um software que não foi projetado para esse fim.

O Safari mudou desde a versão 6.1, como muitos notaram.

Observe: se você está usando o Chrome [e agora também o Firefox] no iOS (pelo menos nas versões 6.1 do iOS e mais recentes) e se pergunta por que nenhum dos hacks parece separar o Chrome do Safari, é porque a versão iOS do Chrome está usando o mecanismo do Safari. Ele usa hacks do Safari e não os do Chrome. Saiba mais sobre isso aqui: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ O Firefox para iOS foi lançado no outono de 2015. Ele também responde a o Safari Hacks, mas nenhum do Firefox, igual ao iOS Chrome.

TAMBÉM: Se você tentou um ou mais hacks e tem problemas para fazê-los funcionar, publique um código de exemplo (melhor ainda, uma página de teste) - o hack que você está tentando e que navegador (s) (versão exata!) Você está usando o dispositivo que você está usando. Sem essas informações adicionais, é impossível para mim ou qualquer outra pessoa aqui ajudá-lo.

Geralmente, é uma correção simples ou um ponto e vírgula ausente. Com CSS, geralmente é isso ou um problema de qual ordem o código está listado nas folhas de estilo, se não apenas erros de CSS. Por favor, teste os hacks aqui no site de teste. Se funcionar lá, significa que o hack realmente está funcionando para a sua instalação, mas é outra coisa que precisa ser resolvida. As pessoas aqui realmente gostam de ajudar, ou pelo menos apontam você na direção certa.

O site de teste:

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

E ESPELHO!

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

Aqui, fora do caminho, existem hacks para você usar em versões mais recentes do Safari.

Você deve tentar este primeiro, pois abrange as versões atuais do Safari e é apenas puro Safari:

Este ainda funciona corretamente com o Safari 13 (início de 2020):

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Para cobrir mais versões, 6.1 e acima, neste momento você precisa usar o próximo par de hacks css. O do 6.1-10.0 é compatível com o que lida com 10.1 e superior.

Então, aqui está uma que eu trabalhei para o Safari 10.1+:

A consulta de mídia dupla é importante aqui, não a remova.

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Tente este se o SCSS ou outro conjunto de ferramentas tiver problemas com a consulta de mídia aninhada:

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Este próximo funciona para 6.1-10.0, mas não para 10.1 (atualização de final de março de 2017)

Esse hack que eu criei durante muitos meses de testes e experimentações combinando vários outros hacks.

OBSERVAÇÕES: como acima, a consulta de mídia dupla NÃO é um acidente - exclui muitos navegadores mais antigos que não conseguem lidar com o aninhamento de consultas de mídia. - O espaço que falta depois de um dos 'e' também é importante. Afinal, isso é um hack ... e o único que funciona para 6.1 e todas as versões mais recentes do Safari no momento. Também esteja ciente, conforme listado nos comentários abaixo, o hack é um CSS não padrão e deve ser aplicado DEPOIS de um filtro. Filtros como mecanismos SASS reescrevem / desfazem ou o removem completamente.

Como mencionado acima, verifique minha página de teste para ver como está funcionando (sem modificações!)

E aqui está o código:

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

    }
}}

Para obter mais CSS do 'versão específica' do Safari, continue lendo abaixo.

/* Safari 11+ */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

Um para o Safari 11.0:

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Um para o Safari 10.0:

/* Safari 10.0 (not 10.1) */

_::-webkit-:host:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Trabalhos ligeiramente modificados para 10.1 (apenas):

/* 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 (dispositivos não 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 do Safari 9:

Um simples suporte à consulta de recurso hack para o Safari 9.0 e posterior:

@supports (-webkit-hyphens:none)
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

Um simples corte de sublinhado para o Safari 9.0 e posterior:

_:not(a,b), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Outro para o Safari 9.0 e superior:

/* Safari 9+ */

_:default:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

e outros recursos de suporte também consultam:

/* Safari 9+ */

@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}

Um para o Safari 9.0-10.0:

/* Safari 9.0-10.0 (not 10.1) */

_::-webkit-:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

O Safari 9 agora inclui detecção de recursos para que possamos usá-lo agora ...

/* Safari 9 */

@supports (overflow:-webkit-marquee) and (justify-content:inherit) 
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

Agora, segmente apenas dispositivos iOS. Como mencionado acima, como o Chrome no iOS está enraizado no Safari, é claro que também atinge esse.

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

}

um para o Safari 9.0 ou superior, mas não para dispositivos iOS:

/* Safari 9+ (non-iOS) */

_:default:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

E um para o Safari 9.0-10.0, mas não para dispositivos iOS:

/* Safari 9.0-10.0 (not 10.1) (non-iOS) */

_:-webkit-full-screen:not(:root:root), .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

Abaixo estão os hacks que separam 6.1-7.0 e 7.1+. Eles também exigiam uma combinação de vários hacks para obter o resultado certo:

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

    );}
}

Desde que eu apontei o caminho para bloquear dispositivos iOS, eis a versão modificada do hack do Safari 6.1+ que tem como alvo dispositivos não 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; 

    }
}}

Para usá-los:

<div class="safari_only">This text will be Blue in Safari</div>

Geralmente, [como nesta pergunta], a razão pela qual as pessoas perguntam sobre os hackers do Safari é principalmente a referência a separá-lo do Google Chrome (novamente NÃO para iOS!). Pode ser importante publicar a alternativa: como direcionar o Chrome separadamente do Safari também, Estou providenciando isso para você aqui, caso seja necessário.

Aqui estão os princípios básicos, verifique novamente minha página de teste para várias versões específicas do Chrome, mas elas cobrem o Chrome em geral. O Chrome é a versão 45, as versões Dev e Canary estão com a versão 47 no momento.

Minha antiga combinação de consulta de mídia que eu coloquei no navegador hacks ainda funciona apenas para o Chrome 29 ou superior:

/* Chrome 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
    .chrome_only {

       color:#0000FF; 
       background-color:#CCCCCC; 

    }
}

Uma consulta ao recurso @supports também funciona bem para o Chrome 29+ ... uma versão modificada da que estávamos usando para o Chrome 28+ abaixo. O Safari 9, os próximos navegadores Firefox e o Microsoft Edge não são escolhidos com este:

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

    }
}

Anteriormente, o Chrome 28 e mais recentes eram fáceis de segmentar. Este é um que eu enviei para o browserhacks depois de vê-lo incluído em um bloco de outro código CSS (não originalmente destinado a hackear CSS) e percebi o que ele faz, então extraí a parte relevante para nossos propósitos:

[OBSERVAÇÃO:] Este método mais antigo abaixo mostra agora o Safari 9 e o navegador Microsoft Edge sem a atualização acima. As próximas versões do Firefox e Microsoft Edge adicionaram suporte a vários códigos CSS -webkit- em sua programação, e o Edge e o Safari 9 adicionaram suporte à detecção de recursos do @supports. Chrome e Firefox incluíram @supports anteriormente.

/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */

@supports (-webkit-appearance:none) 
{
    .chrome_and_safari {

       color:#0000FF; 
       background-color:#CCCCCC; 

    }
}

O bloco das versões 22-28 do Chrome (se necessário para suportar versões mais antigas) também é possível segmentar com um toque nos meus hacks combinados do Safari que publiquei acima:

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

Como os hacks de formatação CSS do Safari acima, eles podem ser usados ​​da seguinte maneira:

<div class="chrome_only">This text will be Blue in Chrome</div>

Para que você não precise procurá-lo neste post, aqui está minha página de teste ao vivo novamente:

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

[Ou o espelho]

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

A página de teste também tem muitas outras, especificamente baseadas em versão, para ajudá-lo a diferenciar ainda mais o Chrome e o Safari, além de muitos hacks nos navegadores Firefox, Microsoft Edge e Internet Explorer.

NOTA: Se algo não funcionar para você, verifique primeiro a página de teste, mas forneça um código de exemplo e QUALQUER hack que você está tentando que alguém o ajude.


9
Só quero dizer que a página de teste é incrível. Agora posso navegar para esse site com qualquer dispositivo e ver quais regras css são aplicáveis!
duyn9uyen

1
Isso se aplica ao Safari no iPhone ou iPad?
Greg Rozmarynowycz

1
na verdade, acabei de resolver minha própria pergunta usando uma combinação do exemplo acima AND the (; property: value;); abaixo e funcionou muito bem!
mydoglixu

1
A invasão do Safari 6.1+ na parte superior desta resposta gera um erro no compilador Sass. Existe uma maneira de resolver isso?
Blackbird

2
@ Blackbird Desculpe, mas você não pode compilar ou filtrar os hacks, eles os arruinam. Eles precisam ser usados ​​como estão. (Adicione-os ao arquivo css completo após a compilação.) O fato de não serem padrão é o motivo pelo qual eles funcionam.
22815 Jeffreyton

89

Existe uma maneira de filtrar o Safari 5 ou superior no 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/… - Eu tenho trabalhado em muitos (eu testo e crio hacks css para o browserhacks.com) e página de teste aqui: browserstrangeness.bitbucket.org/css_hacks.html#webkit
Jeff Clayton

Nota: no iOS [testado no iOS 7], a versão do Chrome está realmente executando o mecanismo do safari; portanto, em ipads ou iphones, você usa os hacks do safari. Para outros dispositivos, eles são diferentes.
9138 Jeff Clayton

Então, basicamente o código na resposta funciona no Safari 5.0 e 6.0 e não no 6.1+?
NicCattrell #

Para ser absolutamente preciso, a construção :: i-block-chrome. - Os hacks do Safari tendem a funcionar assim: um lote lida com 5.1-6.0, outro lida com 6.1-7.0 e os mais novos com 7.1-8.0. Eles parecem atualizar bastante as coisas até que decidam ir para a próxima versão numérica, muito próxima à versão '.1' anterior.
Jeff Clayton

No momento desta resposta em 2013, o Safari 6.1 havia acabado de ser lançado; portanto, poucas pessoas viram que o navegador havia mudado; portanto, esse era o mais preciso da época. Se você precisar de mais novos, verifique minha resposta abaixo. Esta foi uma ótima resposta no momento em que foi fornecida. No entanto, o tempo muda, então eu postei meu trabalho como uma atualização para este. Levou meses para eu criar os 6.1-7.0 e 7.1-8.0. Espero que você goste dos resultados. Provavelmente, quando uma versão 8.1 for lançada, se seguir o padrão, também será necessário um hack diferente. Novamente, apenas o tempo dirá.
Jeff Clayton

21

Apenas Sarari

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

8
Gostaria de adicionar alguma explicação? Eu literalmente digito root: root?
Nubtacular

1
Este é exatamente correto para Safari 3.x (e Chrome versão 1.0 única que ninguém usa Chrome 1.0, uma vez que é na década de 30 agora ...)
Jeff Clayton

Agora, este também tem como alvo o Safari 9.0, portanto, as estatísticas completas foram atualizadas: / * Chrome 1.0, Safari 3.X, Safari 9.0+ * /
Jeff Clayton

4
O :not(:root:root)seletor é inválido de acordo com a especificação CSS Selectors 3 (na qual :not()pode conter apenas um seletor simples, ou seja, um seletor de tipo ou um ID ou uma classe ou uma pseudo-classe), mas completamente válido de acordo com o CSS Selectors 4 (onde :not()aceita a lista de seletores). É verdade que atualmente apenas o Safari entende a sintaxe do CSS Selectors 4, mas esta solução não é à prova de futuro.
Ilya Streltsyn

2
Muito poucos hacks não são (e muito código padrão real não é devido a alterações de versão) à prova de futuro. O melhor plano é que, se você usar um hack css, use-o apenas como uma correção temporária para ganhar tempo para fazer uma atualização mais oficial entre navegadores.
Jeff Clayton

14

Este hack 100% funciona apenas para o safari 5.1-6.0. Acabei de testar com sucesso.

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

3
Esse hack é realmente para o Chrome e o Safari em versões diferentes. Ele permite o Chrome 10-24 (que ninguém mais usa, e é por isso que as pessoas listaram que ele bloqueou o Chrome) e o Safari 5.1-6.0. No entanto, ele não funciona para o Safari 6.1 e mais recente. Naquela época, não havia nenhum tipo melhor de invasão.
Jeff Clayton

1
@ Veronica-lotti, isso funcionou para mim também. Você se livra da minha dor de cabeça. Obrigado
Andhi Irawan

Pessoas - por favor, tenha cuidado. O que esses comentários estão descrevendo é um método que não funciona para versões do Safari nos últimos anos e funciona apenas para versões antigas. O que isso realmente significa é que a maioria das pessoas na internet não terá o resultado que você está procurando, mas apenas as pessoas com computadores mais antigos. Isso não funciona para os sistemas operacionais atuais. Neste momento a maioria das pessoas tem a versão 12 ou superior (não 6.0 e inferior, que eram correntes apenas durante a era Windows XP.)
Jeff Clayton

8

Para aqueles que desejam implementar um hack para o Safari 7.0 e abaixo, mas não para 7.1 e acima - use:

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

Experimentei o Safari 7 e não consegui fazê-lo funcionar. Você pode fornecer um exemplo prático por acaso?
Juicy

@ Juicy: Existem testes ao vivo no browserhacks.com - Eles funcionam no Safari 7 e inferior, e também no Chrome 28 e inferior. (Como mencionado em outro destacamento iOS 7 e 8 talvez outros também usar o motor Safari para o Chrome, por isso, Chrome e Safari em iPads estão realmente Safari)
Jeff Clayton

Você pode estar tentando no Safari 7.1, não no Safari 7.0. É válido para 7.0 e versões anteriores, não 7.1 e mais recentes. Quando esta resposta foi publicada, 7.0 era a versão mais recente do Safari, então era verdade na época.
Jeff Clayton

funciona para o Safari para Windows (versão 5.1.7 (7534.57.2))
jave.web

funciona para o Safari para Mac (versão 6.0.2 (7536.26.17))
Merlin

6

Substitua sua turma em (.myClass)

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


Esta é uma boa para Safari - o único outro navegador ele atinge é Chrome 1 (ninguém usa Chome 1 anymore)
Jeff Clayton

Exact Specs para as pessoas que não estão usando as últimas Macs: Chrome 1, Safari 3.x, Safari 9.0+ (não Safari 4-8)
Jeff Clayton

Isso funciona com a versão mais recente do Safari 7+ e, até onde eu sei, deve ser a resposta aceita.
Jason Engage

Uau, graças a isso finalmente funcionou para mim depois de tentar tantos hackers no Safari para o Safari !!!
FairyQueen 4/03

4

A propósito, para qualquer um de vocês que só precisa segmentar o Safari em celulares, basta adicionar uma consulta de mídia a este hack:

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

E não esqueça de adicionar a classe .safari_only ao elemento que você deseja segmentar, exemplo:

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

4

Eu gosto de usar o seguinte método:

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">') 
};

Esse método de corte de JavaScript requer que o pacote JQuery seja instalado.
22618 Jeff

Isso é considerado uma prática extremamente ruim, o sniffing do navegador é muito suscetível a erros e leva a montes de falsos positivos. Não faça isso, mesmo o sniffing de consulta de mídia é muito sujo, mas pode ser aceitável para alterações muito pequenas.
Wannes

3

Ao usar esse filtro somente para safari, eu poderia segmentar o Safari (iOS e Mac), mas excluir o Chrome (e outros navegadores):

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

2

Etapa 1: use https://modernizr.com/

Etapa 2: use a classe html .regions para selecionar apenas o Safari

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

O Modernizr adicionará classes html ao DOM com base no que o navegador atual suporta. O Safari suporta regiões http://caniuse.com/#feat=css-regions, enquanto outros navegadores não (ainda assim). Este método também é muito eficaz na seleção de diferentes versões do IE. Que a força esteja com você.


1
modernizr é um ótimo complemento de javascript para sites, para identificar navegadores, excelente ferramenta! - esse truque irá funcionar (como outros) até outros navegadores decidir apoiar as regiões apresentam
Jeff Clayton

1
As regiões CSS não são mais suportadas.
1stthomas

2
Regiões me permite segmentar o Safari 6.1 a 11 e 7.1 a 11.2 no iOS e isso já é ótimo.
Lowtechsun # 11/18

@lowtechsun - ótimo postando suas estatísticas sobre isso, os hacks são bons apenas como conhecimento de quais navegadores eles segmentam.
Jeff Clayton

2

oi eu fiz isso e funcionou para mim

@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;
        }

    }

}

Este é um bom conjunto, bom uso do hack com várias configurações de dispositivos para sites usando visualizações responsivas.
Jeff Clayton

2

Nota: Se apenas o iOS for suficiente (se você estiver disposto a sacrificar a área de trabalho do Safari), isso funcionará:

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

1

Você pode usar um hack de consulta de mídia para selecionar o Safari 6.1-7.0 de outros navegadores.

@media \\0 screen {}

Isenção de responsabilidade: este hack também tem como alvo versões antigas do Chrome (antes de julho de 2013).


No entanto, ele não funciona no Safari mais recente, mas as estatísticas deste são cirúrgicas: Safari 6.1-7.0, Chrome 22-28 ainda é útil.
Jeff Clayton

0

Isso funciona:

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

0

No final, uso um pouco de JavaScript para alcançá-lo:

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

no CSS, para direcionar o mecanismo do navegador Apple, o seletor será:

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

0

https://stackoverflow.com/a/17637937/3174065 , é respondida aqui, embora esse método use algum JS. se usado, certifique-se de colocar os js no rodapé, o corpo deverá estar totalmente carregado para que ele seja acionado corretamente; quando colocado na cabeça, ele erro porque dispara antes do corpo ser carregado.

Em seguida, ele adiciona uma classe .safari ao corpo, mas apenas no safari, facilitando a segmentação do css.


-1

Está trabalhando 100% no safari .. tentei

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

Isso funciona nas versões mais antigas do Safari, não nas atuais - 6.1 e mais recentes.
Jeff Clayton

-1

Eu testei e funcionou para mim

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.