Minimizar a distância

Facilitando a criação para a Web.

Rachel Andrew

Quando conversamos com desenvolvedores, seja individualmente ou por meio de pesquisas como o State of CSS, ouvimos repetidamente as mesmas coisas. Os desenvolvedores têm dificuldade em criar sites e aplicativos que funcionem bem em todos os navegadores e em saber quando novos recursos interessantes podem ser usados com segurança.

Espaçamento do flexbox

Como exemplo de uma propriedade problemática, a gap permite criar lacunas entre itens grid ou flex ou colunas em um contêiner multicol. Embora tenhamos column-gap em multicol há muito tempo, a propriedade apareceu pela primeira vez no layout de grade como grid-gap, junto com grid-column-gap e grid-row-gap.

Logo depois que o layout de grade chegou aos navegadores, a propriedade foi renomeada como gap, junto com row-gap e column-gap. Depois, foi especificado para funcionar também em layout flexível. Com a mudança de nome, não temos várias propriedades fazendo a mesma coisa.

.box {
  display: flex;
  gap: 1em;
}

O Firefox lançou a propriedade para layouts flexíveis em outubro de 2018. Ele não apareceu no Chrome até julho de 2020 e no Safari até abril de 2021. Isso significa que houve um intervalo de dois anos e seis meses antes de podermos usar gap com segurança. Na realidade, para a maioria dos desenvolvedores, a espera foi muito maior, já que era necessário oferecer suporte a versões de navegadores mais antigas do que a mais recente. O suporte a gap no layout flexível ficou mais problemático porque não podemos usar consultas de recursos para detectar o suporte a lacunas no layout flexível. Como a propriedade gap é compatível com a grade, @supports (gap:1em) vai retornar "true".

Outro problema é que, quando um novo recurso chega a um navegador, as pessoas começam a falar sobre ele e a compartilhar demonstrações. Isso geralmente começa muito antes de o recurso estar em qualquer navegador estável. Isso pode ser confuso ou, no mínimo, frustrante para os desenvolvedores. Recursos novos e brilhantes são mencionados em todos os lugares, mas você descobre que não pode usá-los devido à falta de suporte.

Por que há lacunas no suporte?

Este não é um post acusando um navegador de ser lento. Se você analisar os recursos de diferentes plataformas, vai descobrir que navegadores diferentes lideram em recursos diferentes.

A maioria dos recursos será prototipada em um navegador. Por exemplo, a especificação de layout de grade foi criada pela Microsoft e implementada em um formulário inicial no Internet Explorer 10. Um engenheiro da Mozilla trabalhou muito para descobrir como a subgrade deveria se comportar. Por isso, esse recurso foi lançado primeiro no Firefox. O Safari está liderando algumas novas funções de cores interessantes.

Embora um navegador possa liderar a prototipagem, representantes de todos os navegadores (e outras organizações) no Grupo de trabalho de CSS discutem os recursos do CSS. É muito importante que um recurso possa ser implementado em todos os navegadores e que não seja projetado de forma a impossibilitar a implementação em um navegador. Isso levaria a uma lacuna permanente no suporte e à falta de adoção do recurso.

No entanto, ao implementar um recurso, ele precisa ser priorizado junto com todos os outros recursos possíveis para esse navegador. Às vezes, as coisas ficam paradas por causa de outros trabalhos que precisam ser feitos para melhorar o navegador. Um ótimo exemplo disso é o trabalho do RenderingNG no Chromium. Isso abriu caminho para a implementação da subgrade. No entanto, a longa diferença entre o Firefox e o Chromium no envio da subgrade se deve à necessidade de reimplementar o layout de grade primeiro no novo mecanismo de renderização.

Os problemas

Temos dois problemas aqui. O primeiro é o problema de interoperabilidade, o fato de que pode levar muito tempo desde o momento em que um recurso é lançado em um navegador até que ele esteja disponível em todos os lugares.

O segundo é um problema de mensagens. Como podemos deixar claro onde estão as lacunas no suporte? Como compartilhamos novos recursos sem que todos tenham que pesquisar cuidadosamente cada coisa para descobrir o nível de suporte?

Interoperabilidade

Os navegadores já estão trabalhando juntos para resolver o problema de interoperabilidade. No ano passado, o Compat 2021 ajudou a reduzir a diferença de suporte em vários recursos, incluindo a propriedade "gap" no layout flexível. Este ano, a iniciativa Interop 2022 está focada em 15 recursos, e alguns deles já estão em andamento.

Acompanhe o progresso no painel do Interop 2022.

Mensagens

O segundo problema é algo que quero ajudar a resolver quando falamos sobre recursos aqui no web.dev e em developer.chrome.com. Quero que o status dos recursos fique bem claro quando você lê nosso conteúdo e que ofereçamos maneiras práticas de resolver problemas de suporte.

Lançamos vários cursos fundamentais, e mais estão por vir. Esses cursos ajudam você a aprender a criar para a Web moderna usando as principais tecnologias da plataforma. Confira:

• Aprenda CSS
• Aprenda a usar o Formulários
• Aprenda design
• Aprenda a usar o PWA (link em inglês)

Estamos trabalhando para focar o conteúdo deste site nas coisas que você pode usar com segurança. Ainda não chegamos lá, mas você vai começar a notar uma mudança para o lado prático nos próximos meses.

Também contribuímos para a documentação da Web aberta com nosso apoio ao projeto Open Web Docs. Isso garante que tenhamos documentação de primeira classe no MDN, além de dados de compatibilidade do navegador atualizados. Em seguida, usamos esses dados aqui no web.dev para mostrar suporte a recursos. Confira o suporte atual do gap no layout flexível.

Se você quiser saber mais sobre a visão do Chrome para a Web e os experimentos que estamos fazendo nos testes de origem e para desenvolvedores, acesse nosso site irmão: developer.chrome.com. O conteúdo pode ser experimental ou estar disponível apenas no Chrome no momento, mas queremos que você explore e envie feedback.

Este é um momento muito empolgante para a Web. Esperamos ajudar a trazer recursos importantes para você mais rapidamente e deixar claro quais são as lacunas, tornando o desenvolvimento da Web mais divertido e menos frustrante.

Foto de Cristofer Maximilian.