A equipe do Chrome teve uma grande presença na conferência CSS Day deste ano. Criamos a Central de Ajuda do CSS, respondendo às perguntas dos participantes, mas também tínhamos um quadro branco em que perguntamos às pessoas o que elas achavam que ainda faltava no CSS. Neste post, vou compartilhar os resultados dessa pergunta e pedir que você nos diga o que acha que está faltando em HTML e CSS preenchendo esta breve pesquisa. Você concorda com os participantes do CSS Day?
As dez solicitações mais frequentes
Os participantes foram convidados a escrever ideias em notas adesivas e adicioná-las ao quadro. As pessoas também podiam votar nas ideias adicionando um adesivo. Os dez principais recursos são os seguintes.
Suporte para estilização de entradas
Esse foi o recurso mais votado, com 21 votos. Você realmente quer maneiras de estilizar esses elementos comuns da interface de maneira consistente.
Essa é uma área que conhecemos bem no Chrome, como um dos principais problemas dos desenvolvedores, e estamos trabalhando para criar soluções melhores para eles. Por exemplo, os elementos de seleção personalizáveis têm como objetivo oferecer uma maneira de ativar o novo comportamento de estilo. Você pode adicionar imagens ou até mesmo estilizar mais as opções. A vantagem dessa abordagem é que ela usa um menu de seleção normal, permitindo que isso seja um aprimoramento progressivo.
Ocultas visualmente
Com 19 votos no CSS Day, essa foi a segunda solicitação mais popular. A solicitação é uma maneira de adicionar conteúdo usado apenas por leitores de tela. Pode ser um elemento HTML, em que o conteúdo não é exibido e só é lido por um leitor de tela.
Normalmente, as pessoas conseguem isso criando
uma classe .visually-hidden
para ocultar o
conteúdo, mas ainda torná-lo acessível para leitores de tela.
Embora essa seja uma solicitação comum, há pessoas que não acham que isso deve ser implementado. Para mais detalhes, leia O conteúdo oculto visualmente é um hack que precisa ser resolvido, não consagrado e esta discussão sobre o problema 560 do CSS WG.
position: sticky inside overflow:hidden
Essa solicitação recebeu 16 votos. No momento, position: sticky só funciona quando
todos os familiares responsáveis são overflow: visible.
Há um problema aberto de 2017 solicitando isso.
Embora o caso de uso inicial
de ativar o uso de overflow: hidden para limpar flutuações possa ser menos
necessário hoje, há muitos outros cenários detalhados na conversa.
Animar para height: auto
Com 12 votos, muitos participantes queriam animar para height: auto. Temos o prazer
de anunciar que isso vai chegar à plataforma da Web com
a propriedade interpolate-size e a função calc-size() do CSS.
Elas vão estar disponíveis a partir do Chrome 129.
Em breve, vamos publicar mais informações sobre isso.
Outros tipos de entrada
O HTML5 trouxe muitos tipos diferentes para o elemento <input>, por
exemplo, type="email" para um endereço de e-mail ou type="range" para um controle deslizante de intervalo.
No CSS Day, recebemos 10 votos para mais desses tipos, por exemplo, intervalo duplo
ou preenchimento automático com datalist personalizado.
Números aleatórios reais no CSS
Outra solicitação com 10 votos foi para números aleatórios reais no CSS. Isso foi solicitado e funcionou no passado para uma animation-duration aleatória.
Classes de estilo de mescla
O CSS adicionou vários recursos que antes eram vistos em pré-processadores de CSS: variáveis com propriedades personalizadas e agora o aninhamento de CSS. No entanto, os mixins reutilizáveis ainda não fazem parte da linguagem, mas sete dos participantes do CSS Day estavam interessados neles.
Houve uma resolução do Grupo de trabalho do CSS para começar a trabalhar em uma especificação para esse recurso. Você pode adicionar seus pensamentos e casos de uso à discussão sobre o problema.
Estilos globais no shadow DOM
Outro problema que tem uma grande linha de discussão de casos de uso é a solicitação para permitir que estilos CSS globais sejam aplicados dentro de um DOM sombra. Seis pessoas pediram isso no CSS Day. Esse recurso permitiria que os estilos de redefinição globais também fossem aplicados em componentes da Web e que arquivos CSS únicos funcionassem em todos os componentes de um site. Confira este resumo de casos de uso e nos informe se você também gostaria de ter esse recurso.
Como dividir unidades mistas
Houve uma proposta para a Interop 2024
que solicitava a
capacidade de dividir por unidades misturadas, por exemplo, calc(100vw / 1px). Ela foi considerada
muito ampla para a interoperabilidade de 2024. No entanto, muitos desenvolvedores, incluindo seis pessoas no CSS
Day, gostariam de implementar isso.
nth-letter
O CSS tem vários pseudoelementos que funcionam como se você tivesse envolvido um intervalo em
alguma seção de conteúdo. Por exemplo, o
pseudoelemento
::first-letter
é direcionado à primeira letra da primeira linha do bloco de contêineres
a que ele é aplicado.
O ::nth-letter está faltando nessa lista, e você está pedindo ::nth-letter há cerca de 20 anos.
Sabemos que essa é uma solicitação antiga dos desenvolvedores da Web. No CSS Day, seis pessoas votaram
nisso, tornando-o o último dos dez recursos mais desejados.
Você concorda com os 10 primeiros lugares do CSS Day?
Gostaríamos de saber a opinião de um público mais amplo sobre esses problemas. Algum deles está entre os 10 principais? Caso contrário, há algo mais que você gostaria de ver em CSS e HTML? Preencha este breve formulário e vamos resumir as respostas em outra postagem.