[Tailwind CSS] How to Support flex-gap Below Safari 14.4
閱讀時間約 30 分鐘
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>
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
本篇是Tailwind CSS系列文章的第一篇，就用輕鬆的閒聊方式來認識一下Tailwind CSS，讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式，提供非常多預先定義好的class給開發者使用，直接加在HTML上就能直接使用，協助開發者更快的開發
介紹 Tailwind CSS 工具並提供如何使用的方法
今天在練習寫網頁時，剛好要來有做到Dark Mode 的功能，那順便來記錄一下做法～
首先要先知道Dark Mode的運作原理。是如何知道你現在是Light Mode還是Dark Mode呢？
😀就是這邊拉～當你按下按鈕時，javascript 的toggle()去為<html>增加dark標
當然指令不是背的，所以第一步就是要打開Tailwind CSS的官網。
Installation - Tailwind CSS
主要的方式有CLI跟CDN，這裡使用的方式前者。
Install Tailwind CSS
npm install -D tailwindcss
npx tai
動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend
擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度
和不需要創建CSS檔案即可以用class去做Styling
Todo App是一個很好學習程式語言的專案開始，JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
最近在把 Tailwind CSS 加入我的技能樹中，其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具
但是我其實對美工比較沒那麼大的興趣，我對功能、效能、安全比較感興趣，所以後端、架站、DevOps、一些安全防護玩了一圈，現在來加強我的排版功力
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
本篇是Tailwind CSS系列文章的第一篇，就用輕鬆的閒聊方式來認識一下Tailwind CSS，讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式，提供非常多預先定義好的class給開發者使用，直接加在HTML上就能直接使用，協助開發者更快的開發
介紹 Tailwind CSS 工具並提供如何使用的方法
今天在練習寫網頁時，剛好要來有做到Dark Mode 的功能，那順便來記錄一下做法～
首先要先知道Dark Mode的運作原理。是如何知道你現在是Light Mode還是Dark Mode呢？
😀就是這邊拉～當你按下按鈕時，javascript 的toggle()去為<html>增加dark標
當然指令不是背的，所以第一步就是要打開Tailwind CSS的官網。
Installation - Tailwind CSS
主要的方式有CLI跟CDN，這裡使用的方式前者。
Install Tailwind CSS
npm install -D tailwindcss
npx tai
動態導覽列為增加使用者經驗UX，要如何在Tailwind CSS上實現呢?這次JayLin來帶大家做一個動態導覽列(Animation Navigation)
TaiwlildCSS已成為主流技術在2023年https://roadmap.sh/frontend
擁有良好的設計系統(Design System)以及CSS-In-JS增加讀取速度
和不需要創建CSS檔案即可以用class去做Styling
Todo App是一個很好學習程式語言的專案開始，JayLin來帶大家手把手用TypeScript | React | TailwildCSS 來做一個小專案
想要知道如何用最新技術來製作一個App嗎? 跟著JayLin用React | Redux Tool Kit | TypeScript | TailwildCSS 來製作一個Drawing App
最近在把 Tailwind CSS 加入我的技能樹中，其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具
但是我其實對美工比較沒那麼大的興趣，我對功能、效能、安全比較感興趣，所以後端、架站、DevOps、一些安全防護玩了一圈，現在來加強我的排版功力
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業，其中使用了最近接觸的 Vite 作為專案開發和打包的工具，以及因為對 Utility-First CSS 頗感興趣，將 Tailwind 納入專案並初次使用它做開發...