Publicado em 6 de dezembro de 2024
Os resultados do Estado do CSS 2024 e do Estado do HTML 2024 já estão disponíveis. Esta postagem faz uma análise inicial de algumas das descobertas mais interessantes dessas pesquisas.
Otimismo em relação à plataforma Web
Antes de analisar alguns dos problemas que as pessoas estão enfrentando com HTML e CSS, as pesquisas transmitem muito otimismo sobre a plataforma. Quando perguntamos se a plataforma da Web está indo na direção certa, 58% das pessoas que participaram do State of HTML concordaram com essa afirmação, e 18% concordaram fortemente.
No CSS, :has() foi o novo recurso favorito, com 36% das pessoas classificando-o como o melhor. O segundo favorito é
@container, com 17%, associado ao aninhamento do CSS.
O que você está usando?
Houve algumas surpresas nos dados do CSS. Por exemplo, mais de 75% das pessoas usaram efeitos de filtro CSS, tornando esse o recurso mais usado. Considerando o número de queixas sobre a cascata ao longo dos anos, é interessante que as camadas de cascata sejam usadas por apenas 18,9% das pessoas. Talvez haja um link aqui para a adoção de ferramentas como o Tailwind, que impedem que as pessoas tenham problemas relacionados a cascatas com tanta frequência.
Elementos de referência, como <main> e <nav>, aparecem na parte de cima da pesquisa HTML
para as coisas que você está usando. É ótimo ver tantas pessoas usando o carregamento lento
e técnicas de imagens responsivas.
Principais problemas de suporte a navegadores
Problemas com interoperabilidade ou suporte do navegador para recursos sempre surgem quando conversamos com desenvolvedores. As pesquisas perguntaram diretamente sobre os problemas que você encontrou. Os 10 recursos mais problemáticos são os seguintes, classificados pela porcentagem de pessoas que selecionaram esse recurso.
- API Popover
- Posicionamento de âncora
- Consultas em contêiner
:has()- Visualização de aninhamento de CSS
- API Transition
- Subgrade
- Grade
<dialog>- Apps Web Progressivos
O posicionamento de âncora teve 11% nas duas pesquisas, a API View Transition teve 9% no Estado do CSS e 8% no Estado do HTML, mostrando como esses recursos são considerados valiosos pelos desenvolvedores.
Curiosamente, vários dos recursos são interoperáveis. As consultas de contêiner,
:has(), o aninhamento de CSS e a subgrade estão disponíveis como padrão. A API Popover
também está, mas com um problema de dispensa leve no iOS. O elemento <dialog> agora está
amplamente disponível, assim como o layout de grade do CSS. Vale a pena analisar
esses resultados para descobrir quais são os problemas das pessoas. As respostas para
grade, por exemplo, geralmente se referem a ela como difícil de aprender, em vez de citar um
problema real de interoperabilidade.
Esperamos que o valor de referência ajude os desenvolvedores a entender o status das coisas e saber se um problema que eles estão enfrentando é devido à falta de compatibilidade do navegador ou a outra coisa. É ótimo ver que essas pesquisas destacam o status de referência dos recursos. Também é possível conferir o status de disponibilidade em navegadores para os principais problemas de CSS em webstatus.dev.
Recursos em falta
As pesquisas também perguntam quais recursos e funcionalidades estão faltando na
plataforma. Isso nos ajuda a saber o que ainda é difícil de fazer. Houve taxas de resposta mais baixas para essa pergunta. No entanto, na pesquisa "State of CSS", as pessoas mais frequentemente pediam mixins, lógica condicional e layout de alvenaria.
Curiosamente, as pessoas também pediram um seletor pai (:has() fornece essa
funcionalidade) e aninhamento, que já existe e está disponível na versão de referência.
A pergunta feita aos participantes do State of HTML foi: "Se você pudesse adicionar três elementos ao HTML, quais seriam eles?" 51% das pessoas pediram tabelas de dados, e outras escolhas populares incluem guias e elementos de alternância.
Sobre o que você quer saber mais?
As pesquisas têm um recurso em que você pode adicionar itens a uma lista de leitura, se quiser saber mais sobre eles após concluir a pesquisa. Esses são dados valiosos, especialmente se você trabalha com a criação de conteúdo para desenvolvedores. A lista a seguir mostra os dez principais recursos das duas pesquisas, classificados pela porcentagem de participantes que os adicionaram à lista.
- CSS
hanging-punctuation - CSS
offset-path @scope- Posicionamento de âncora
- Seleção personalizável
view-timelinescroll-timelinefocusgroupatributo- Animação de propriedades discretas
image()
Confira os resultados completos com a lista de leitura CSS e a lista de leitura HTML.
Um indicador da comunidade da Web
O Chrome oferece suporte a essas pesquisas porque é uma maneira de receber informações sobre seus principais problemas e o que você mais gosta na plataforma da Web. Não é o único indicador que usamos, mas é um lugar onde você pode nos contar diretamente o que pensa. Se você respondeu a uma ou a ambas as pesquisas, agradecemos! Você está ajudando a melhorar a Web da maneira que quiser. Se você quiser ajudar, ainda dá tempo de participar do The State of JS.