Minimizar a distância

Facilitar a criação para a Web.

Rachel Andrew

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. 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) retornará "true".

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 deve se comportar, e esse recurso chegou primeiro ao 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 a todos os outros recursos possíveis para esse navegador. Além disso, às vezes algumas coisas são retidas para outro trabalho que precisa ser feito para tornar o navegador melhor. 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 a subgrade de envio do Chromium se deve à necessidade de o layout da grade ser reimplementado 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.

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 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 possamos oferecer maneiras práticas de lidar com problemas de suporte.

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

• Aprender CSS
• Saiba mais sobre o Formulários
• Aprenda sobre design
• Conheça o PWA

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 para o prático nos próximos meses.

Também contribuímos com a documentação aberta na Web por meio do nosso suporte do 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.

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.