Minimizar a distância

Facilitar a criação para a Web.

Quando conversamos com desenvolvedores, seja individualmente ou por pesquisas como o Estado do CSS, ouvimos repetidamente 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.

Intervalo do Flexbox

Como exemplo de uma propriedade problemática, a propriedade gap permite criar lacunas entre itens grid ou flex ou colunas em um contêiner multicol. Embora o column-gap já esteja disponível há muito tempo em multicolunas, 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 chegar aos navegadores, a propriedade foi renomeada como gap, junto com row-gap e column-gap. Ele também foi especificado para funcionar 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 enviou a propriedade para layouts flexíveis em outubro de 2018. Ele só apareceu no Chrome em julho de 2020 e no Safari em abril de 2021. Isso significa que houve um intervalo de dois anos e seis meses antes de podermos usar gap com segurança. Na verdade, para a maioria dos desenvolvedores, a espera foi muito mais longa, porque era necessário oferecer suporte a versões de navegador mais antigas do que a mais recente. O suporte a gap no layout flexível ficou mais problemático porque não é possível usar consultas de recursos para detectar o suporte a gaps no layout flexível. Como a propriedade gap tem suporte na 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 compartilhar demonstrações. Isso geralmente começa muito antes do recurso estar em qualquer navegador estável. Isso pode ser confuso para os desenvolvedores ou, pelo menos, frustrante. Várias vezes, novos recursos incríveis são mencionados em todos os lugares, e você descobre que não pode usá-los devido à falta de suporte.

Por que há lacunas no suporte?

Esta não é uma postagem que aponta um navegador por ser lento. Se você analisar os recursos das diferentes plataformas, vai descobrir que navegadores diferentes têm recursos diferentes.

A maioria dos recursos será prototipada em um navegador. Por exemplo, a especificação do 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, e esse recurso foi lançado primeiro no Firefox. O Safari está liderando algumas novas e incríveis funções de cores.

Embora um navegador possa liderar a prototipagem, representantes de todos os navegadores (e outras organizações) no Grupo de Trabalho do 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 tornar impossível 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 são adiadas por 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 lacuna entre o Firefox e o Chromium que enviam subgrades é grande devido à necessidade de implementar 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 de suporte? Como compartilhar novos recursos sem que todos precisem pesquisar cuidadosamente cada item para descobrir o nível de suporte?

Interoperabilidade

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

Acompanhe o progresso no painel de compatibilidade 2022.

Mensagens

O segundo problema é algo que eu quero ajudar quando falamos sobre recursos aqui no web.dev e no developer.chrome.com. Quero que o status dos recursos seja muito claro quando você ler nosso conteúdo e que ofereçamos maneiras práticas de lidar com problemas de suporte.

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

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

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

Compatibilidade com navegadores

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1.

Se você quiser saber mais sobre a visão do Chrome para a Web e as coisas que estamos testando nos testes de origem e de desenvolvedor, confira o conteúdo no nosso site irmão: developer.chrome.com. O conteúdo pode ser experimental ou ter suporte apenas no Chrome no momento, mas adoraríamos que você o testasse e enviasse feedback.

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

Foto de Cristofer Maximilian.