Recursos de referência que você pode usar hoje

Conheça alguns dos recursos que fazem parte da linha de base.

Mariko Kosaka

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 constante evolução e adaptação seja útil, ela também pode 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 serão compatíveis com esse novo recurso?" "Quando posso realmente 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?

Nesta publicação, quero destacar alguns recursos que agora estão disponíveis para todos os principais mecanismos de navegador nas duas últimas versões principais. 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 aqui.

Elemento de diálogo

O elemento <dialog> é um novo elemento HTML para criar prompts de diálogo, como pop-ups e modais.

Compatibilidade com navegadores

  • Chrome: 37.
  • Edge: 79.
  • Firefox: 98.
  • Safari: 15.4.

Origem

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 nativo, estão incorporados recursos como gerenciamento de foco, rastreamento de guias e manutenção do contexto de empilhamento. 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;
}

Compatibilidade com navegadores

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 72.
  • Safari: 14.1.

Origem

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, a barra de URL e a barra de navegação estão visíveis, mas, em outros momentos, elas estão completamente retraídas.
O tamanho real da janela de visualização será diferente se as barras de ferramentas estiverem visíveis ou não.
Novas unidades de visualização, como svh e lvh, oferecem aos desenvolvedores da Web mais controle ao projetar para dispositivos móveis. Saiba mais no artigo Unidades de viewport grandes, pequenas e dinâmicas.

Compatibilidade com navegadores

  • Chrome: 108
  • Edge: 108.
  • Firefox: 101.
  • Safari: 15.4.

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. Tratava-se de uma invasão tão comum que o V8 (mecanismo JavaScript do Chrome) melhorou muito o desempenho 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);

Compatibilidade com navegadores

  • Chrome: 98.
  • Edge: 98.
  • Firefox: 94.
  • Safari: 15.4.

Origem

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

Compatibilidade com navegadores

  • Chrome: 86.
  • Edge: 86.
  • Firefox: 85.
  • Safari: 15.4.

Origem

Confira a seção "Foco" no curso "Aprenda CSS" para mais informações.

Interface TransformStream

A interface TransformStream da API Streams permite canalizar fluxos 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 Busca orienta você por esse exemplo de caso de uso.

Compatibilidade com navegadores

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Origem

Conclusão

Muitos outros recursos 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. Confira mais detalhes em web.dev/baseline.

Para ficar por dentro das novidades, nossa equipe publica artigos quando um recurso se torna interoperável e publica atualizações mensais sobre o que está acontecendo na plataforma da Web, de recursos experimentais a recém-interoperáveis.

Estamos sempre curiosos para saber se o que estamos fazendo pode ajudar ou se você precisa de diferentes tipos de suporte. Entre em contato conosco no Grupo da comunidade do WebDX (em inglês).