Bem-vindo à segunda edição do Chrome Dev Insider, onde compartilhamos atualizações sobre as novidades empolgantes da comunidade e do Chrome. Este é um novo episódio de histórias sobre como abordamos nosso trabalho e uma rápida visão geral de algumas das atualizações mais importantes às quais você deve prestar atenção.
Sou Rachel Andrew, líder de conteúdo do web.dev e developer.chrome.com, e faço parte da equipe de relações com desenvolvedores do Chrome. Trabalho na Web há mais de vinte anos, com foco em padrões abertos da Web e CSS, e faço parte do Grupo de trabalho de CSS.
Há dois meses, finalizamos o Google I/O, onde compartilhamos algumas das atualizações mais importantes sobre como apoiamos os desenvolvedores para deixar a Web mais rápida e eficiente, mantendo as informações dos usuários seguras e particulares.
Uma das coisas que se destacou (e estamos felizes que a comunidade tenha notado) é a enorme quantidade de trabalho que a equipe está fazendo para oferecer suporte a mais recursos de CSS e de interface do usuário na Web. Nesta edição do Chrome Dev Insider, vamos mostrar os bastidores do trabalho, como trabalhamos para oferecer suporte a desenvolvedores de CSS e UI e o que está por vir. É por isso que estou muito feliz por apresentar esta edição do Insider.
Notícias
No primeiro Chrome Dev Insider, compartilhamos algumas atualizações sobre as iniciativas do Compat 2021 e Interoperabilidade 2022, em que fornecedores de navegadores e participantes do ecossistema fizeram uma parceria para trazer mais recursos para a Web com suporte a todos os navegadores. A iniciativa tem um foco forte no CSS porque a incompatibilidade do navegador é um dos maiores desafios para os desenvolvedores de CSS.
Embora isso não seja uma notícia para a maioria, é empolgante ver o progresso que já fizemos em todos os navegadores.
No mês passado, o Safari 16.0 Beta anunciou um lançamento do Safari. Ele inclui recursos incríveis, como Consultas de contêiner, subgrid e um inspetor flexbox. As versões recentes do Firefox e do Chrome incluíram vários recursos e correções interessantes. Falarei sobre os principais recursos dos navegadores estáveis e Beta todos os meses na minha série de postagens sobre novos serviços da plataforma da Web.
Informações privilegiadas: suporte a desenvolvedores de IU e CSS
Como 2022 está sendo um ano emocionante para os recursos do CSS, acreditamos que esse é um bom momento para mostrar os bastidores. Conversamos com Una Kravets, líder de DevRel de interface da Web e Devtools, e Nicole Sullivan, nossa gerente de produto de interface da Web com foco em APIs de CSS e HTML, para falar sobre a jornada do Chrome para oferecer suporte a desenvolvedores de interface do usuário.
Vamos começar com vocês. Quer contar mais sobre você?
Nicole: Sou gerente de produto de interface da Web no Chrome. Meu foco são as novas APIs CSS e HTML e os desenvolvedores e designers que criam interface de usuário. É um espaço empolgante com algumas APIs realmente importantes sendo lançadas, como Consultas de contêiner, Escopo e, esperamos, ritmo vertical.
Una: lidero as equipes de Web UI e DevTools DevRel. Nosso foco é dar suporte aos engenheiros de UI na plataforma da Web e garantir que eles tenham as ferramentas necessárias para alcançar o sucesso. Isso inclui APIs CSS e componentes HTML, além de recursos do DevTools para ver as mudanças ativas e o feedback.
O suporte do Chrome para desenvolvedores de interface aumentou muito nos últimos anos. Por que você acha que demorou tanto para chegar aqui? Quais foram os maiores desafios?
Una: Precisávamos fazer um trabalho para demonstrar a importância desse trabalho e por que ele deveria ser uma prioridade. Começamos com a pesquisa DNA da MDN em 2019, que identificou a IU como um dos principais pontos problemáticos na plataforma. Desde então, continuamos usando os dados como guia no MDN e nas nossas pesquisas internas de satisfação dos desenvolvedores. O resultado de tudo isso é que conseguimos ter uma maior adesão da liderança e priorizar o trabalho de engenharia em torno de alguns dos recursos mais solicitados para desenvolvedores na interface, que também são a maior parte do foco de iniciativas como o Compat 2021 e o Interoperabilidade 2022.
Nicole: Além da adesão da liderança, também tivemos que encontrar a maneira certa de levar essas APIs aos desenvolvedores. Quando entrei no Chrome pela primeira vez, estraguei tudo em um projeto chamado APIs Layer (ou LAPIs para abreviar). As LAPIs visam fornecer aos desenvolvedores uma experiência simples de componente. Ainda acho que esse foi um ótimo resultado, mas cometemos muitos erros! Primeiro, focamos em Notificações de aviso e em uma Lista virtual. É quase impossível tornar um aviso acessível, e uma lista virtual é um dos componentes mais difíceis de acertar. Nossas intenções eram boas, mas não estavam ajudando os desenvolvedores, então desativamos o projeto. É difícil aprender da maneira mais difícil, mas todo erro está incentivando o renascimento do CSS e do HTML que está acontecendo agora.
Vamos falar um pouco mais sobre as LAPIs. O que aconteceu lá?
Nicole: Para LAPIs, sabíamos que a Web precisava de uma experiência de desenvolvedor de componente drop-in mais próxima da criação de interface nativa. E ficou claro que reinventar a roda estava atrapalhando os desenvolvedores. Não consigo contar o número de guias que criei na minha carreira! Por isso, tentamos resolver isso enviando o JavaScript pelo navegador, o que era muito difícil. Ninguém havia enviado JavaScript no navegador antes, e não ficava claro como ele deveria interagir com o código C++ que alimenta o mecanismo de renderização do navegador. Ouvimos outros fornecedores de navegador (agradeço a você, Mozilla) e desistimos dessa abordagem. Então, conseguimos encontrar algo muito melhor com a interface aberta. Ao usarmos HTML e CSS, chegamos a soluções flexíveis e declarativas. Por ser declarativa, podemos incorporar a acessibilidade de uma forma que não seria tão fácil de fazer com o JavaScript. Estou muito animado com o futuro. Estamos trabalhando para oferecer suporte a selectmenu, pop-up, tooltip, navegação, acordeão, guias, carrossel e alternância, que são padrões de design da IU realmente essenciais.
Aprendemos muito. E eu sei que há outras iniciativas nessa área, como o CSS Houdini. Qual é a história?
Una: Sim, o CSS Houdini é outro lugar onde aprendemos com a comunidade. Há vários recursos úteis do Hudini, mas muitos deles eram muito baixos para receber maior adoção e suporte. Percebemos que a implementação de APIs de baixo nível não necessariamente reduziu o atrito para os desenvolvedores. Em vez disso, o foco em soluções e necessidades de nível mais alto ajudou a angariar suporte entre navegadores e os encerramentos necessários para mudar o ecossistema. No momento, estamos acompanhando o progresso em https://ishoudinireadyyet.com/ (em inglês).
Falando na compatibilidade com vários navegadores, iniciativas como o Interop 2022 e a Open UI parecem trazer resultados positivos significativos para a comunidade. Qual é a opinião dos desenvolvedores?
Una: Um dos principais pontos problemáticos que recebemos dos desenvolvedores é "fazer com que o design funcione da mesma forma em todos os navegadores". Para resolver isso, trabalhamos com outros fornecedores de navegadores para priorizar e oferecer alguns dos recursos mais solicitados para desenvolvedores. E o feedback que recebemos da comunidade foi extremamente positivo. Além disso, por meio de um grande esforço de rearquitetura chamado RenderingNG, é possível implementar alguns desses recursos com muito mais desempenho. Os desenvolvedores estão animados porque esses recursos há muito esperados pediram, finalmente, para serem implementados em vários navegadores.
Nicole: A empolgação na comunidade é enorme. Confira no Twitter. :)
Trabalhar com o ecossistema provou ser fundamental para qualquer sucesso que já tivemos ao facilitar a vida dos desenvolvedores. Sei que sua equipe tem trabalhado muito lá. Você quer compartilhar alguns detalhes?
Nicole: Em primeiro lugar, estou sempre impressionada com os projetos que os desenvolvedores criam na Web. Da biblioteca mais simples até estruturas completas, os desenvolvedores estão criando coisas incríveis. É uma comunidade fantástica de criadores. E o Chrome está tomando várias medidas para ficar mais conectado a esses projetos.
Por exemplo, há alguns anos começamos a trabalhar com frameworks do JavaScript, como React e Angular. E metaframeworks, por exemplo, Next, Nuxt e Gatsby. No ano passado, começamos a fazer o mesmo com ferramentas e frameworks de IU como Sass, Bootstrap e Material. Espero que, neste ano, possamos colaborar com o GreenSock e outras ferramentas que facilitem a vida dos desenvolvedores. Acabei de ver Cassie Evans, do GreenSock, dar uma palestra na Smashing Conference, e fiquei muito animado em trabalhar com as pessoas na área de animação.
Onde vemos a maior oportunidade para o ecossistema de IU da Web?
Una: Em termos de grandes oportunidades, acho que estamos apenas esquecendo o que é possível fazer em experiências na Web personalizáveis. Novas APIs, como as 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 empolgada com as experiências de design colaborativo que estão permitindo que desenvolvedores e designers trabalhem em conjunto com os usuários que visitam os sites.
E Nicole, quais são as próximas etapas da sua equipe?
Nicole: Nem todas as análises detalhadas se tornam algo que pode ser enviado, mas tenho muitas coisas interessantes no momento:
Ainda que não tenhamos abordado 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 cor OKLCH mantém o brilho consistente em todas as matizes. Os designers podem passar da escolha de cores ao design de relações entre cores, 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 cheios de componentes reutilizáveis.
Animações de rolagem vinculadas também são outra área divertida. Gosto muito da demonstração do Steve Gardner. Ele tem uma rolagem suave e animações frias de avião acionadas ao rolar a tela. Embora sejam divertidos, pode ser complicado acertar, especialmente quando se trata de acessibilidade. Por isso, estamos fazendo testes de acessibilidade do recurso com os usuários.
A coisa que mais me empolga são os controles integrados de interface da Web. Os desenvolvedores continuam criando o mesmo conjunto de guias repetidamente, e acho que o navegador pode ajudar. Em Open UI, estamos trabalhando em componentes como selectmenu, pop-up, dica, guias, navegação, accordion e alternância. Estamos explorando como seria integrar a acessibilidade nesses primitivos de navegador para que a Web pudesse, com o tempo, se tornar acessível por padrão. Os desenvolvedores podem então se concentrar nos problemas mais complexos e sutis, enquanto o básico pode ser suportado pelo navegador, como a guia "Como fazer". Provavelmente precisa ter uma postagem própria, então vou parar por aqui por enquanto!
Por fim, vamos continuar investindo na interoperabilidade entre navegadores. Tem sido ótimo trabalhar com as pessoas da WebKit e do Gecko para deixar a experiência do desenvolvedor consistente. Os desenvolvedores pediram isso, e os desenvolvedores pediram.
Ah, e se você ainda não conhece, a API Shared Element Transitions da equipe da Wireless Web vai mudar a maneira como as pessoas criam designs para a Web. Todas essas pequenas transições sutis que permitem que os designers orientem seus designs no espaço físico vão ser não só possíveis, mas fáceis. Jake Archibald tem uma ótima demonstração (link em inglês).
Se os padrões correrem bem, poderíamos até mesmo olhar para o ritmo vertical este ano! Conseguimos criar com base no LayoutNG, o que desbloqueia muitos recursos.
Agradeço as informações. Tenho certeza de que toda a comunidade, como nós, está animada para ver o novo ritmo de melhorias e recursos que chegam ao mundo da interface da Web. Ainda há muito o que explorar. Então, onde você diria que deve começar essa jornada?
Una: nossa sessão Novidades na plataforma da Web do I/O aborda os destaques de vários recursos que serão lançados este ano. Adam Argyle também escreveu um artigo excelente sobre todos os lançamentos novos e futuros do CSS. De forma contínua, eu me concentraria nas versões estáveis por enquanto e estaria ciente dos outros trabalhos que estão por vir. Sua série Novo na plataforma da Web é ótima para acompanhar isso. A assinatura da newsletter web.dev também levará esse conteúdo à caixa de entrada dos desenvolvedores. Para os desenvolvedores que querem se envolver e ajudar em tudo isso, ingressar na Open UI é uma das melhores maneiras de apoiar esse trabalho.
Principais atualizações futuras
Mantemos nossa tradição de avisar sobre uma mudança que você precisa ter em mente ao desenvolver suas experiências na Web.
Limitar o valor máximo dos cookies a 400 dias
- 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. Antes não havia limite, e os cookies podiam expirar vários milênios no futuro. O objetivo desse limite é encontrar um equilíbrio entre padrões de uso comuns e respeito pela 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, e os usuários podem ter certeza de que os cookies não ficarão no navegador por milênios sem uso. - Cronograma estimado:frete no Chrome 104 (versão estável em 2 de agosto de 2022).
- CTA do desenvolvedor:talvez os desenvolvedores precisem atualizar os cookies com mais frequência do que antes quando os usuários acessam os sites deles. Caso contrário, os usuários podem ser desconectados 400 dias após a configuração inicial do cookie.
Espero que você tenha gostado de ler esta edição do Chrome Dev Insider. Caso não tenha encontrado, aqui está o primeiro. Esperamos trazer mais informações para você no próximo trimestre.
Até lá, conte-nos sua opinião sobre esta edição do Chrome Dev Insider e o que podemos fazer para melhorá-la.
O que você achou desta edição do The Chrome Dev Insider? Envie seu feedback.