Conheça alguns dos recursos que se tornaram interoperáveis em 2022.
Chegamos ao fim de mais um ano, e é hora de analisar as melhorias feitas pelos navegadores enquanto trabalhamos juntos para melhorar a interoperabilidade da plataforma da Web. Confira como tudo começou na nossa postagem de março deste ano, quando a iniciativa foi lançada.
As pontuações gerais no final do ano mostram uma grande melhoria em todos os mecanismos.
Confira nesta postagem o progresso de 2022. Além desses recursos principais, todos os mecanismos tiveram várias melhorias menores. Corrigimos problemas pequenos que poderiam causar inconsistências entre os mecanismos e fazer você atrapalhar durante o desenvolvimento. Ver grandes recursos disponíveis em diferentes navegadores é definitivamente emocionante, mas, às vezes, os pequenos problemas causam mais problemas, e é ótimo ver o quanto foi melhorado.
Propagar camadas
As camadas em cascata permitem gerenciar a cascata agrupando seletores em camadas. É o tipo de recurso que só se torna útil quando tem suporte em todos os lugares. Todos os principais mecanismos agora oferecem suporte a camadas em cascata, e as pontuações em todos os navegadores refletem a interoperabilidade do recurso, com apenas alguns testes para o Firefox.
Elemento da caixa de diálogo
O elemento de caixa de diálogo permite a criação de caixas de diálogo modais e não modais. Esse é um padrão comum na Web, e o uso desse elemento oferece usabilidade e acessibilidade que você precisaria desenvolver e testar ao criar seus próprios componentes. No artigo Como criar um componente de caixa de diálogo, Adam Argyle explica como desenvolver usando esse elemento para criar diferentes tipos de caixas de diálogo.
Subgrade
No início de 2022, o único navegador que aceitava o valor subgrid para grid-template-rows e grid-template-columns era o Firefox. Em 2022, o Safari foi aprovado, e o recurso está em desenvolvimento no Chrome. O prazo de fim de ano para interoperabilidade vai ser perdido, mas está a caminho.
Unidades da janela de visualização
As unidades da janela de visualização são o único recurso que atingiu 100% dos testes aprovados em todos os mecanismos. Isso inclui os conceitos da janela de visualização pequena e grande, que considera a mudança no tamanho da janela de visualização em dispositivos móveis à medida que os elementos da interface do dispositivo aparecem e desaparecem. Saiba mais sobre esses blocos na postagem sobre as unidades da janela de visualização grandes, pequenas e dinâmicas.
Compatibilidade com navegadores
- 108
- 108
- 101
- 15,4
Cor 4
Essa coleção de trabalhos de cor permite que o CSS não apenas especifique cores em gamas de maior definição (por exemplo, display p3 e rec2020), mas também fornece novas funções de cor, cada uma com utilitários exclusivos para trabalhar com cores. Os novos espaços de cor são lch(), oklch(), lab(), oklab(), display-p3, rec2020, a98-rgb, prophoto-rgb, xyz, xyz-d50 e xzy-d65: teste-os no Canary hoje mesmo com esta flag ativada. Essas mudanças também se aplicam aos gradientes, permitindo que os autores especifiquem qual espaço de cores seus gradientes usam. A mesma flag também ativa o suporte a color-mix(), permitindo que você misture duas cores em um espaço da sua escolha. A função color-mix() também está atrás de uma sinalização no Safari e no Firefox. Mais cores, melhores cores, melhores gradientes e melhores ferramentas.
Interoperabilidade de 2023
Espero que você goste de saber que não pretendemos parar no fim de 2022, e que a Interoperabilidade de 2023 já está na fase inicial de planejamento. No Ano Novo, anunciaremos os recursos selecionados e esperamos que mais um ano facilite o desenvolvimento para a Web.
Imagem principal por Ian Schneider.