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 evoluindo, 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 perguntas 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, 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 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 aqui.

Elemento da caixa de diálogo

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

Compatibilidade com navegadores

• 37
• 79
• 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, 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.
Talvez você já saiba como escrever 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

• 104
• 104
• 72
• 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, 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 vai variar dependendo se as barras de ferramentas estão visíveis ou não.
Novas unidades de janela de visualização, como svh e lvh, oferecem aos desenvolvedores Web um controle mais refinado na hora de criar designs 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 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

• 98
• 98
• 94
• 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

• 86
• 86
• 85
• 15,4

Origem

Confira a seção "Foco" no curso "Aprenda 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 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

• 67
• 79
• 102
• 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 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).