[Tailwind CSS] How to Support flex-gap Below Safari 14.4

Can I use

CAN I USE

解決方法

加入 SCSS 或是 CSS

在 SCSS 檔案中加入以下這段 Code

$max:20;
@for $i from 1 through $max {
 body.below-safari14 {
    .flex-row {
        &.flex-nowrap {
          &.gap-#{$i} {
           >:not([hidden]) {
             margin-right:#{$i * 0.25}rem;
             gap:0 !important;
           }
	       }
       }
       &.flex-wrap {
         &.gap-#{$i} {
          >:not([hidden]) {
            margin-right:#{$i * 0.25}rem;
            margin-bottom:#{$i * 0.25}rem;
            gap:0 !important;
          }
        }
	    }
    }
    .flex-col {
       &.flex-nowrap {
            &.gap-#{$i} {
           >:not([hidden]) {
             margin-bottom:#{$i * 0.25}rem;
             gap:0 !important;
           }
         }
       }
       &.flex-wrap{
          &.gap-#{$i} {                
	        >:not([hidden]) {
	          margin-right:#{$i * 0.25}rem;
	          margin-bottom:#{$i * 0.25}rem;
	          gap:0 !important;
	        }
	      }
      }
	  }
	}
}

如果你使用的是 CSS (我用 Online SCSS to CSS 轉換)

