Novos recursos empolgantes no Safari 16

A Apple lançou uma atualização do sistema operacional. Embalado com ele está a versão mais recente do Safari, 16.

Com lançamento previsto para o macOS 13 do próximo mês, o Safari 16 está repleto de atualizações, tornando-o um dos navegadores mais capazes disponíveis.

Para os web designers, o significado é o avanço nas tecnologias da web que permitem um trabalho de design mais livre e menos hacks para obter layouts complexos. Pouco a pouco, as recomendações de CSS estão sendo implementadas ao ponto de que o uso de JavaScript para layout está rapidamente se tornando tão desnecessário quanto odiado.

Parte disso foi anunciado em junho na versão beta do Safari 16. Mas muito foi adicionado nos últimos dois meses. Então, aqui está o que há de novo no Safari 16 hoje.

Consultas de contêiner CSS

A adição mais interessante ao Safari 16 é o CSS Container Queries.

É difícil subestimar a demanda por esse recurso; se você imaginar um botão de edição no Twitter que te presenteava com criptomoedas toda vez que você corrigia um erro de digitação, estaria chegando perto de quão popular é esse recurso.

Até agora, as consultas de mídia detectaram toda a janela de visualização. E assim, se você tem um elemento como um cartão, por exemplo, que precisa mudar em viewports menores, você precisa calcular o espaço disponível e adaptar o design do elemento de acordo. Infelizmente, isso frequentemente fica fora de sincronia com casos extremos, causando mais do que algumas dores de cabeça para os desenvolvedores front-end.

As consultas de mídia são severamente restritivas aos métodos de layout modernos, como Grid, que envolvem elementos automaticamente porque não há como detectar como os elementos são dispostos.

As Consultas de Contêiner resolvem isso permitindo que você defina estilos com base no tamanho do elemento que o contém; se uma div tiver 300px de largura, o conteúdo pode ter um design, e se tiver 400px de largura, eles podem ter um design diferente – tudo isso sem se importar com o tamanho de toda a janela de visualização.

Isso é perigosamente próximo dos princípios da OOP (Programação Orientada a Objetos) e quase eleva o CSS a uma linguagem de programação real. (Tudo o que precisamos é lógica condicional, e estamos lá.)

As versões mais recentes do Chrome, Edge e agora Safari (incluindo dispositivos móveis) suportam CSS Grid. Mesmo descontando o rápido declínio do Twitter, isso é muito mais emocionante do que qualquer botão de edição.

Subgrade CSS

Falando em Grid, se você construiu um site com ele (e se não o fez, onde esteve?), você saberá que elementos correspondentes em estruturas HTML complexas geralmente resultam em grids aninhados. A correspondência dessas grades requer gerenciamento cuidadoso, variáveis ​​CSS ou ambos. Com CSS Subgrid, as grades podem herdar definições de grade de uma grade definida mais acima na hierarquia.

O CSS Subgrid é suportado pelo Firefox há algum tempo, mas ainda não faz parte do Chrome ou Edge. Até que haja um suporte mais amplo, não é uma solução prática e usar um fallback nega qualquer benefício de usar o Subgrid. No entanto, sua introdução no Safari certamente anunciará uma rápida adoção pelo Google e pela Microsoft e fará a web avançar consideravelmente.

O CSS Subgrid provavelmente será uma solução prática dentro de 18 meses.

Suporte AVIF

AVIF é um formato de imagem excepcionalmente compacto que supera até mesmo o WebP em muitos casos. Ele ainda permite sequências, criando o que é essencialmente um GIF animado, mas menor, e bitmaps.

AVIF já é suportado pelo Chrome, com suporte parcial no Firefox. Safari agora se junta a eles.

O suporte a AVIF é uma das adições mais valiosas ao Safari 16 porque você provavelmente já está servindo imagens diferentes dentro de um elemento de imagem. Nesse caso, seus usuários do Safari 16 começarão a receber uma carga útil menor automaticamente, acelerando seu site e aumentando o UX e o SEO.

Animação aprimorada

O Safari 16 apresenta algumas melhorias significativas na animação, mas o que chama a atenção é que agora você pode animar CSS Grid.

Sim, deixe isso acontecer. Combine consultas de contêiner e animação. As possibilidades de estados de foco em elementos são tentadoras.

O Safari 16 também suporta CSS Offset Path — conhecido inicialmente como CSS Motion Path — que permite animar elementos ao longo de qualquer caminho definido. Isso permite o tipo de efeito animado que anteriormente precisava de JavaScript (ou Flash!)

Chrome, Edge e Firefox todos suportam CSS Offset Path; a adição do Safari significa que agora é uma solução prática que pode ser implantada na natureza.

Extensões do Inspetor da Web

Anunciado como parte da versão beta, o Web Inspector Extensions permite que os desenvolvedores da Web criem extensões para o Safari, assim como fariam para o Chrome.

As Extensões do Web Inspector — ou Extensões do Safari, como são destinadas a serem conhecidas — podem ser criadas em HTML, CSS e JS, portanto, a curva de aprendizado é superficial. É um bom caminho para o desenvolvimento de aplicativos para web designers.

Como a tecnologia subjacente é a mesma de outras extensões de navegador, qualquer pessoa que tenha feito uma extensão do Chrome, Edge ou Firefox poderá portá-la para o Safari 16+ com relativa facilidade. Como resultado, deve haver uma rápida expansão das extensões disponíveis.

Acessibilidade aprimorada

A acessibilidade é a chave para uma web eficaz e inclusiva. Seja como Bosch: todos contam, ou ninguém conta.

Ao testar um design para acessibilidade, os emuladores não o cortam. Na minha experiência, o Safari tem algumas das configurações de acessibilidade mais confiáveis, especialmente quando se trata de consultas de mídia como prefere-redução-movimento.

Mais ganhos neste campo significam que o Safari continua sendo uma ferramenta essencial para testes de controle de qualidade.

Reinicializações reduzidas

Por fim, quero levantar as mãos para comemorar o número reduzido de configurações de aparência CSS não padrão.

Durante anos, prefaciamos nossas folhas de estilo com redefinições elaboradas como Normalize, projetadas para desfazer todas as suposições que os desenvolvedores de navegadores fazem sobre o design e as preferências de interface do usuário de seus engenheiros.

O Safari 16 supostamente “removeu a maioria dos valores de aparência CSS não padrão”. Quão eficaz é isso e quanto podemos confiar nele, considerando os outros navegadores no mercado, ainda não sabemos. No entanto, como muitas das mudanças do Safari 16, é um passo em direção a um navegador que está do lado dos desenvolvedores, em vez de um obstáculo a ser superado.