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

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?

• 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.

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

Apenas Sarari

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

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

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

Substitua sua turma em (.myClass)

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

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>

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

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

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ê.

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

    }

}

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

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).

Isso funciona:

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

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{
    ...
}

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.

Está trabalhando 100% no safari .. tentei

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

Eu testei e funcionou para mim

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}