Recursos de referência que você pode usar hoje

Saiba mais sobre alguns dos recursos que fazem parte do valor de referência.

Mariko Kosaka

A Web está sempre evoluindo, e os navegadores são atualizados constantemente para oferecer aos desenvolvedores novas ferramentas para inovar na plataforma. Coisas que anteriormente exigiam bibliotecas auxiliares se tornam parte da plataforma da Web e são compatíveis com todos os navegadores, junto com maneiras mais curtas ou mais 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, do conjunto de tecnologias, da estrutura da equipe e dos dispositivos compatíveis. Mas todos nós 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 oferecer mais clareza. 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 aprendemos há cerca de 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 final em que acreditamos que a maioria dos desenvolvedores vai sentir que um recurso é seguro para uso, e é o conjunto de recursos que chamamos de valor de referência. Para saber mais, consulte o anúncio sobre o valor de referência aqui.

Elemento da caixa de diálogo

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

Compatibilidade com navegadores

• 37
• 79,00
• 98
• 15,4

Origem

Para usá-lo, defina o elemento modal e abra a caixa de diálogo chamando o método showModal() no elemento correspondente.

<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 mais informações, leia Como criar um componente de caixa de diálogo.

Propriedades de transformação de CSS individuais

Usar transformações CSS é uma maneira eficiente de adicionar um movimento ao seu site.
Você deve estar familiarizado com a gravação de transformações CSS com três propriedades em uma linha.
Com as propriedades de transformação individuais, agora é possível especificar as 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

• 104
• 104
• 72
• 14,1

Origem

Para uma explicação detalhada dessa alteração, leia Controle refinado sobre transformações CSS com propriedades de transformação individuais.

Novas unidades da 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, há uma barra de URL e uma barra de ferramentas de navegação visíveis, mas às vezes essas barras estão completamente recolhidas.
O tamanho real da janela de visualização será diferente se as barras de ferramentas estiverem visíveis ou não.
Novas unidades da janela de visualização, como svh e lvh, oferecem aos desenvolvedores Web um controle mais refinado ao projetar para dispositivos móveis. Saiba mais no artigo As unidades grandes, pequenas e dinâmicas da janela de visualização.

Compatibilidade com navegadores

• 108
• 108
• 101
• 15,4

Texto detalhado em JavaScript

No passado, para criar uma cópia detalhada de um objeto sem referência ao objeto original, um hack famoso 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 dessa invasão com o 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

• 98
• 98
• 94,00
• 15,4

Origem

Para mais detalhes, consulte Cópia profunda em JavaScript usando estruturadoClone.

A pseudoclasse :focus-visible

Como desenvolvedores Web, todos nós estamos familiarizados com esse "anel de foco" que aparece quando você está navegando em uma página com um teclado ou clicando em elementos de entrada. É um recurso necessário para a acessibilidade, mas, às vezes, ele 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

• 86
• 86
• 85,00
• 15,4

Origem

Confira a seção de foco em Aprender a usar o CSS para mais informações.

A interface TransformStream

A interface TransformStream da API Streams permite canalizar os streams uns para os outros.

Por exemplo, é possível transmitir dados de um local e compactá-los para outro local conforme eles são transmitidos. O artigo Solicitações de streaming com a API Busca orienta você nesse exemplo de caso de uso.

Compatibilidade com navegadores

• 67
• 79,00
• 102
• 14,1

Origem

Resumo

Há muitos outros recursos que se tornaram interoperáveis e estáveis para usar na plataforma da Web. A partir de agora, vamos trabalhar com o WebDX Community Group para esclarecer esses conjuntos de recursos de referência. Acesse web.dev/baseline para mais detalhes.

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