Esta é a segunda edição do Chrome Dev Insider, em que compartilhamos atualizações sobre as novidades e os destaques da comunidade e do Chrome. Este é um novo episódio de histórias internas sobre como abordamos nosso trabalho e um breve resumo de algumas das atualizações mais importantes que você precisa conhecer.
Sou Rachel Andrew, líder de conteúdo do web.dev e do developer.chrome.com, como parte da equipe de relações com desenvolvedores do Chrome. Trabalho na Web há mais de 20 anos, com foco em padrões abertos da Web e CSS, e sou membro do Grupo de trabalho de CSS.
Há dois meses, encerramos o Google I/O, em que compartilhamos algumas das atualizações mais importantes sobre como estamos ajudando os desenvolvedores a tornar a Web mais rápida e eficiente, mantendo as informações dos usuários seguras e privadas.
Uma das coisas que se destacou (e ficamos felizes que a comunidade percebeu!) é a enorme quantidade de trabalho que a equipe está fazendo para oferecer suporte a mais recursos de CSS e UI na Web. Nesta edição do Chrome Dev Insider, vamos mostrar os bastidores de quem está por trás desse trabalho, como apoiamos os desenvolvedores de CSS e UI e o que vem por aí. Por isso, estou muito feliz em apresentar esta edição do Insider.
Notícias
No primeiro Chrome Dev Insider, compartilhamos algumas atualizações sobre as iniciativas Compat 2021 e Interop 2022, em que fornecedores de navegadores e players do ecossistema se uniram para trazer mais recursos à Web que são compatíveis com todos os navegadores. A iniciativa tem um foco forte em CSS porque a incompatibilidade de navegadores é um dos maiores desafios para os desenvolvedores de CSS.
Embora isso não seja novidade para a maioria das pessoas, é interessante ver o progresso que já fizemos em todos os navegadores.
No início do mês passado, o Safari anunciou um lançamento incrível com o Safari 16.0 Beta, que inclui recursos interessantes como consultas de contêiner, subgrade e um inspetor de flexbox. As versões recentes do Firefox e do Chrome incluem vários recursos e correções interessantes. Todos os meses, eu abordo os principais aspectos dos navegadores estáveis e Beta na minha série de postagens Novidades na plataforma da Web.
Informação privilegiada: suporte a desenvolvedores de CSS e UI
Como 2022 foi um ano incrível para os recursos de CSS, achamos que seria bom mostrar os bastidores. Conversei com Una Kravets, líder de DevRel para interface da Web e Devtools, e Nicole Sullivan, nossa gerente de produtos para interface da Web com foco em APIs CSS e HTML, sobre a jornada do Chrome para oferecer suporte a desenvolvedores de interface.
Vamos começar com vocês dois. Conte mais sobre vocês.
Nicole:sou gerente de produtos da interface para Web no Chrome. Meu foco é em novas APIs de CSS e HTML, além de desenvolvedores e designers que criam interfaces. É um espaço interessante com algumas APIs muito importantes sendo lançadas, como consultas de contêiner, escopo e (esperamos!) ritmo vertical.
Una:lidero as equipes de DevRel de interface para Web e DevTools. Nosso foco é apoiar os engenheiros de interface do usuário na plataforma Web e garantir que eles tenham as ferramentas necessárias para ter sucesso. Isso inclui APIs CSS e componentes HTML, além de recursos do DevTools para conferir mudanças e feedback ativos.
O suporte do Chrome para desenvolvedores de interface do usuário ganhou força nos últimos anos. Por que você acha que demorou tanto para chegar até aqui? Quais foram os maiores desafios?
Una:precisamos mostrar a importância desse trabalho e por que ele deve ser uma prioridade. Começamos com a pesquisa MDN DNA em 2019, que identificou a interface como um dos principais problemas da plataforma. Desde então, continuamos usando dados como nosso guia no MDN e em nossas próprias pesquisas internas de satisfação dos desenvolvedores. Como resultado, conseguimos um apoio maior da liderança e priorizamos o trabalho de engenharia em torno de alguns dos recursos para desenvolvedores mais solicitados no espaço da interface, que também formam a maioria do foco de iniciativas como Compat 2021 e Interop 2022.
Nicole:além de conseguir a aprovação da liderança, também tivemos que encontrar a maneira certa de disponibilizar essas APIs para os desenvolvedores. Quando entrei no Chrome, estraguei isso em um projeto chamado APIs em camadas (ou LAPIs, na sigla em inglês). As LAPIs foram criadas para oferecer aos desenvolvedores uma experiência de componente de substituição. Ainda acho que esse foi um ótimo resultado, mas cometemos muitos erros. Primeiro, focamos nas notificações de toast e em uma lista virtual. É quase impossível tornar os toasts acessíveis, e uma lista virtual é um dos componentes mais difíceis de acertar. Nossas intenções eram boas, mas o projeto não estava ajudando os desenvolvedores, então o desativamos. É difícil aprender da maneira mais difícil, mas cada erro está alimentando o renascimento do CSS e do HTML que está acontecendo agora.
Vamos falar um pouco mais sobre as APIs do Maps. O que aconteceu lá?
Nicole:para as LAPIs, sabíamos que a Web precisava de uma experiência de desenvolvedor de componentes de substituição mais próxima da criação de interfaces nativas. E ficou claro que reinventar a roda estava prejudicando os desenvolvedores. Não consigo contar o número de guias que criei na minha carreira! Dito isso, tentamos resolver isso enviando JavaScript com o navegador, o que foi muito difícil. Ninguém havia enviado JavaScript no navegador antes, e não estava claro como ele deveria interagir com o código C++ que alimenta o mecanismo de renderização do navegador. Ouvimos outros fornecedores de navegadores (obrigado, Mozilla!) e desistimos dessa abordagem. Assim, conseguimos encontrar algo muito melhor com a Open UI. Ao usar HTML e CSS, criamos soluções flexíveis e declarativas. Como é declarativo, podemos incorporar a acessibilidade de uma forma que não seria tão fácil de fazer com JavaScript. Estou muito animado com o que vem por aí. Estamos trabalhando para oferecer suporte a selectmenu, popup, tooltip, nav, accordion, tabs, carousel e toggle, que são padrões de design de interface essenciais.
Aprendemos muito. E sei que houve outras iniciativas nesse espaço, como o CSS Houdini. Qual é a história?
Una:Sim, o CSS Houdini é outro lugar em que aprendemos com a comunidade. Há muitos recursos úteis do Houdini, mas muitos eram de nível muito baixo para ganhar mais adoção e suporte. Percebemos que a implementação de APIs de baixo nível não reduzia necessariamente a dificuldade para os desenvolvedores. Em vez disso, o foco em soluções e necessidades de nível mais alto ajudou a conquistar suporte entre navegadores e os desembarques necessários para mudar o cenário no ecossistema. Estamos acompanhando o progresso em https://ishoudinireadyyet.com/.
Falando em suporte entre navegadores, iniciativas como o Interop 2022 e o Open UI parecem estar trazendo resultados positivos significativos para a comunidade. O que você está ouvindo dos desenvolvedores?
Una:Um dos principais problemas que ouvimos dos desenvolvedores é "fazer o design funcionar da mesma forma em todos os navegadores". Para resolver isso, trabalhamos com outros fornecedores de navegadores para priorizar e lançar alguns dos recursos para desenvolvedores mais solicitados. E o feedback que recebemos da comunidade foi extremamente positivo. Além disso, com um grande esforço de reestruturação chamado RenderingNG, foi possível implementar alguns desses recursos com muito mais eficiência. Os desenvolvedores estão animados porque esses recursos tão aguardados, que eles pedem há anos, estão finalmente sendo trabalhados e chegando a vários navegadores.
Nicole:A empolgação na comunidade é palpável. Confira no Twitter. :)
Trabalhar com o ecossistema tem sido fundamental para o sucesso em facilitar a vida dos desenvolvedores. Sei que sua equipe tem trabalhado muito nisso. Quer compartilhar alguns detalhes?
Nicole:primeiro, fico sempre impressionada com os projetos que os desenvolvedores criam na Web. De bibliotecas minúsculas a frameworks completos, os desenvolvedores estão criando coisas incríveis. É uma comunidade fantástica de criadores. O Chrome está tomando várias medidas para se conectar mais a esses projetos.
Por exemplo, há alguns anos, começamos a trabalhar com frameworks JavaScript, como React e Angular. E os metaestruturas, como Next, Nuxt e Gatsby. No ano passado, começamos a fazer o mesmo com ferramentas e frameworks de interface do usuário, como Sass, Bootstrap e Material. Espero que no próximo ano possamos colaborar com o GreenSock e outras ferramentas que facilitam a vida dos desenvolvedores. Acabei de assistir a uma palestra da Cassie Evans, da GreenSock, na Smashing Conference, e fiquei muito animado para trabalhar com pessoas da área de animação.
Então, onde vemos a maior oportunidade para o ecossistema de interface da Web?
Una:em termos de grandes oportunidades, sinto que estamos apenas começando a descobrir o que é possível fazer com experiências personalizáveis na Web. Novas APIs, como consultas de contêiner e os recursos de mídia de preferência do usuário do CSS, estão redefinindo a maneira como os desenvolvedores veem o design responsivo. Também estou animado com as experiências de design colaborativo que permitem que desenvolvedores e designers trabalhem em união com os usuários que visitam os sites deles.
E Nicole, quais são os próximos passos da sua equipe?
Nicole:nem todas as análises detalhadas se transformam em algo que pode ser lançado, mas há muitas coisas que me empolgam no momento:
Una mencionou a primeira coisa: estamos ativando o design responsivo baseado em componentes. Ele inclui ferramentas para projetar sistemas de cores para que os designers possam responder às preferências do usuário, como o modo escuro. Por exemplo, o espaço de cores OKLCH mantém o brilho consistente em todos os tons. Os designers podem passar da escolha de cores para a criação de relações entre elas, sem acabar com paletas de aparência confusa.
Também estamos trabalhando em algumas das APIs mais solicitadas, como consultas de contêiner, camadas em cascata, seletor pai (:has), estilos com escopo e aninhamento. Os desenvolvedores precisam deles para criar sistemas de design flexíveis e cheios de componentes reutilizáveis.
Animações vinculadas à rolagem são outra área divertida. Gostei muito da demonstração do Steve Gardner. Ele tem uma rolagem suave e animações legais de avião acionadas ao rolar. Embora sejam divertidos, pode ser difícil acertar, principalmente pensando na acessibilidade. Por isso, estamos fazendo testes de acessibilidade com usuários no recurso agora.
O que mais me empolga são os controles integrados da interface da Web. Os desenvolvedores continuam criando o mesmo conjunto de guias repetidamente. Acho que o navegador pode ajudar. No Open UI, estamos trabalhando em componentes como selectmenu, popup, tooltip, tabs, nav, accordion e toggle. Estamos analisando como incorporar a acessibilidade a essas primitivas do navegador para que a Web possa, com o tempo, se tornar acessível por padrão. Assim, os desenvolvedores podem se concentrar nos problemas mais complexos e sutis, enquanto o navegador oferece suporte aos conceitos básicos, como a navegação por guias. Isso provavelmente precisa de uma postagem própria, então vou parar por aqui por enquanto.
Por fim, vamos continuar investindo na interoperabilidade entre navegadores. Foi ótimo trabalhar com as pessoas do WebKit e do Gecko para trazer consistência à experiência do desenvolvedor. Os desenvolvedores deixaram claro que querem isso!
E se você ainda não conferiu, a API Shared Element Transitions da equipe do Seamless Web vai mudar a forma como as pessoas criam para a Web. Todas essas pequenas transições sutis que permitem aos designers orientar seus projetos no espaço físico não apenas serão possíveis, mas fáceis. Jake Archibald tem uma ótima demonstração (link em inglês).
Se tudo der certo, talvez até analisemos o ritmo vertical este ano! Podemos criar com base no LayoutNG, que desbloqueia muitos recursos.
Agradeço aos dois. Tenho certeza de que toda a comunidade, assim como nós, está animada para ver o ritmo renovado de melhorias e recursos chegando ao mundo da interface da Web. Ainda há muito para entender. Por onde você diria que alguém deve começar essa jornada?
Una:nossa sessão Novidades para a plataforma Web no I/O aborda os destaques de muitos dos recursos que serão lançados este ano. Adam Argyle também escreveu um artigo incrível sobre todas as novas e futuras implementações de CSS. Por enquanto, vou me concentrar nas versões estáveis e ficar de olho no restante do trabalho que está por vir. Sua incrível série New to the web platform é ótima para isso. Ao assinar a newsletter do web.dev, os desenvolvedores também recebem esse conteúdo na caixa de entrada. Para desenvolvedores que querem se envolver e ajudar com tudo isso, participar do Open UI é uma das melhores maneiras de apoiar esse trabalho.
Principais atualizações futuras
Continuando nossa tradição, vamos avisar sobre uma mudança que você precisa ter em mente ao criar experiências na Web.
Limitar max-age para cookies a 400 dias
- A atualização:quando os cookies são definidos com um atributo
Expires/Max-Ageexplícito, o valor agora é limitado a no máximo 400 dias no futuro. Antes, não havia limite, e os cookies podiam expirar vários milênios no futuro. O objetivo desse limite é equilibrar padrões de uso comuns e respeito à privacidade do usuário. Qualquer site visitado com mais frequência do que a cada 400 dias pode atualizar os cookies para garantir a continuidade do serviço. Assim, os usuários podem ter certeza de que os cookies não vão permanecer no navegador por milênios sem uso. - Cronograma estimado:lançamento no Chrome 104 (estável em 2 de agosto de 2022).
- CTA para desenvolvedores:os desenvolvedores talvez precisem atualizar os cookies com mais frequência do que antes quando os usuários visitam os sites deles. Caso contrário, os usuários poderão ser desconectados 400 dias após a definição inicial do cookie.
Espero que tenha gostado de ler esta edição do Chrome Dev Insider. Se você perdeu, confira a primeira. Vamos trazer mais novidades no próximo trimestre.
Até lá, diga o que você achou desta edição do Chrome Dev Insider e o que podemos fazer para melhorar.
O que você achou desta edição do The Chrome Dev Insider? Compartilhe seu feedback.