Recursos de referência que você pode usar hoje

Conhecer apenas alguns dos recursos que fazem parte do valor de referência.

A Web está sempre evoluindo e os navegadores são atualizados constantemente para oferecer aos desenvolvedores novas ferramentas para inovar na plataforma. As coisas que antes precisavam de bibliotecas auxiliares se tornam parte da plataforma da Web e têm suporte em 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 gerar confusão. Pode ser difícil navegar por todas essas atualizações. Como desenvolvedores, temos perguntas como: "Quando todos os mecanismos de navegador serão compatíveis com 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 verdadeira é "depende". O que é necessário e o que é utilizável depende da base de usuários, do conjunto de tecnologias, da estrutura da equipe e dos dispositivos compatíveis. No entanto, todos concordamos que o cenário atual da Web pode dificultar a tomada dessas 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 atributos que chegaram nos últimos anos? Os recursos experimentais que aprendemos há cerca de dois anos estão prontos para serem usados?

Nesta postagem, quero destacar alguns recursos que estão disponíveis para os principais mecanismos de navegador nas duas últimas versões. Esse é o ponto de corte em que acreditamos que a maioria dos desenvolvedores acredita que um recurso é seguro para uso, e é o conjunto de recursos que estamos chamando de referência. Para saber mais, consulte o anúncio da linha de base aqui.

Elemento da caixa de diálogo

O elemento <dialog> é um novo elemento HTML para criar solicitações de caixas 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 da 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, 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

O uso de transformações CSS é uma forma eficiente de adicionar um movimento ao seu site.
Você já sabe como criar 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 quando você está escrevendo animações de frame-chave complexas.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Para uma explicação detalhada sobre essa alteração, leia Controle granular sobre as 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 elas sã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 da Web um controle mais preciso ao projetar para dispositivos móveis. Saiba mais no artigo As unidades da janela de visualização grandes, pequenas e dinâmicas.

Cópia detalhada em JavaScript

Antes, para criar uma cópia detalhada de um objeto sem referência ao objeto original, um desafio conhecido era JSON.stringify combinado com JSON.parse. Esse foi um hack tão comum que o V8 (o mecanismo JavaScript do Chrome) melhorou agressivamente o desempenho desse truque. Mas você não precisa mais fazer isso com structuredClone.

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

Para mais detalhes, consulte Cópia direta em JavaScript usandostructuredClone (link em inglês).

A pseudoclasse :focus-visible

Como desenvolvedores da Web, todos nós conhecemos aquele "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 a 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 você pode 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 de foco em "Aprender CSS" para mais informações.

A interface TransformStream

Com a interface TransformStream da API Streams, é possível canalizar streams entre si.

Por exemplo, é possível transmitir dados de um lugar e compactar o fluxo de dados para outro à medida que eles são transmitidos. O artigo Solicitações de streaming com a API Busca mostra esse exemplo de caso de uso.

Conclusão

Há muitos outros recursos que recentemente se tornaram interoperáveis e estáveis para usar na plataforma da Web. No futuro, vamos trabalhar com o WebDX Community Group para esclarecer esses conjuntos de recursos de referência. Acesse web.dev/baseline para ver 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 ajuda você ou se precisa de outros tipos de suporte. Por isso, entre em contato conosco no WebDX Community Group.