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