feature-test-flex-gap.js

/* ussage 
<div flex-gap=fallback-margin style="--x-gap:10px">
  <span>a</span>
  <span>b</span>
</div>
*/

var div = document.createElement('div');
div.innerHTML = '<i></i><i></i>';
div.style.display = 'inline-flex';
div.style.columnGap = '9px';
document.body.append(div)
var noFlexGap = div.offsetWidth < 9;
if (noFlexGap) document.documentElement.classList.add('no-flexgap');
div.remove();

css = 
'[flex-gap] {\
  display:flex;\
  --x-gap:0;\
  --x-row-gap:var(--x-gap);\
  --x-column-gap:var(--x-gap);\
  row-gap:var(--x-row-gap);\
  column-gap:var(--x-column-gap);\
}';
if (noFlexGap) {
  css += '\
  .no-flexgap [flex-gap] {\
    margin:calc(var(--x-row-gap)*-1) 0 calc(var(--x-row-gap)*-1) calc(var(--x-column-gap)*-2);\
  }\
  .no-flexgap [flex-gap=fallback-margin] > * {\
    margin:var(--x-row-gap) 0 var(--x-row-gap) calc(var(--x-column-gap)*2);\
  }\
  .no-flexgap [flex-gap=fallback-padding] > * {\
    padding:var(--x-row-gap) 0 var(--x-row-gap) calc(var(--x-column-gap)*2);\
  }'
}
document.head.insertAdjacentHTML('afterbegin', '<style>'+css+'</style>');