Propriedade CSS aspect-ratio e @supports not

No meu primeiro app Svelte, que mostra uma lista de filmes, tinha uma seção com cartazes que não estava carregando apenas no celular da minha mãe. Alguns testes com outros celulares e realmente alguns não carregavam essa seção… 😓

Isso acontecia apenas em alguns iPhones, no computador sempre funcionava certinho.

Eu pensava que poderia ser algum bug estranho no Svelte, apesar de nenhum erro ou aviso aparecer no console.

Então o erro só poderia ser com o navegador Safari. Infelizmente o suporte dele no Windows foi descontinuado faz tempo, então não consegui baixar para testar.

Foi aí que encontrei um app que vale a pena documentar aqui. Ele se chama LambdaTest e testa o seu app em outros navegadores com versões antigas.

A versão gratuita possibilita o teste no Safari versão 13 com 10 minutos gratuitos. Assim que a página carregou, a seção de cartazes dos filmes não estava lá! Ótimo, finalmente tenho um jeito de replicar o erro e tentar consertar. 😅

Nesse app é possível inspecionar a página, e logo de cara apareceu uma propriedade CSS desabilitada… A propriedade era a aspect-ratio, que deixa o cartaz na proporção 2/3.

Mas como essa versão antiga do Safari não suporta essa propriedade, os cartazes não tinham width nem height, por isso não apareciam no app.

.movie {
  aspect-ratio: 2/3;
  width: 100%;
}
Code language: CSS (css)

Então como solucionar isso em navegadores que não suportam essa propriedade?

Existe uma regra no CSS que chama @supports. Você pode verificar se o navegador não tem suporte à certa propriedade e adicionar outras propriedades.

@supports not (aspect-ratio: 2/3  ) {
  .movie {
   padding-top: 150%;
  }
}
Code language: CSS (css)

O código CSS acima verifica se o navegador suporta a propriedade aspect-ratio com valor 2/3, e caso não suporte (not), o código será utilizado.

Essa é uma técnica antiga com a propriedade padding-top para fazer o que a propriedade aspect-ratio faz. Caso o aspect-ratio seja 2/3, é só dividir 3 por 2, multiplicar por 100 e adicionar o sinal de %.

Outro exemplo seria a proporção 16/9. Divida 9 por 16 (0,5625), multiplique por 100 e adicione %. O valor a ser utilizado no padding-top será de 56.25%.

Espero que tenha aprendido algo novo nessa postagem! Até a próxima! 😄