Publicado em 31 de março de 2025
Mais um mês passou, e muita coisa aconteceu desde o último resumo mensal da base. Nesta edição, vamos resumir algumas postagens que publicamos aqui no web.dev, alguns recursos recém-disponíveis do Baseline e algumas atualizações de ferramentas na comunidade.
O ESLint 0.6.0 foi lançado
Recentemente, publicamos sobre o lançamento do suporte do ESLint para linting CSS. Parte desse lançamento incluiu uma nova regra do ESLint, require-baseline, para linting dos recursos de CSS usados no projeto e se eles atingem um limite de referência específico.
Recentemente, a ESLint lançou a versão 0.6.0 do pacote @eslint/css, que inclui uma nova atualização importante que renomeia a regra require-baseline para use-baseline. Embora essa atualização pareça pequena, ela melhora a legibilidade da regra. Há também alguns outros recursos importantes e correções de bugs nesta versão, como a capacidade adicionada da regra use-baseline para verificar blocos CSS aninhados. Se você estiver usando uma versão anterior do @eslint/css, confira esta atualização.
Como consultar o painel da Web Platform
No início deste mês, publicamos uma postagem sobre como consultar o Painel da plataforma da Web. É possível consultar esse painel no front-end ou por uma API HTTP. Isso pode ser útil para ferramentas de referência, já que é possível consultar a API para encontrar recursos que atingiram um limite de referência específico.
Essa API pode ser útil para ferramentas em que você precisa receber informações rapidamente sobre recursos específicos. Por exemplo, você pode usar esse tipo de ferramenta para escrever um script que informa em algum intervalo quais recursos foram disponibilizados recentemente na versão de referência ou em geral. Se isso parece útil para você, leia a postagem.
Como pensar sobre a linha de base e os polyfills
A missão da referência é esclarecer quais recursos você pode usar com segurança. No entanto, mesmo com essa clareza, você ainda precisa pensar em como adotar os recursos de uma maneira que faça sentido para seus aplicativos da Web. Os preenchimentos polidos são uma parte importante desse processo. A referência não considera polyfills para saber se os recursos são novos ou amplamente disponíveis e não tenta dizer se você deve usá-los. Essa decisão é específica para seu aplicativo, mas é uma consideração importante.
Recentemente, publicamos um post sobre como pensar em baselines e polyfills. Acreditamos que ele oferece uma estrutura útil para pensar em como usá-los. A esperança com os recursos que se tornam disponíveis na versão mais recente ou amplamente disponíveis é que os polyfills se tornem menos necessários. Não há dúvidas de que os polifills são ferramentas úteis na caixa de ferramentas de desenvolvimento, mas eles têm desvantagens: podem ter um impacto negativo no desempenho do seu site e, em alguns casos, podem até causar problemas de acessibilidade. Esperamos que este guia ajude você a responder a essa pergunta difícil.
contenteditable="plaintext-only" está disponível como referência
O atributo contenteditable em um elemento HTML permite que o usuário mude o conteúdo como se fosse um campo de texto. Isso significa que, por exemplo, você pode colocar o atributo em um elemento <p>, e o usuário pode interagir com ele como um <textarea>. Em alguns casos de uso, o uso de contenteditable oferece vantagens em relação aos elementos de formulário comuns.
No entanto, os usuários colam coisas em elementos editáveis, e o que eles colam pode conter formatação de rich text, o que pode ser frustrante para usuários que só querem colar texto sem formatação em um campo. A combinação de atributo/valor contenteditable="plaintext-only" impede que isso aconteça e recentemente ficou disponível como referência. Para saber mais, leia a postagem de anúncio e saiba como oferecer uma experiência de edição melhor para os usuários que só querem colar texto em coisas sem toda a informação.
Intl.DurationFormat já está disponível
Você provavelmente já acessou um site em algum momento da sua vida e viu um texto que informava a duração do tempo até ou depois de algum evento, geralmente em uma string como "2 dias, 6 horas, 3 minutos". Esses dados são úteis para comunicar várias coisas oportunas, mas geralmente são fornecidos por uma biblioteca. Além disso, talvez você queira gerar essas informações em vários idiomas.
Intl.DurationFormat é um recurso de internacionalização que ficou disponível recentemente. Com a classe Intl.DurationFormat, é possível transmitir um objeto para o construtor que contém as unidades de tempo que você quer formatar em uma string e em quase qualquer idioma:
const duration = {
years: 1,
hours: 20,
minutes: 15,
seconds: 35
};
// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
O mais interessante é que, se o aplicativo depender de uma biblioteca para formatar strings como essa, em breve você poderá fazer isso sem uma biblioteca, economizando kilobytes para os usuários. Para mais informações, leia a postagem de anúncio sobre Intl.DurationFormat e saiba como aproveitar esse novo recurso.
Valor de referência no W3C Breakouts Day 2025
Recentemente, o W3C realizou a edição de 2025 do Breakouts Day, em que os membros apresentaram vários tópicos, e uma sessão útil sobre a baseline foi oferecida no dia 26 de março.
Se você não conhece a referência, esta sessão oferece uma visão geral rápida. Ele aborda os conceitos básicos da referência, como os conceitos "Recém-disponível" e "Disponível para todos", mas também explica como essas definições são determinadas pelos dados, começando pelo browser-compat-data e chegando aos dados web-features, que ajudam a descobrir quais recursos estão em qual limite de referência.
Se você perdeu esta sessão, não se preocupe. As apresentações da sessão já estão disponíveis. Confira se quiser.
Chegamos ao final!
Esta edição do resumo mensal não marca apenas o fim do mês, mas também do trimestre. Se você perdeu as versões anteriores do resumo, confira as edições de janeiro e fevereiro para saber tudo o que aconteceu com o valor de referência no primeiro trimestre deste ano. Como de costume, avise-nos se tivermos esquecido de algo relacionado à referência e vamos garantir que ele seja registrado em uma edição futura. Até daqui a um mês!