Question 421854 in Html Question posted in
Some basic documentation can be found here.

Html – Detect when flex gap is not supported

Is it possible to detect when flex gap is not supported by the browser?
I have many gap in my project, and most of the layout is made with flexbox. I noticed that many users have old browsers, and they not support flex gap. Is it possible to somehow detect when gap is not supported and add a fallback for this?
I know that there is solution with margins, but i would like to have gap instead of margin

I tried to use
@supports not ((gap: 1px) with (display: flex))
or
@supports not ((gap: 1px) and (display: flex))
but none of those works.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution with tailwind. In tailwind.config.cs i added

    plugins: [
    plugin(function ({ addVariant }) {
      addVariant('modern', '@supports selector(div:has(> .flex))');
      addVariant('no-flex-gap', '@supports not selector(div:has(> .flex))');
    }),
  ],

    and then in my code i can just use

    <div className="flex gap-3 no-flex-gap:space-x-3"></div>

    Not a pretty solution but works


  2. 0

    Either make it not super important if the browser does not support it – as in too bad your display will not be excellent if you come with something as old as IE

    OR use JS to test – this should work in IE11 at least

    document.addEventListener('DOMContentLoaded', () => {
  const testElement = document.createElement('div');
  testElement.style.display = 'flex';
  testElement.style.gap = '1px';

  // Append to the DOM temporarily to test if `gap` is supported
  document.body.appendChild(testElement);

  // Check if `gap` is actually applied
  const supportsGap = getComputedStyle(testElement).gap === '1px';

  document.body.removeChild(testElement); // Clean up
  // safari before 15 MAY issues with the gap - use it if your test is working but the gap still does not work
  // const isSafariBefore15 = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor) && parseInt(navigator.userAgent.match(/Version/(d+)/)[1], 10) < 15;


  // Get the container you want to have gap
  const container = document.querySelector('.test-container');

  console.log('supportsGap:', supportsGap);

  if (container) {
    if (supportsGap) { // && !isSafariBefore15) {
      container.classList.add('gap-supported'); 
      console.log('Gap is supported, applying gap');
    } else {
      container.classList.add('no-gap');
      console.log('Gap is NOT supported, applying margin fallback');
    }
  } else {
    console.error('Container element not found!');
  }
});
    .test-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  border: 1px solid #ccc;
  background-color: lightgray;
  /* For visual testing */
  padding: 10px;
}

.box {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  text-align: center;
  border: 1px solid red;
}

/* Default styles when gap is not supported */
.no-gap .box {
  margin-bottom: 10px; /* Use margin for spacing */
}

/* Use gap for spacing if supported */
.gap-supported {
  gap: 30px; 
}
    <div class="test-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search