body.below-safari14 .flex-row.flex-nowrap.gap-1 > :not([hidden]) {
  margin-right: 0.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-1 > :not([hidden]) {
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-1 > :not([hidden]) {
  margin-bottom: 0.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-1 > :not([hidden]) {
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-2 > :not([hidden]) {
  margin-right: 0.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-2 > :not([hidden]) {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-2 > :not([hidden]) {
  margin-bottom: 0.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-2 > :not([hidden]) {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-3 > :not([hidden]) {
  margin-right: 0.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-3 > :not([hidden]) {
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-3 > :not([hidden]) {
  margin-bottom: 0.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-3 > :not([hidden]) {
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-4 > :not([hidden]) {
  margin-right: 1rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-4 > :not([hidden]) {
  margin-right: 1rem;
  margin-bottom: 1rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-4 > :not([hidden]) {
  margin-bottom: 1rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-4 > :not([hidden]) {
  margin-right: 1rem;
  margin-bottom: 1rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-5 > :not([hidden]) {
  margin-right: 1.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-5 > :not([hidden]) {
  margin-right: 1.25rem;
  margin-bottom: 1.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-5 > :not([hidden]) {
  margin-bottom: 1.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-5 > :not([hidden]) {
  margin-right: 1.25rem;
  margin-bottom: 1.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-6 > :not([hidden]) {
  margin-right: 1.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-6 > :not([hidden]) {
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-6 > :not([hidden]) {
  margin-bottom: 1.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-6 > :not([hidden]) {
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-7 > :not([hidden]) {
  margin-right: 1.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-7 > :not([hidden]) {
  margin-right: 1.75rem;
  margin-bottom: 1.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-7 > :not([hidden]) {
  margin-bottom: 1.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-7 > :not([hidden]) {
  margin-right: 1.75rem;
  margin-bottom: 1.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-8 > :not([hidden]) {
  margin-right: 2rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-8 > :not([hidden]) {
  margin-right: 2rem;
  margin-bottom: 2rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-8 > :not([hidden]) {
  margin-bottom: 2rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-8 > :not([hidden]) {
  margin-right: 2rem;
  margin-bottom: 2rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-9 > :not([hidden]) {
  margin-right: 2.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-9 > :not([hidden]) {
  margin-right: 2.25rem;
  margin-bottom: 2.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-9 > :not([hidden]) {
  margin-bottom: 2.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-9 > :not([hidden]) {
  margin-right: 2.25rem;
  margin-bottom: 2.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-10 > :not([hidden]) {
  margin-right: 2.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-10 > :not([hidden]) {
  margin-right: 2.5rem;
  margin-bottom: 2.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-10 > :not([hidden]) {
  margin-bottom: 2.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-10 > :not([hidden]) {
  margin-right: 2.5rem;
  margin-bottom: 2.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-11 > :not([hidden]) {
  margin-right: 2.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-11 > :not([hidden]) {
  margin-right: 2.75rem;
  margin-bottom: 2.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-11 > :not([hidden]) {
  margin-bottom: 2.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-11 > :not([hidden]) {
  margin-right: 2.75rem;
  margin-bottom: 2.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-12 > :not([hidden]) {
  margin-right: 3rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-12 > :not([hidden]) {
  margin-right: 3rem;
  margin-bottom: 3rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-12 > :not([hidden]) {
  margin-bottom: 3rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-12 > :not([hidden]) {
  margin-right: 3rem;
  margin-bottom: 3rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-13 > :not([hidden]) {
  margin-right: 3.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-13 > :not([hidden]) {
  margin-right: 3.25rem;
  margin-bottom: 3.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-13 > :not([hidden]) {
  margin-bottom: 3.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-13 > :not([hidden]) {
  margin-right: 3.25rem;
  margin-bottom: 3.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-14 > :not([hidden]) {
  margin-right: 3.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-14 > :not([hidden]) {
  margin-right: 3.5rem;
  margin-bottom: 3.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-14 > :not([hidden]) {
  margin-bottom: 3.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-14 > :not([hidden]) {
  margin-right: 3.5rem;
  margin-bottom: 3.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-15 > :not([hidden]) {
  margin-right: 3.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-15 > :not([hidden]) {
  margin-right: 3.75rem;
  margin-bottom: 3.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-15 > :not([hidden]) {
  margin-bottom: 3.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-15 > :not([hidden]) {
  margin-right: 3.75rem;
  margin-bottom: 3.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-16 > :not([hidden]) {
  margin-right: 4rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-16 > :not([hidden]) {
  margin-right: 4rem;
  margin-bottom: 4rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-16 > :not([hidden]) {
  margin-bottom: 4rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-16 > :not([hidden]) {
  margin-right: 4rem;
  margin-bottom: 4rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-17 > :not([hidden]) {
  margin-right: 4.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-17 > :not([hidden]) {
  margin-right: 4.25rem;
  margin-bottom: 4.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-17 > :not([hidden]) {
  margin-bottom: 4.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-17 > :not([hidden]) {
  margin-right: 4.25rem;
  margin-bottom: 4.25rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-18 > :not([hidden]) {
  margin-right: 4.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-18 > :not([hidden]) {
  margin-right: 4.5rem;
  margin-bottom: 4.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-18 > :not([hidden]) {
  margin-bottom: 4.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-18 > :not([hidden]) {
  margin-right: 4.5rem;
  margin-bottom: 4.5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-19 > :not([hidden]) {
  margin-right: 4.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-19 > :not([hidden]) {
  margin-right: 4.75rem;
  margin-bottom: 4.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-19 > :not([hidden]) {
  margin-bottom: 4.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-19 > :not([hidden]) {
  margin-right: 4.75rem;
  margin-bottom: 4.75rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-nowrap.gap-20 > :not([hidden]) {
  margin-right: 5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-row.flex-wrap.gap-20 > :not([hidden]) {
  margin-right: 5rem;
  margin-bottom: 5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-nowrap.gap-20 > :not([hidden]) {
  margin-bottom: 5rem;
  gap: 0 !important;
}
body.below-safari14 .flex-col.flex-wrap.gap-20 > :not([hidden]) {
  margin-right: 5rem;
  margin-bottom: 5rem;
  gap: 0 !important;
}

Detect Browser & Browser Version

在 App.vue 判斷瀏覽器與版本，若為 safari 且 版本≤ 14，則加上這段 document.body.classList.add('below-safari14')

App.vue

<script setup>

onMounted(()=>{
 if(browser is safari and version <= 14) // 我自己寫的裝置版本判斷只有到大版本號
	  document.body.classList.add('below-safari14')
})
</script>

完成! 不用在一個一個檔案改排版了~

<aside> 💡 - 如果是使用 Nuxt 或其他框架可以加在 Layout 或頁面進入點即可

• 偵測瀏覽器與版本有很多套件可以使用，可以到 npm、github 找找。我自己是去判斷 navigator.userAgent 資訊來取得 safari 版本

</aside>

補充

CSS @Support Query (Don’t ❌)

一開始本來是想透過 CSS 語法 @supports not(gap: 1rem) { … }

後續在 safari dev tool 監測時發現，safari 14 以下只是不支援 gap with flex，gap with grid 是可以的

所以 @suports 語法無法解決這個問題，有點可惜~~(因為沒用過，原本想試試看的)

CSS @apply Not Work (Don’t ❌)

如果你有在使用 @apply 語法，必須手動調整~ **

❌

<template>
	<div class="card" ></div>
<template>
<style scoped>
.card {
  @apply bg-green text-white w-24 h-24 flex flex-row flex-nowrap gap-2;
}
<style>

✔️ 改成以下

<template>
	<div class="card flex flex-row flex-nowrap gap-2" ></div>
<template>
<style scoped>
.card {
  @apply bg-green text-white w-24 h-24;
}
<style>