Gap não funciona no Safari: 3 maneiras de corrigi-lo facilmente

Quem não gosta quando os navegadores implementam novos recursos CSS? No entanto, às vezes certos recursos, como o intervalo de coluna, não estão funcionando no Safari.

A propriedade gap é um esforço para fornecer uma propriedade semelhante à grade CSS e flexbox. Será responsável pelo espaço (calhas) entre colunas e linhas.

No entanto, alguns navegadores, incluindo o Safari, não habilitam a propriedade gap ao usar o layout flexível. Este não é o único problema com o navegador, e muitos relataram que O Safari não pode baixar um arquivo, mas abordamos esse problema em um guia separado.

O gap funciona no Safari?

Se a lacuna da coluna ou a lacuna da grade não estiver funcionando no Safari, é mais provável que você esteja usando uma versão do Safari inferior a 14.

A lacuna de linha e a lacuna de coluna agora são suportadas em contêineres Flexbox no Safari 14.1. Esta atualização torna viável o uso do flexbox em web design sem a necessidade de hacks de margem desajeitados.

Mas se o intervalo de coluna não estiver funcionando no Safari, existem maneiras de corrigi-lo.

O Flexbox Gap é compatível com todos os navegadores?

A maioria dos navegadores modernos suporta flexbox. Vários navegadores da web têm uma implementação experimental do flexbox. Usar um prefixo de fornecedor era o procedimento padrão para desenvolver implementações experimentais.

Esse problema afeta apenas o Safari antes da versão 15.4, mas se você estiver usando esta ou qualquer versão mais recente, não terá problemas.

Agora que você sabe mais sobre esse recurso, vamos ver o que podemos fazer se o grid-gap não estiver funcionando no Safari.

Dica rápida:

Simplificando, você pode resolver este problema do site com colunas ou linhas de intervalo simplesmente alternando seu navegador para o Opera.

Essa solução alternativa não corrige o problema no Safari, mas ainda oferece navegação otimizada com suporte à propriedade de lacunas e muitos recursos de integração.

Ópera

Navegue sem erros em qualquer página da Web usando recursos avançados e acessibilidade.

Livre Visite o site

Como faço para corrigir a lacuna se não funcionar no Safari?

1. Atualize seu Safari para a versão mais recente

1. Selecionar Preferências do Sistema de Maçã menu no canto da tela.
   
2. Clique em Atualização de software.
   
3. Aguarde o Mac fazer uma verificação de atualização.
4. Clique Atualize agora se houver atualizações acessíveis.
   
5. Verifique a opção rotulada Manter meu Mac atualizado automaticamente para obter atualizações para macOS e Safari automaticamente.
6. Aguarde até que as atualizações sejam instaladas no seu Mac.

Esta solução não é uma solução de lacuna flexível do Safari e corrigirá permanentemente o problema no seu computador.

2. Solução de folga flexível

1. Abra seu arquivo CSS.
2. Agora adicione ao elemento desejado o seguinte código:
exibição: grade;
lacuna de grade: 8rem;
intervalo: 8rem;
   
3. Salve as alterações.

Se o CSS flex gap não estiver funcionando, você pode corrigir esse problema usando uma solução alternativa. Não há suporte para Flexbox no Safari inferior a 14.

A lacuna de grade é suportada em versões anteriores do Safari; portanto, seria preferível alternar de display flex para grid.

3. Empregue o seletor de coruja lobotomizado

1. Abra o arquivo CSS em seu editor favorito.
2. Agora adicione esta linha de código:.parent_div>*+* { margem esquerda: 8rem;}

   

3. Salve as alterações.

Um seletor CSS incomum de três caracteres existe na forma do seletor de coruja lobotomizado. Por ter uma estranha semelhança com a aparência vazia de uma coruja, é chamado de seletor de coruja lobotomizado.

O que posso usar em vez de lacuna no CSS?

Em vez de usar gap no CSS 3, você pode usar margin-right no CSS 3. Se o gap não estiver funcionando no Safari, você pode seguir as soluções acima mencionadas para corrigir esse problema.

No entanto, o problema da lacuna parece ser corrigido nas versões mais recentes do Safari, portanto, você não precisará mais recorrer a soluções alternativas.

Se a lacuna não estiver funcionando no Safari, a melhor opção seria atualizar seu navegador, mas se isso não for uma opção, você terá que recorrer a soluções alternativas.

Este é um problema do lado do cliente, mas muitos tiveram problemas do lado do servidor, como o servidor parou de responder Safari mensagens, mas estes também podem ser corrigidos.

Você conseguiu corrigir o problema da lacuna no Safari? Deixe-nos saber qual solução funcionou para você.