Facilitando o desenvolvimento para a Web.
Quando conversamos com desenvolvedores, individualmente ou por pesquisas, como o Estado do CSS, ouvimos as mesmas coisas várias vezes. Os desenvolvedores acham difícil criar sites e aplicativos que funcionam bem em vários navegadores e têm dificuldade para saber quando novos recursos incríveis são seguros.
Lacuna 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. Usamos column-gap em multicol há muito tempo, mas 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 apareceu nos navegadores, a propriedade foi renomeada como gap, junto com row-gap e column-gap. Depois, ela foi especificada para funcionar também em layout flexível. Isso significa que não há 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 em abril de 2021. Isso significava que havia um intervalo de dois anos e seis meses antes que pudéssemos usar o gap com segurança. Na realidade, para a maioria dos desenvolvedores, o tempo de espera era muito maior, devido à necessidade de oferecer suporte a versões de navegador mais antigas que a mais recente. O suporte a gap no layout flexível tornou-se 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 tem suporte na grade, @supports (gap:1em) vai retornar "true".
Outro problema é que, quando um novo recurso chega ao navegador, as pessoas começam a falar sobre ele e 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. Muitas vezes, novos recursos incríveis estão sendo mencionados em todos os lugares, e você acaba descobre que não é possível usá-los por falta de suporte.
Por que há lacunas no suporte?
Esta não é uma postagem que aponta o dedo para um navegador por ser lento. Se você olhar para diferentes recursos de plataforma, vai descobrir que navegadores diferentes assumem a liderança em diferentes recursos.
A maioria dos recursos será criada como protótipo em um navegador. Por exemplo, a especificação de layout de grade foi criada pela Microsoft e implementada inicialmente no Internet Explorer 10. Um engenheiro do Mozilla trabalhou muito para descobrir como a subgrade deveria se comportar, então esse recurso chegou no Firefox primeiro. Estamos vendo o Safari assumir a liderança em algumas funções de cor novas e empolgantes.
Enquanto um navegador lidera a prototipagem, os representantes de todos os navegadores (e de 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 ele não seja projetado de modo a torná-lo impossível de ser implementado em um navegador. Isso levaria a uma lacuna permanente de suporte e à falta de adoção do recurso.
Quando o assunto é implementar um recurso, no entanto, ele precisa ser priorizado em conjunto com todos os outros recursos possíveis para o navegador. E, às vezes, as coisas ficam retidas por trás de outros trabalhos que precisam ser feitos para melhorar o navegador. Um ótimo exemplo é o trabalho de RenderingNG no Chromium. Isso abriu caminho para a implementação da subgrade. No entanto, a longa lacuna entre a subgrade de envio do Firefox e do Chromium se deve à necessidade do layout de grade ser reimplementado primeiro no novo mecanismo de renderização.
Os problemas
Temos dois problemas. O primeiro é o problema de interoperabilidade, que pode levar muito tempo do momento em que um recurso chega em um navegador até estar disponível em todos os lugares.
O segundo é um problema de mensagens. Como podemos esclarecer quais são as lacunas no suporte? Como podemos compartilhar novos recursos sem fazer com que todos tenham que pesquisar cuidadosamente cada item para descobrir o quão bem suportado?
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 no suporte a vários recursos, incluindo a propriedade gap no layout flexível. Este ano, a iniciativa Interop 2022 foca em 15 recursos, e alguns deles já foram migrados.
Acompanhe o progresso no painel da Interoperabilidade de 2022.
Mensagens
O segundo problema é algo que gostaria de ajudar quando falamos sobre recursos aqui no web.dev e em developer.chrome.com. Quero que o status dos recursos seja muito claro quando você ler nosso conteúdo e para que possamos fornecer maneiras práticas de lidar com problemas de suporte.
Lançamos vários cursos fundamentais e muitos mais ainda estão por vir. Estes cursos ajudam você a aprender a criar para a Web moderna usando as principais tecnologias de plataforma da Web. Saída:
Estamos trabalhando para concentrar nosso conteúdo neste site no que você pode usar com segurança. Ainda não chegamos lá completamente, mas você perceberá uma pequena mudança em direção ao aspecto prático nos próximos meses.
Também colaboramos com a documentação da Web aberta com nosso suporte do projeto Open Web Docs. Isso garante que tenhamos uma documentação de primeira classe sobre MDN, juntamente com dados de compatibilidade de navegador atualizados. Em seguida, usamos esses dados no web.dev para demonstrar suporte a recursos. Esta é a compatibilidade atual de gap no layout flexível.
Compatibilidade com navegadores
- 84
- 84
- 63
- 14.1
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 de desenvolvedor, esse conteúdo será cada vez mais encontrado no nosso site parceiro, o developer.chrome.com. O conteúdo pode ser experimental ou compatível apenas com o Chrome no momento, mas queremos que você confira e envie seu feedback.
Este é realmente um momento emocionante para a Web. Esperamos poder ajudar você a oferecer os principais recursos com mais rapidez e a esclarecer as falhas que existem, tornando o desenvolvimento da Web mais divertido e menos frustrante.
Foto de Cristofer Maximilian.