Aguarde...

1 de setembro de 2020

Como detectar o suporte do navegador para Flexbox Gap

Como detectar o suporte do navegador para Flexbox Gap

Quem não gosta de ter novos recursos CSS suportados em navegadores? Ninguém, eu acho. Recentemente, muitas pessoas estão entusiasmadas com o suporte de gappropriedade para flexbox em navegadores Chromium (Chrome, Edge). A gappropriedade é uma tentativa de ter a mesma propriedade para CSS grid e flexbox. Será responsável pelo espaçamento (calhas) entre colunas e linhas.

Antes de me aprofundar nos detalhes, quero explicar brevemente como grid-gapou gapfunciona. Simplesmente, adiciona espaçamento entre colunas e linhas. Veja o vídeo abaixo:

Inicialmente, o gap era feito usando grid-gap.

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
}

No entanto, ele está sendo substituído por gappropriedade. E funciona da seguinte forma:

.wrapper {
    /* CSS grid styles */
    gap: 1rem;
}

Não há necessidade de usar o prefixo grid-.

Lançando Luz Sobre O Problema

Eu criei uma demonstração muito abstrata de dois wrappers gridflex, respectivamente. Eu costumava gapdefinir o espaçamento entre os itens filhos.

<div class="grid-wrapper">
  <div class="item"></div>
  <!-- 5 more items -->
</div>

<div class="flex-wrapper">
  <div class="item"></div>
  <!-- 5 more items -->
</div>
/********* CSS Grid *********/
.grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

/********* CSS Flexbox *********/
.flex-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.flex-wrapper .item {
    flex: 0 0 calc(33% - 1rem);
}
Como detectar o suporte do navegador para Flexbox Gap

Como você pode ver, a lacuna funciona perfeitamente para CSS grid e flex – nos navegadores que os suportam. No entanto, para os navegadores sem suporte, como versões antigas do Chrome e Safari, o resultado será semelhante à figura abaixo.

Como detectar o suporte do navegador para Flexbox Gap

Suporte De Navegador Para Grid E Flexbox Gap

Mesmo que a propriedade seja a mesma, mas o suporte para ela difere no grid vs flexbox. Isso é confuso. Considere as tabelas de suporte abaixo.

gapSuporte Flexbox

Como detectar o suporte do navegador para Flexbox Gap

gapSuporte De Grade

Como detectar o suporte do navegador para Flexbox Gap

Para obter mais informações sobre o suporte, verifique flexbox gap e grid gap no CanIUse.

flexbox gap é bastante novo, então como podemos usá-lo em projetos da vida real? Levando em consideração que devemos primeiro detectar o suporte para ele.

Detectando Suporte Para Flexbox Gap

Para CSS flexbox, a gappropriedade foi primeiro suportada no Firefox e, em seguida, o Chromium anunciou que a propriedade agora é suportada. Ótimas notícias, mas tenho uma pergunta importante.

Como podemos detectar se o gapfor flexbox é compatível ou não?

Você pode estar pensando em usar CSS @supports? Lamento informar que não é possível detectar gapcom a @supportsregra CSS . De acordo com a discussão neste tópico do CSSWG, parece que não há como detectar isso.

/* This won't work.. */
@supports (gap: 10px) {
    .element {
        display: flex;
        gap: 10px;	
    }
}

O acima não funcionará.

Ao ler o tópico, percebi algumas sugestões interessantes e possíveis para esse problema.

Combine Usando with

Uma sugestão de @ Dan503 é combinar duas condições.

@supports (gap: 10px) with (display: flex) {
    div {
        display: flex;
        gap: 10px;
    }
}

Combine Usando and

Uma sugestão de Bramus .

@supports (display: flex; gap: 1em) {
    .warning {
        display: none;
    }
}

Enquanto isso, não é possível detectar se o gapfor flexbox é compatível ou não.

Usando Javascript

Por enquanto, não temos opção a não ser usar Javascript para detectar se o flexbox gapé compatível. Eu tive a idéia de criar uma capa e dois itens filhos, e, em seguida, aplicar flexgapsobre eles. Felizmente, descobri que isso já é feito por alguém mais inteligente do que eu na Modernizr. Graças a Chris Smith .

function checkFlexGap() {
    // create flex container with row-gap set
    var flex = document.createElement("div");
    flex.style.display = "flex";
    flex.style.flexDirection = "column";
    flex.style.rowGap = "1px";

    // create two, elements inside it
    flex.appendChild(document.createElement("div"));
    flex.appendChild(document.createElement("div"));

    // append to the DOM (needed to obtain scrollHeight)
    document.body.appendChild(flex);
    var isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
    flex.parentNode.removeChild(flex);

    return isSupported;
}

O script funciona de forma a criar um invólucro flexbox com flex-direction: column, e row-gap: 1px. Se a altura do conteúdo for igual a 1px, isso significa que o flexbox gapé compatível.

Veja a explicação visual abaixo.

Como detectar o suporte do navegador para Flexbox Gap

Conforme MDN :

A propriedade somente leitura Element.scrollHeight é uma medida da altura do conteúdo de um elemento, incluindo o conteúdo não visível na tela devido ao estouro.

Ao obter o scrollHeightvalor do elemento pai, podemos verificar se o flexbox gapé compatível ou não.

Adicionando gapsubstituto De Flexbox

Tentei verificar se a detecção de suporte para flexbox gapfoi adicionada ao Modernizer ou não, mas parece que algo está errado na última compilação.

Normalmente, o Modernizr adiciona uma classe ao <html>para indicar se uma propriedade é suportada ou não. Dado que já temos a função, podemos verificar se é trueou false, e adicionar uma classe ao <html>elemento com base nisso.

if (checkFlexGap()) {
  document.documentElement.classList.add("flexbox-gap");
} else {
  document.documentElement.classList.add("no-flexbox-gap");
}

Agora, podemos usar a classe .flexbox-gappara aprimorar uma experiência e usar a gappropriedade. Aqui está um exemplo simples:

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.flex-wrapper .item {
  flex: 0 0 calc(33.33% - 1rem);
  margin-left: 1rem;
  margin-bottom: 1rem;
}

/* If flexbox gap is supported, do the following */
.flexbox-gap .flex-wrapper {
  gap: 1rem;
}

.flexbox-gap .flex-item {
  margin-left: 0;
  margin-bottom: 0;
}
Postado em Blog
Escreva um comentário