Creating a fallback to the gap property

HTML & CSS
#1

For browsers that don’t support gap, how would I add a fallback value?

This code uses margin instead of gap, but the gap property doesn’t seem to work along side margin, unless I am doing it wrong.

https://jsfiddle.net/yga4echt/

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: space-between;
  align-content: center;
  width: 290px;
  /*gap: 10px;*/
  background: green;
}

.thePlay {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  fill: blue;
  background: transparent;
  padding: 0;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.vertical {
  margin: 0 10px;
}

.horizontal {
  margin: 10px 0;
}

<div class="outer">

  <button class="playa thePlay " type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <g id="play">
        <title>Play</title>
        <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
        <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                  M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
      </g>
    </svg>
  </button>
  <button class="playb thePlay vertical" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>

  <button class="playc thePlay " type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>

  <button class="playd thePlay horizontal" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button class="playe thePlay vertical horizontal" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>

  <button class="playf thePlay horizontal" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>

  <button class="playg thePlay " type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>

  <button class="playh thePlay vertical" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>

  <button class="playi thePlay " type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
</div>
#3

If you are using margin then remove the gap as it will be no help.

You don’t need horizontal margins as that is already catered for in the space-between rule. Just give a top and bottom margin to the three in the middle. Noi extra classes needed.

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: space-between;
  align-content: center;
  width: 290px;
  /*gap: 10px;*/
  background: green;
}

.thePlay {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  fill: blue;
  background: transparent;
  padding: 0;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}
/*
.vertical {
  margin: 0 10px;
}
.horizontal {
  margin: 10px 0;
}
*/
button:nth-child(4),
button:nth-child(5),
button:nth-child(6){
  margin:10px 0;
}

You could do it without any margins but you’d need to give the outer a height and then add flex to the body element and it would likely break all the other elements so stick with the margin.

1 Like
#4

e.g.

body {
  background: #353198;
  display:flex;
  }

.outer {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: space-between;
  align-content:space-between;
  width: 290px;
  height:290px;
  /*gap: 10px;*/
  background: green;
}

.thePlay {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  fill: blue;
  background: transparent;
  padding: 0;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}
/*
.vertical {
  margin: 0 10px;
}

.horizontal {
  margin: 10px 0;
}
*/

That’s just for example because I believe flex on the body may mess the layout up when you switch to the videos etc.

1 Like
#5

Yes it messes it up. https://jsfiddle.net/oe23gaqn/

#6

You could probably fix it if you wanted (or if its worth the effort) by utilising the bg1 class that is added to the body and reset it back to display:block rather than flex.

e.g.

body.bg1{display:block}

The video doesn’t seem to be centred vertically so have you removed something?

#7

My last working version here is centered vertically. https://jsfiddle.net/kcr3n01e/

I will have to see what I did to change that in this post.

This was removed:

  /*justify-content: center;
  align-content: center;*/

And it was replaced with this:

  justify-content: space-between;
  align-content:space-between;

As was you instructions in post #4

Which caused the video not to stay vertical.

#8

At post #4 there were no videos in the page and I didn’t know that you’d be putting the video container inside the outer. Your recent threads were about removing the buttons from that context but now you’ve put them right back into the mix again so you have mixed styles again.

Now you have to resort to style changes using the class change again.

e.g.

body.bg1{display:block;}
.bg1 .outer{min-height:100%;height:auto;align-content:center;}
#9

I did this: https://jsfiddle.net/gfv3qs8j/1/

.bg1 .outer {
  min-height: 100%;
  height: auto;
  align-content: center;
}

/*body*/
.bg1 {
  animation: fadeInBody 5s ease 0s forwards;
  animation-delay: 0s;
  opacity: 0;
  display: block;
}

And is there a difference between doing:

body.bg1

and just: .bg1 ?

is body needed next to .bg1?
example:

/*body*/
.bg1 .with-curtain:before {
#10

The code works without the body tag, does that mean it is not needed?

#11

It’s not needed unless you have other styles for the body using the body.classname as they will have higher specificity.

I generally avoid saying things like div.classname like the plague but I make an exception for the body tag (because there is only one body whereas there are multiple divs) as it makes it easier to spot when working from the stylesheet especially when it has multiple uses and things are being dynamically changed.

In a large stylesheet I might not know that .bg1 refers to the body as it could refer to any element.

So in answer to your question it makes no difference as long as you have done that for all body styles. Does that mean you shouldn’t use it? No as I said above it is down to the preference of the author and you do what suits you best. It’s not always about minimising code although a fair bit of the time it is.

2 Likes
#12

Display flex added to the body causes the buttons to wrap.

How would that be fixed? https://jsfiddle.net/o0ay75hf/

body {
  background: #353198;
  display: flex;
}

#13

That’s another non-issue really. No one has a device as small as 290px (and if they did then that result would be perfect for them).

You can stop it by setting flex-shrink:0 to .outer but that seems a backward step to me.

1 Like