No fim do ano passado, o Interoperabilidade de 2023 terminou. Esse esforço de fornecedores de navegadores e outras partes tem como objetivo criar uma Web mais interoperável, com menos diferenças entre navegadores para confundir você. Esta postagem mostra os resultados finais e também alguns dos recursos favoritos da equipe do Chrome.
As pontuações finais
É ótimo ver tanta coisa verde. Compare isso com as pontuações do início de 2023. Percorremos um longo caminho, com cada navegador tendo um aumento enorme na pontuação.
Por que estamos animados?
Confira a lista completa de áreas de foco para 2023 no painel da interoperabilidade de 2023. Algumas áreas de foco, como :has(), consultas de contêiner e o atributo inert, cobriram todo um recurso. Outros,
como o trabalho no Flexbox, lidavam com algumas falhas sutis de teste em um
recurso existente para vários navegadores.
:has()
"Por fim, um seletor principal para CSS! Isso foi solicitado quase desde o primeiro dia, e finalmente tê-lo em todos os navegadores é fantástico. Isso significa que os desenvolvedores precisam executar menos JavaScript para emular esse seletor."— Thomas Steiner, engenheiro de relações com desenvolvedores no Chrome.
Há uma grande empolgação sobre a pseudoclasse funcional
:has(), porque ela trouxe para a plataforma uma solicitação importante dos desenvolvedores. Ela
oferece um seletor pai, que permite selecionar um elemento com base no que está
dentro dele. No entanto, ele pode ser usado para muito mais. Conforme explicado em CSS unido, é possível selecionar muito mais do que um elemento pai e até mesmo fazer seleções laterais.
:has() do CSS: baseUna Kravets, engenheiro de relações com desenvolvedores da equipe do Chrome, explica:
"O seletor :has() é um dos novos recursos de CSS mais flexíveis e eficientes. Com ela, é possível definir o estilo de qualquer elemento pai com base na presença, no estado ou até mesmo no número de elementos filhos. Mas o importante é que você pode combiná-lo com outros combinadores para definir o estilo de irmãos e ter um novo nível de controle de estilo sobre a interface. É um recurso bem flexível. Já vi muitas demonstrações interessantes que reduzem a necessidade de depender de scripts adicionais ao aproveitar o poder de :has()."
Como Philip Jägenstedt, um engenheiro de software do Chrome lembrou, o :has() foi
o principal recurso com que os desenvolvedores tiveram dificuldade devido à falta de suporte
na pesquisa State of CSS em 2023.
Não somos os únicos que estão empolgados em disponibilizar esse recurso.
Você pode ouvir Una e Adam Argyle, falar sobre has() no podcast CSS e saber mais sobre
:has() nestas postagens da comunidade da Web.
Consultas em contêiner
2023 foi um ótimo ano para as coisas que antes eram consideradas impossíveis. Além do :has(), a plataforma da Web finalmente ganhou suporte entre navegadores para consultas de contêiner. Você vem pedindo consultas de contêiner (ou elemento) desde
2011, apenas um ano após a introdução do conceito de design responsivo. Agora,
ele já está aqui e está disponível nos principais mecanismos de navegador.
Una e Adam conversaram sobre consultas de contêiner no Podcast do CSS, e Una as apresentou em um episódio de Como projetar no navegador. A comunidade também tem compartilhado muitas dicas e ideias.
- As consultas de contêiner chegaram
- Unidades de consulta do contêiner e tipografia fluida (link em inglês)
Subgrade
O Subgrid é minha inclusão favorita no Interop 2023. Ele permite que você defina uma grade em um elemento pai e, em seguida, use os tamanhos de faixa definidos nesse pai, em grades aninhadas dentro dessa grade principal. Graças ao trabalho dos engenheiros da plataforma Web do Microsoft Edge, o subgrid ficou disponível em todos os principais mecanismos de navegador em 2023 para aumentar a pontuação do Chrome e levar esse recurso incrível para todos.
Adriana Jara, engenheira de relações com desenvolvedores do Chrome, me contou como a grade e a subgrade facilitaram a criação de uma ótima interface.
"Sou péssimo com recursos visuais, layouts, mantendo um visual consistente e me adaptando às telas. Mas com grade e subgrade, é possível criar um design que funcione em vários tamanhos de tela e se adapte automaticamente ao conteúdo. É o meu favorito porque atende à necessidade básica de criar um site que dê aos usuários uma experiência decente sem muita experiência."
Escrevi alguns casos de uso para a subgrade em um artigo para 12 Days of Web. Assim como nos outros recursos desta postagem, você pode ouvir um episódio do podcast CSS sobre isso (em inglês). Também há diversos recursos de toda a Web.
- Conhecer a subgrade CSS
- Vídeo: Layouts mais fáceis e mais consistentes com a subgrade
- Posicionar conteúdo com grade e subgrade CSS
Espaços e funções de cor
Não foi nenhuma surpresa que o desenvolvedor de CSS do Chrome Adam Argyle tenha me dito que espaços e funções de cor eram seu recurso favorito,
"Adeus estranho, a variável de valor do canal HSL, math; Hello, as linhas de variante de cor just-in-time. Os novos espaços e funções de cores não resolvem apenas os problemas do fluxo de trabalho de cores, eles também dão acesso a cores e gradientes mais avançados, confiáveis e vibrantes. Não tem como não gostar de desbloquear algumas habilidades e facilitar sua vida ao mesmo tempo. Use esse tempero de interoperabilidade, e este prato fica colorido e delicioso."
Adam criou um conteúdo incrível para ajudar você a entender esses novos recursos, como o Guia de cores CSS de alta definição e gradient.style, e falou sobre as funções de cor no podcast CSS.
É incrível ter esses recursos disponíveis nos principais mecanismos de navegador. Saiba mais nestes ótimos artigos.
Estou ansioso para o Interop 2024
Quando os recursos se tornam interoperáveis, eles se tornam parte do valor de referência, recém-disponibilizados. É empolgante ver o número de novos recursos que entraram nesse grupo durante 2023, em grande parte devido ao trabalho de todos os envolvidos no Interop 2023. Em breve será hora de anunciar as áreas de foco selecionadas para 2024, e estamos ansiosos para ver como a plataforma da Web pode se tornar muito melhor este ano.