В Firefox реализовано gap для макета flexbox, в то время как другие браузеры, такие как Chrome, поддерживают gap только для макета сетки.Это вызывает различия между браузерами, если вы добавляете gap в контейнер flexbox.Функция CSS @supports была создана для обработки ситуаций, когда браузеры еще не поддерживают определенные функции.Итак, как вы тестируете поддержку gap во flexbox?
<style>
.flex {
display: flex;
gap: 20px;
}
</style>
<section class="flex">
<div>Item One</div>
<div>Item Two</div>
</section>
Обратите внимание: даже если я использую @supports grid-gap вместо gap, Firefox все равно применяет пробел к контейнеру flexbox,в то время как Chrome ничего не применяет, так что решение не будет работать.
Я ищу согласованность, так как это будет огромной проблемой в будущем, если мы начнем применять пробелы к контейнерам flexbox, и этоработает в новых реализациях браузерами, но не в более старых реализациях спецификации без возможности тестирования поддержки.
Я НЕ ищу решение JavaScript.