O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Minimizar a distância

Facilitando a criação para a Web.

Rachel Andrew Technical Writer

Quando conversamos com desenvolvedores, seja individualmente ou por pesquisas como o State of CSS, sempre ouvimos as mesmas coisas. Os desenvolvedores têm dificuldade para criar sites e aplicativos que funcionem bem em todos os navegadores e para saber quando é seguro usar novos recursos interessantes.

Espaçamento do Flexbox

Como exemplo de uma propriedade problemática, a propriedade gap permite criar lacunas entre itens de grade ou flexíveis 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 após o layout de grade ser lançado nos navegadores, a propriedade foi renomeada como gap, junto com row-gap e column-gap. Em seguida, ele foi especificado para funcionar também no layout flexível. A renomeação significa que 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 só apareceu no Chrome em julho de 2020, seguido pelo Safari em abril de 2021. Isso significa que houve um intervalo de dois anos e seis meses antes de podermos usar o gap com segurança. Na verdade, para a maioria dos desenvolvedores, a espera foi muito maior, porque eles precisavam oferecer suporte a versões de navegadores mais antigas do que a mais recente. O suporte a gap no layout flexível se tornou mais problemático pelo fato de não podermos usar consultas de recursos para detectar o suporte a gap no layout flexível. Como a propriedade gap é compatível com a grade, @supports (gap:1em) vai retornar verdadeiro.

Outro problema é que, quando um novo recurso é lançado em 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 para os desenvolvedores ou, no mínimo, frustrante. É comum ver novos recursos incríveis sendo comentados em todos os lugares, mas depois descobrir que não é possível usá-los devido à falta de suporte.

Por que há lacunas no suporte?

Este post não é para apontar o dedo para um navegador por ser lento. Se você analisar os diferentes recursos da plataforma, vai descobrir que navegadores diferentes assumem a liderança 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 uma forma inicial no Internet Explorer 10. Um engenheiro da Mozilla trabalhou muito para descobrir como a subgrade deveria se comportar, então esse recurso foi lançado primeiro no Firefox. O Safari está liderando o desenvolvimento de algumas novas funções de cores interessantes.

Embora um navegador possa assumir a liderança na prototipagem, representantes de todos os navegadores (e de outras organizações) no Grupo de Trabalho de CSS discutem os recursos de 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, quando se trata de 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 lacuna entre o Firefox e o Chromium se deve à necessidade de reimplementar o layout de grade no novo mecanismo de renderização primeiro.

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 se ela é compatível?

Interoperabilidade

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

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 no developer.chrome.com. Quero que o status dos recursos fique bem claro quando você ler nosso conteúdo e que possamos oferecer maneiras práticas de lidar com problemas de suporte.

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

Estamos trabalhando para focar o conteúdo deste site no que você pode usar com segurança. Ainda não chegamos lá, mas você vai começar a notar uma mudança em direção à prática 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 uma 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 o suporte aos recursos. Confira o suporte atual de gap no layout flexível.

Browser Support

Se você quiser saber mais sobre a visão do Chrome para a Web e os recursos que estamos testando nos testes de origem e para desenvolvedores, acesse nosso site irmão: developer.chrome.com. O conteúdo pode ser experimental ou compatível apenas com o Chrome no momento, mas gostaríamos que você o explorasse e enviasse feedback.

Este é um momento muito empolgante para a Web. Esperamos ajudar a trazer os principais recursos para você mais rapidamente e esclarecer as lacunas que existem, tornando o desenvolvimento Web mais divertido e menos frustrante.