Conheça apenas alguns dos recursos que se tornaram interoperáveis em 2022.
Chegamos ao final de mais um ano, e é hora de conferir as melhorias feitas pelos navegadores enquanto trabalhamos juntos para melhorar a interoperabilidade da plataforma da Web. Confira como a iniciativa começou na nossa postagem em 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.
Saiba mais sobre o progresso que fizemos em 2022. Além desses recursos principais, todos os mecanismos fizeram muitas melhorias menores. Corrigimos pequenos problemas que podem causar inconsistências entre os mecanismos e causar confusão durante o desenvolvimento. Ver grandes recursos disponíveis em vários navegadores é definitivamente empolgante, mas às vezes são as pequenas coisas que causam mais problemas, e é ótimo ver o que melhorou.
Camadas em cascata
As camadas em cascata permitem gerenciar a cascata agrupando seletores em camadas. Esse é o tipo de recurso que só se torna útil quando disponível 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 a serem aprovados no 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, de outra forma, 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 usar 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. O Safari já foi lançado em 2022, e o recurso está em desenvolvimento no Chrome. Vai perder o prazo de fim de ano para interoperabilidade, mas está a caminho.
Unidades da janela de visualização
As unidades da janela de visualização são o único recurso que teve 100% de aprovação nos testes em todos os mecanismos. Isso inclui os conceitos de 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 grandes, pequenas e dinâmicas da janela de visualização.
Compatibilidade com navegadores
- 108
- 108
- 101
- 15,4
Cor 4
Essa coleção de trabalhos de cores permite que o CSS não apenas especifique cores em gamas de definição mais alta (por exemplo, display p3, rec2020), mas também fornece novas funções de cor, cada uma com utilidades exclusivas para trabalhar com cores. Novos espaços de cor são lch(), oklch(), lab(), oklab(), display-p3, rec2020, a98-rgb, prophoto-rgb, xyz, xyz-d50, xzy-d65: teste isso no Canary hoje com esta flag ativada. Essas alterações também se aplicam aos gradientes, permitindo que os autores especifiquem o espaço de cores usado por seus gradientes. A mesma sinalização também ativa o suporte a color-mix(), permitindo que você misture duas cores em um espaço de sua escolha. A função color-mix() também está atrás de uma sinalização no Safari e no Firefox. Mais cores, cores melhores, melhores gradientes e melhores ferramentas.
Interop 2023
Espero que você goste de saber que não vamos parar até o fim de 2022, e que o Interoperabilidade entre 2023 já está na fase inicial de planejamento. No ano novo, poderemos anunciar os recursos selecionados e esperamos mais um ano facilitar o desenvolvimento para a Web.
Imagem principal de Ian Schneider.