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 gap
propriedade para flexbox em navegadores Chromium (Chrome, Edge). A gap
propriedade é 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-gap
ou gap
funciona. 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 gap
propriedade. 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 grid
e flex
, respectivamente. Eu costumava gap
definir 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 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.
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.
gap
Suporte Flexbox
gap
Suporte De Grade
Para obter mais informações sobre o suporte, verifique flexbox gap e grid gap no CanIUse.
O 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 gap
propriedade 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 gap
for flexbox é compatível ou não?
Você pode estar pensando em usar CSS @supports
? Lamento informar que não é possível detectar gap
com a @supports
regra 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 gap
for 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 flex
e gap
sobre 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.
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 scrollHeight
valor do elemento pai, podemos verificar se o flexbox gap
é compatível ou não.
Adicionando gap
substituto De Flexbox
Tentei verificar se a detecção de suporte para flexbox gap
foi 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 é true
ou 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-gap
para aprimorar uma experiência e usar a gap
propriedade. 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;
}