Esta é a segunda edição do Chrome Dev Insider, em que compartilhamos atualizações sobre as novidades e os recursos mais interessantes 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 prestar atenção.
Meu nome é Rachel Andrew, sou 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, onde compartilhamos algumas das atualizações mais importantes sobre como estamos ajudando os desenvolvedores a tornar a Web mais rápida e poderosa, mantendo as informações do usuário seguras e privadas.
Uma das coisas que se destacaram (e ficamos 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 interface na Web. Nesta edição do Chrome Dev Insider, vamos mostrar os bastidores de quem está por trás desse trabalho, como trabalhamos para oferecer suporte a desenvolvedores de CSS e UI e o que está por vir. Por isso, é um prazer 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 participantes do ecossistema estão fazendo parcerias para oferecer mais recursos na Web com suporte em todos os navegadores. A iniciativa tem um forte foco em CSS porque a incompatibilidade de navegadores é um dos maiores desafios para desenvolvedores de CSS.
Embora isso não seja novidade para a maioria, é muito bom ver o progresso que já fizemos em todos os navegadores.
No início do mês passado, o Safari anunciou uma versão com a Beta 16.0, que inclui recursos interessantes, como Consultas de contêiner, subgrid e um inspetor de flexbox. As versões recentes do Firefox e do Chrome incluíram vários recursos e correções interessantes. Estou abordando os principais pontos dos navegadores estáveis e beta todos os meses na minha série de postagens Novidades na plataforma Web.
Informações privilegiadas: suporte a desenvolvedores de CSS e interface
Como 2022 está sendo um ano empolgante para os recursos do CSS, achamos que é uma boa hora para mostrar os bastidores. Conversei com Una Kravets, líder de DevRel para a interface da Web e as ferramentas de desenvolvimento, e Nicole Sullivan, nossa gerente de produto da interface da Web que se concentra em APIs CSS e HTML, para falar sobre a jornada do Chrome para apoiar desenvolvedores de interface.
Vamos começar com vocês dois. Conte um pouco mais sobre vocês.
Nicole:sou gerente de produtos da interface da Web no Chrome. Eu me concentro especificamente em novas APIs CSS e HTML e em desenvolvedores e designers que criam interfaces. É um espaço empolgante com algumas APIs muito importantes, como as Consultas de contêiner, o Escopo e (espero!) o ritmo vertical.
Una:eu lidero as equipes de DevRel da interface da Web e do DevTools. Nosso foco é oferecer suporte a engenheiros de IU na plataforma da Web e garantir que eles tenham as ferramentas necessárias para ter sucesso. Isso inclui APIs CSS e componentes HTML, além de recursos da DevTools para conferir mudanças ativas e feedback.
O suporte do Chrome para desenvolvedores de interface tem aumentado nos últimos anos. Por que você acha que demorou tanto para chegar aqui? Quais foram os maiores desafios?
Una:precisamos fazer um trabalho para demonstrar a importância desse trabalho e por que ele precisa ser uma prioridade. Começamos com a pesquisa DNA do MDN 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 nas nossas próprias pesquisas internas de satisfação dos desenvolvedores. Como resultado, conseguimos o apoio da liderança e priorizamos o trabalho de engenharia em alguns dos recursos mais requisitados pelos desenvolvedores na interface, que também são o foco de iniciativas como Compat 2021 e Interop 2022.
Nicole:além de conseguir o apoio da liderança, também tivemos que encontrar a maneira certa de disponibilizar essas APIs aos desenvolvedores. Quando entrei no Chrome, fiz uma bagunça em um projeto chamado APIs em camadas (ou LAPIs, na sigla em inglês). O objetivo das LAPIs era oferecer aos desenvolvedores uma experiência de componente de inclusão. Ainda acho que esse foi um ótimo resultado, mas cometemos muitos erros. Primeiro, nos concentramos nas notificações pop-up e em uma lista virtual. É quase impossível tornar as notificações rápidas acessíveis, e uma lista virtual é um dos componentes mais difíceis de fazer corretamente. 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 LAPIs. O que aconteceu?
Nicole:Para as LAPIs, sabíamos que a Web precisava de uma experiência de desenvolvimento de componentes de inclusão mais próxima da criação de interfaces nativas. E ficou claro que reinventar a roda estava impedindo os desenvolvedores. Não consigo contar o número de guias que criei na minha carreira! Tentamos resolver isso enviando JavaScript com o navegador, o que foi muito difícil. Ninguém tinha enviado JavaScript no navegador antes, e não estava claro como ele interagiria 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, temos soluções flexíveis e declarativas. Como ele é declarativo, podemos incorporar a acessibilidade de uma forma que não seria tão fácil de fazer com JavaScript. Estou muito feliz com o rumo que isso está tomando. Estamos trabalhando para oferecer suporte a menus de seleção, pop-ups, dicas de ferramentas, navegação, acordeões, guias, carrosséis e alternância, 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 deles eram de nível muito baixo para serem adotados e receberem suporte mais amplo. 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 alto nível ajudou a conseguir suporte para vários navegadores e as páginas de destino necessárias para mudar o ecossistema. Estamos acompanhando o progresso em https://ishoudinireadyyet.com/.
Falando em suporte a vários navegadores, iniciativas como Interop 2022 e Open UI parecem estar gerando resultados positivos significativos para a comunidade. O que os desenvolvedores estão dizendo?
Una:Um dos principais problemas que ouvimos dos desenvolvedores é "fazer o design funcionar da mesma forma em todos os navegadores". Para resolver esse problema, trabalhamos com outros fornecedores de navegadores para priorizar e lançar alguns dos recursos mais solicitados pelos desenvolvedores. 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 lançar alguns desses recursos com muito mais desempenho. Os desenvolvedores estão animados porque esses recursos há muito tempo esperados e solicitados por anos estão finalmente sendo trabalhados e lançados para vários navegadores.
Nicole:A empolgação na comunidade é palpável. Confira no Twitter. :)
Trabalhar com o ecossistema provou ser fundamental para o sucesso que tivemos em facilitar a vida dos desenvolvedores. Sei que sua equipe tem trabalhado muito nisso. Você pode compartilhar alguns detalhes?
Nicole:Primeiro, fico sempre impressionada com os projetos que os desenvolvedores criam na Web. Desde a menor biblioteca até os frameworks completos, os desenvolvedores estão criando coisas incríveis. É uma comunidade fantástica de criadores. E 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 metaframeworks, por exemplo, Next, Nuxt e Gatsby. No ano passado, começamos a fazer o mesmo com ferramentas e frameworks de interface, 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 palestra de Cassie Evans, da GreenSock, na Smashing Conference, e fiquei muito animada para trabalhar com pessoas do espaço de animação.
Onde está a maior oportunidade para o ecossistema da IU da Web?
Una:em termos de grandes oportunidades, sinto que estamos apenas arranhando a superfície do que é possível fazer com experiências da 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 forma 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 conjunto 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 se transformam em algo que pode ser enviado, mas há muitas coisas que me deixam muito animada:
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 matizes. Os designers podem passar da escolha de cores para o design de relações entre elas, sem acabar com paletas de cores turvas.
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 anilhamento. Os desenvolvedores precisam deles para criar sistemas de design flexíveis cheios de componentes reutilizáveis.
Animações vinculadas são outra área divertida. Gostei muito da demonstração do Steve Gardner. Ele tem rolagem suave e animações de avião legais acionadas ao rolar. Embora sejam divertidos, eles podem ser complicados, especialmente quando se trata de acessibilidade. Estamos realizando testes de acessibilidade com usuários no recurso.
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 menu de seleção, pop-up, dica, guias, navegação, acordeão e alternância. Estamos analisando como seria possível incorporar a acessibilidade a essas primitivas do navegador para que a Web possa se tornar acessível por padrão com o tempo. Os desenvolvedores podem se concentrar nos problemas mais complexos e sutis, enquanto o navegador oferece suporte aos aspectos básicos, como a guia "Ferramentas". Isso provavelmente precisa de uma postagem própria, então vou parar por aqui.
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 pediram isso, e ouvimos.
Ah, e se você ainda não viu, a API Shared Element Transitions da equipe da Seamless Web vai mudar a forma como as pessoas projetam para a Web. Todas essas pequenas transições sutis que permitem que os designers orientem os designs no espaço físico vão ser não apenas possíveis, mas fáceis. Jake Archibald tem uma ótima demonstração.
Se tudo der certo, talvez até analisemos o ritmo vertical este ano. Podemos criar com base no LayoutNG, que desbloqueia muitos recursos.
Agradecemos. Tenho certeza de que toda a comunidade, assim como nós, está animada com o ritmo renovado de melhorias e recursos que estão chegando à IU da Web. Ainda há muito o que aprender. Então, por onde você diria que alguém deve começar a jornada?
Una:nossa sessão Novidades na plataforma Web no I/O aborda os destaques de muitos dos recursos lançados este ano. Adam Argyle também escreveu um ótimo artigo sobre todas as novas páginas de destino do CSS. De forma contínua, eu me concentraria em versões estáveis por enquanto e ficaria atento ao outro trabalho que está por vir. Sua série Novidades da plataforma Web é ótima para isso. A inscrição na newsletter do web.dev também vai enviar esse conteúdo para a caixa de entrada dos desenvolvedores. Para os desenvolvedores que querem se envolver e ajudar com tudo isso, participar da Open UI é uma das melhores maneiras de apoiar esse trabalho.
Principais atualizações futuras
Estamos mantendo nossa tradição de avisar sobre uma mudança que vai acontecer e que você precisa considerar ao criar suas experiências na Web.
Limitar a idade máxima dos cookies a 400 dias
- Atualização:quando os cookies são definidos com um atributo
Expires/Max-Ageexplícito, o valor agora será 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 é encontrar um equilíbrio entre os padrões de uso comuns e o 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. 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 (versão estável em 2 de agosto de 2022).
- CTA para desenvolvedores:os desenvolvedores talvez precisem atualizar os cookies de forma proativa com mais frequência do que antes quando os usuários visitam os sites. Caso contrário, os usuários podem ser desconectados 400 dias após a definição inicial do cookie.
Esperamos que você tenha gostado desta edição do Chrome Dev Insider. Se você perdeu, confira a primeira. Vamos trazer mais novidades no próximo trimestre.
Enquanto isso, conte 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? Envie seu feedback.