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 acham difícil criar sites e aplicativos que funcionem bem em vários navegadores e têm dificuldade em saber quando novos recursos incríveis podem ser usados.

Lacuna do flexbox

Como exemplo de uma propriedade problemática, a propriedade gap permite criar lacunas entre itens de grade ou flex ou colunas em um contêiner multico. Embora column-gap esteja 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 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 o 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. A compatibilidade com gap no layout flexível se tornou mais problemática porque não podemos usar consultas de recursos para detectar a compatibilidade com lacunas 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. Com frequência, os novos recursos estão sendo comentados em todos os lugares, e você descobre que não pode realmente usá-los por 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. Estamos vendo o Safari assumir a liderança em algumas novas funções de cor empolgantes.

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 modo a impossibilitar a implementação em um único 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 a 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.

A segunda é um problema de mensagens. Como podemos deixar claro onde estão as lacunas de suporte? Como compartilhamos novos recursos sem que todos precisem pesquisar cuidadosamente cada item para descobrir se ele é bem apoiado?

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 quero ajudar quando falarmos sobre recursos aqui em web.dev e em developer.chrome.com. Quero que o status dos recursos seja muito claro ao ler nosso conteúdo e que possamos fornecer 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 focar nosso conteúdo neste 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 prático 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 tenhamos 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.