Conheça alguns dos recursos que fazem parte da linha de base.
Publicado em 10 de maio de 2023
A Web está sempre em evolução, e os navegadores são atualizados constantemente para oferecer aos desenvolvedores novas ferramentas para inovar na plataforma. Coisas que antes exigiam bibliotecas auxiliares passaram a fazer parte da plataforma da Web e passaram a ser compatíveis com todos os navegadores, além de maneiras mais curtas ou fáceis de codificar elementos de design.
Embora essa evolução e adaptação constantes sejam úteis, elas também podem causar confusão. Pode ser difícil navegar por todas essas atualizações. Como desenvolvedores, temos dúvidas como "Quando todos os mecanismos de navegador vão oferecer suporte a esse novo recurso?" "Quando posso começar a usar esses recursos no meu código de produção?" "Por quanto tempo devemos oferecer suporte a navegadores mais antigos?"
A resposta certa é "depende". O que é necessário e o que é utilizável depende da sua base de usuários, da pilha de tecnologia, da estrutura da equipe e dos dispositivos compatíveis. Mas todos concordamos que o cenário atual da Web pode dificultar a tomada de decisões.
A equipe do Chrome está colaborando com outros mecanismos de navegador e com a comunidade da Web para esclarecer as coisas. Isso inclui nosso trabalho em projetos como o Interop 2023, que ajuda a melhorar a interoperabilidade de um conjunto de recursos importantes. Mas e os recursos lançados nos últimos anos? Os recursos experimentais que conhecemos há dois anos estão prontos para uso?
Neste post, quero destacar alguns recursos que agora estão disponíveis para todos os principais mecanismos de navegador das duas versões mais recentes. Esse é o ponto de corte em que a maioria dos desenvolvedores considera que um recurso é seguro para uso. É o conjunto de recursos que chamamos de referência. Para mais informações, consulte o anúncio da referência.
Elemento de diálogo
O elemento <dialog> é um novo elemento HTML para criar prompts de diálogo, como pop-ups e modais.
Para usá-lo, defina o elemento modal e abra a caixa de diálogo chamando o método showModal() no elemento de caixa de diálogo.
<dialog id="d">
<form method="dialog">
<p>Hi, I'm a dialog.</p>
<button>ok</button>
</form>
</dialog>
<button onclick="d.showModal()">
Open Dialog
</button>
Como um elemento HTML integrado, recursos como gerenciamento de foco, rastreamento de guias e manutenção do contexto de empilhamento são integrados. Para saber mais, leia Como criar um componente de caixa de diálogo.
Propriedades de transformação CSS individuais
Usar transformações CSS é uma maneira eficiente de adicionar movimento ao seu site. Você pode estar familiarizado com a escrita de transformações CSS com três propriedades em uma linha. Com as propriedades de transformação individuais, agora é possível especificar propriedades de transformação individualmente. Isso é útil ao criar animações de frame-chave complexas.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
Para uma explicação detalhada dessa mudança, leia Controle mais refinado sobre transformações de CSS com propriedades de transformação individuais.
Novas unidades de janela de visualização
Em dispositivos móveis, o tamanho da janela de visualização é influenciado pela presença ou ausência de barras de ferramentas dinâmicas.
Às vezes, você tem uma barra de endereço e uma barra de navegação visíveis, mas às vezes essas barras estão completamente retraídas.
O tamanho real da janela de visualização vai variar dependendo se as barras de ferramentas estão visíveis ou não.
As novas unidades de viewport, como svh e lvh, oferecem aos desenvolvedores da Web um controle mais preciso ao projetar para dispositivos móveis. Saiba mais no artigo Unidades de viewport grandes, pequenas e dinâmicas.
Cópia profunda em JavaScript
No passado, para criar uma cópia detalhada de um objeto sem referência ao original, um hack popular era JSON.stringify combinado com JSON.parse. Esse era um hack tão comum que o V8 (mecanismo JavaScript do Chrome) melhorou drasticamente a performance desse truque. Mas você não precisa mais desse truque com structuredClone.
const original = {id: 0, prop: {name: "Tom"}}
/* Old hack */
const deepCopy = JSON.parse(JSON.stringify(original));
/* New way */
const deepCopy = structuredClone(original);
Consulte Cópia em profundidade no JavaScript usando structuredClone para mais detalhes.
A pseudoclasse :focus-visible
Como desenvolvedores da Web, todos nós conhecemos o "anel de foco" que aparece quando você navega em uma página com um teclado ou clica em elementos de entrada. É um recurso necessário para acessibilidade, mas às vezes atrapalha o design visual para diferentes usuários. A pseudoclasse CSS :focus-visible verifica se o navegador acredita que o foco precisa estar visível. Agora é possível especificar estilos apenas quando o foco precisa estar visível.
/* focus with tab key */
:focus-visible {
outline: 5px solid pink;
}
/* mouse click */
:focus:not(:focus-visible) {
outline: none;
}
Confira a seção "Foco" no curso "Aprenda CSS" para mais informações.
Interface TransformStream
A interface TransformStream da API Streams permite que os fluxos sejam canalizados uns para os outros.
Por exemplo, é possível transmitir dados de um lugar e compactar o fluxo de dados para outro local à medida que os dados são transmitidos. O artigo Solicitações de streaming com a API fetch mostra um exemplo desse caso de uso.
Conclusão
Há muitos outros recursos que recentemente se tornaram interoperáveis e estáveis para uso na plataforma da Web. No futuro, vamos trabalhar com o Grupo da comunidade do WebDX para esclarecer esses conjuntos de recursos de referência. Consulte a página de referência para conferir os novos desenvolvimentos.
Para ficar por dentro das novidades, nossa equipe publica artigos quando um recurso se torna interoperável e atualizações mensais sobre o que está acontecendo na plataforma da Web, de recursos experimentais a novos recursos interoperáveis.
Sempre ficamos curiosos para saber se o que estamos fazendo ajuda você ou se você precisa de outros tipos de suporte. Entre em contato com o Grupo da comunidade do WebDX.