only - media query safari css




Existe um css hack para safari só não chrome? (11)

Estou tentando encontrar um css hack para apenas safari não chrome, eu sei que estes são ambos os navegadores webkit, mas estou tendo problemas com div alinhamentos no cromo e safari, cada um exibe de forma diferente.

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

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

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


Apenas Sarari

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

By the way, para qualquer um de vocês que só precisa direcionar o Safari em celulares, basta adicionar uma consulta de mídia para 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 se esqueça de adicionar a classe .safari_only ao elemento que você deseja segmentar, por exemplo:

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

Este hack 100% funciona apenas para safari. Acabei de testar com sucesso.

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

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

Existe uma maneira de filtrar o Safari 5+ a partir do 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;
    }
}

Isso funciona:

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

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

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

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

Etapa 2: use as .regions da classe html 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). Esse método também é muito eficaz na seleção de diferentes versões do IE. Que a força esteja com você.


Você pode usar um hack de consulta de mídia para selecionar o Safari 7+ de outros navegadores.

@media \\0 screen {}

Aviso: este hack também tem como alvo antigas versões do Chrome (antes de julho de 2013).


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

    }

}

  • ATUALIZADO PARA O SAFARI 11 (Atualização de outono de 2017) *

OBSERVAÇÃO: Filtros e compiladores (como o mecanismo SASS) esperam um código padrão de "cross-browser" - NÃO hacks de CSS como esses, o que significa que eles reescreverão, destruirão ou removerão os hacks, já que isso não é o que os hacks fazem. Esse é um código não padrão que foi cuidadosamente criado para segmentar apenas versões de navegadores e não pode funcionar se elas forem alteradas. Se você deseja usá-lo com esses, você deve carregar o seu hack de CSS escolhido APÓS 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.

Tenha em atenção: se estiver a utilizar o Chrome [e agora também o Firefox] no iOS (pelo menos nas versões iOS 6.1 e mais recente) e ficar a pensar porque é que nenhum dos hacks separa o Chrome do Safari, é porque a versão iOS do Chrome está usando o mecanismo do Safari. Ele usa os hacks do Safari e não os do Chrome. Mais sobre isso aqui: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

ALÉM DISSO: Se você tentou um ou mais dos hacks e tem problemas para fazê-los funcionar, por favor poste um código de exemplo (melhor ainda uma página de teste) - o hack que você está tentando e qual navegador (versão exata!) Você estão usando, bem como o dispositivo que você está usando. Sem essa informação adicional, é impossível para mim ou qualquer outra pessoa aqui para ajudá-lo.

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

O local do teste:

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

E ESPELHO!

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

O Firefox para iOS foi lançado no outono de 2015 e também responde aos Safari Hacks, mas nenhum dos do Firefox, igual ao iOS Chrome.

Que fora do caminho aqui são hacks para você usar para versões mais recentes do Safari.

Você deve tentar este primeiro, já que ele cobre as versões atuais do Safari e é apenas puro-Safari:

Este ainda funciona corretamente com o Safari 10.1:

/* 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ê tem que usar o próximo par de hacks css. Aquele para 6.1-10.0 para ir com um que lida com 10.1 e para cima.

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 10.1 (atualização de março de 2017)

Este hack que eu criei durante muitos meses de testes e experimentos, combinando vários outros hacks.

NOTAS: como acima, a consulta de mídia dupla NÃO é um acidente - ela exclui muitos navegadores mais antigos que não podem manipular o aninhamento de consulta de mídia. - O espaço que falta depois de um dos e também é importante. Isto é afinal, um hack ... e o único que funciona para o 6.1 e todas as versões mais novas do Safari neste momento. Também esteja ciente, conforme listado nos comentários abaixo, o hack é css não padrão e deve ser aplicado APÓS um filtro. Filtros como os mecanismos SASS irão reescrever / desfazer ou removê-lo completamente.

Como mencionado acima, por favor, verifique minha página de teste para vê-lo funcionando como está (sem modificação!)

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 mais CSS do Safari, por favor 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; 

    }
}}

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; 

    }
}}

Um para o Safari 10.0:

/* Safari 10.0 (not 10.1) */

_::-webkit-:host:not(:root:root), .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; 

}

Safari 9 CSS Hacks:

Um para o Safari 9.0 e acima:

/* Safari 9+ */

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

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

}

e uma consulta de recursos de suporte também:

/* 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 usar isso agora ...

/* Safari 9 */

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

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

}

Agora, apenas para dispositivos iOS. Como mencionado acima, uma vez que o Chrome no iOS está enraizado no Safari, é claro que também o atinge.

/* 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+, 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 exigiram uma combinação de vários hacks para obter o resultado correto:

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

    );}
}

Como apontei a maneira de bloquear dispositivos iOS, aqui está a versão modificada do Safari 6.1+ que segmenta 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 hacks do Safari é principalmente em relação à separação do Google Chrome (novamente NÃO iOS!) Pode ser importante postar a alternativa: como segmentar o Chrome separadamente do Safari também, Eu estou providenciando isso para você aqui, caso seja necessário.

Aqui estão as noções básicas, mais uma vez, verifique a minha página de teste para várias versões específicas do Chrome, mas elas abrangem o Google Chrome em geral. O Chrome é a versão 45, as versões Dev e Canary são até a versão 47 no momento.

Meu antigo combo de consulta de mídia que eu coloquei em browserhacks ainda funciona apenas para o Chrome 29+:

/* Chrome 29+ */

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

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

    }
}

Uma consulta de recurso @supports funciona bem também 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 navegador Microsoft Edge não são selecionados 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 o mais recente 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 concebido como um hack de CSS) e percebi o que ele faz, então extraí a parte relevante para nossos propósitos:

[NOTA:] Esse método antigo abaixo agora exibe o Safari 9 e o navegador Microsoft Edge sem a atualização acima. As próximas versões do Firefox e do Microsoft Edge adicionaram suporte a vários códigos CSS-webkit em sua programação, e tanto o Edge quanto o Safari 9 adicionaram suporte para a detecção de recursos do @supports. O Chrome e o 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 de versões do Google Chrome 22-28 (se necessário para dar suporte a versões mais antigas) também é possível segmentar com um toque em meus hacks combo do Safari que postei 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>

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

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

[Ou o espelho]

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

A página de teste também tem muitos outros, especificamente baseados em versão, para ajudá-lo a diferenciar entre o Chrome e o Safari, além de muitos hacks para os navegadores Firefox, Microsoft Edge e Internet Explorer.

OBSERVAÇÃO: Se algo não funcionar para você, verifique a página de teste primeiro, mas forneça um código de exemplo e QUAL VOCÊ está tentando fazer com que alguém o ajude.







safari