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

Andy Tsou-avatar-img
Andy Tsou
更新於 發佈於 閱讀時間約 30 分鐘
Can I use

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>
留言
avatar-img
留言分享你的想法！
avatar-img
Andy Tsou的沙龍
1會員
4內容數
紀錄閱讀Vue3框架思維、設計實戰的過程
Andy Tsou的沙龍的其他內容
2023/12/24
Vue-框架設計思維
如果前人已經走出一條最佳路徑，我們只顧著欣賞也會到山頂 關注點的改變 一個好的架構都會希望讓開發者能專注在”業務邏輯”的實現，可以提高專案的開發效率、減少開發者非關業務邏輯的事情而煩惱。例如: 開發者A: 請問元件的對話窗如何在確認時控制關閉或開啟狀態? 這個實際案例是架構師認為對話窗的動作
Thumbnail
2023/12/24
Vue-框架設計思維
如果前人已經走出一條最佳路徑，我們只顧著欣賞也會到山頂 關注點的改變 一個好的架構都會希望讓開發者能專注在”業務邏輯”的實現，可以提高專案的開發效率、減少開發者非關業務邏輯的事情而煩惱。例如: 開發者A: 請問元件的對話窗如何在確認時控制關閉或開啟狀態? 這個實際案例是架構師認為對話窗的動作
Thumbnail
2023/12/24
[Tailwind CSS] 把我的樣式還來
情境 前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。 為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果 這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式 壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
Thumbnail
2023/12/24
[Tailwind CSS] 把我的樣式還來
情境 前陣子使用 Tailwind CSS 開發的正舒服時，遇到一個常見的需求。 為了營運方便，網頁常常會留一個區域給客戶使用，客戶可以編輯 HTML 來達到想要的效果 這樣的好處是，客戶可以馬上應對業務需要，IT也不用重新佈署程式 壞處是要考量資安，不過都是內部來源，出、入口增加檢核，好好
Thumbnail
2023/12/24
[Nuxt3] 如何支援 iOS13 InApp WebView
前言 近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁，並且要支援到 iOS13 版本。 測試時發現 Nuxt3 在 iOS13 功能會無法正常執行，因此順手記錄這個踩坑過程…XD 第一坑 Nuxt3 Announcing Nuxt 3 officially suppo
Thumbnail
2023/12/24
[Nuxt3] 如何支援 iOS13 InApp WebView
前言 近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁，並且要支援到 iOS13 版本。 測試時發現 Nuxt3 在 iOS13 功能會無法正常執行，因此順手記錄這個踩坑過程…XD 第一坑 Nuxt3 Announcing Nuxt 3 officially suppo
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
開箱你的美好生活：一起來寫開箱賺獎金！#品牌合作
「欸！這是在哪裡買的？求連結 🥺」 誰叫你太有品味，一發就讓大家跟著剁手手？ 讓你回購再回購的生活好物，是時候該介紹出場了吧！ 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
#蝦皮分潤計畫#開箱#蝦皮
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
開箱你的美好生活：一起來寫開箱賺獎金！#品牌合作
「欸！這是在哪裡買的？求連結 🥺」 誰叫你太有品味，一發就讓大家跟著剁手手？ 讓你回購再回購的生活好物，是時候該介紹出場了吧！ 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
#蝦皮分潤計畫#開箱#蝦皮
Thumbnail
avatar-avatar
Emma 的意識界。
你今天蝦皮了嗎? 『 10 樓 2 選物店 』開箱🎉
介紹朋友新開的蝦皮選物店『10樓2選物店』，並分享方格子與蝦皮合作的分潤計畫，註冊流程簡單，0成本、無綁約，推薦給想增加收入的讀者。
#平台#商品#蝦皮
Thumbnail
avatar-avatar
Emma 的意識界。
你今天蝦皮了嗎? 『 10 樓 2 選物店 』開箱🎉
介紹朋友新開的蝦皮選物店『10樓2選物店』，並分享方格子與蝦皮合作的分潤計畫，註冊流程簡單，0成本、無綁約，推薦給想增加收入的讀者。
#平台#商品#蝦皮
Thumbnail
avatar-avatar
穿越的古文課的沙龍
【端午特輯】細思極恐!屈原和端午節其實沒有關係？
當你邊吃粽子邊看龍舟競賽直播的時候，可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢？ 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章，你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
#屈原#粽子#龍舟
Thumbnail
avatar-avatar
穿越的古文課的沙龍
【端午特輯】細思極恐!屈原和端午節其實沒有關係？
當你邊吃粽子邊看龍舟競賽直播的時候，可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢？ 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章，你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
#屈原#粽子#龍舟
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day7：佈局（二）
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day7：佈局（二）
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day2：語法
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
#CSS
Thumbnail
avatar-avatar
Michael楊
CSS入門-Day2：語法
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
#CSS
Thumbnail
avatar-avatar
Michelle Chen的沙龍
SwiftUI 元件對齊方式
本文介紹瞭如何在SwiftUI中調整元件的對齊方式，包括置中、向左/向右/向上/向下對齊的方法。透過調整HStack、VStack以及frame的maxWidth、maxHeight和alignment屬性，可以達到想要的對齊效果。
#Swift#SwiftUI#Spacer
Thumbnail
avatar-avatar
Michelle Chen的沙龍
SwiftUI 元件對齊方式
本文介紹瞭如何在SwiftUI中調整元件的對齊方式，包括置中、向左/向右/向上/向下對齊的方法。透過調整HStack、VStack以及frame的maxWidth、maxHeight和alignment屬性，可以達到想要的對齊效果。
#Swift#SwiftUI#Spacer
Thumbnail
avatar-avatar
Lee Luciano的沙龍
星期三的CSS-CSSBattle#38
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
#分享#文章#背景
Thumbnail
avatar-avatar
Lee Luciano的沙龍
星期三的CSS-CSSBattle#38
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
#分享#文章#背景
Thumbnail
avatar-avatar
Joker Cat
SCSS / Sass 是甚麼？
不專業分享個人學習 SCSS 的筆記，知識來源為YTB講解，各路大神文章。
#SCSS#前端#學習
Thumbnail
avatar-avatar
Joker Cat
SCSS / Sass 是甚麼？
不專業分享個人學習 SCSS 的筆記，知識來源為YTB講解，各路大神文章。
#SCSS#前端#學習
Thumbnail
avatar-avatar
Lee Luciano的沙龍
星期三的CSS-CSSBattle#166
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式，藉由使用 flex 來進行排版，並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
#分享#工程師#基礎
Thumbnail
avatar-avatar
Lee Luciano的沙龍
星期三的CSS-CSSBattle#166
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式，藉由使用 flex 來進行排版，並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
#分享#工程師#基礎
Thumbnail
avatar-avatar
廖偉帆的沙龍
善用 data-attributes 為 Tailwind CSS 設定動態樣式
data-* attributes 是 HTML 內建的屬性，可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能，讓樣式設定可以更動態多變。
#TailwindCSS#前端#網頁開發
Thumbnail
avatar-avatar
廖偉帆的沙龍
善用 data-attributes 為 Tailwind CSS 設定動態樣式
data-* attributes 是 HTML 內建的屬性，可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能，讓樣式設定可以更動態多變。
#TailwindCSS#前端#網頁開發
Thumbnail
avatar-avatar
Hello Todd
[FE] Learn from react-wrap-balancer
這是一個介紹React Text Wrap Balancer套件的文章，主要內容包括套件的使用方式，常見的實作方式和一些注意事項。文章內容較長，內容大概是在介紹套件的使用方法、使用技巧和注意事項。
#開發#React
Thumbnail
avatar-avatar
Hello Todd
[FE] Learn from react-wrap-balancer
這是一個介紹React Text Wrap Balancer套件的文章，主要內容包括套件的使用方式，常見的實作方式和一些注意事項。文章內容較長，內容大概是在介紹套件的使用方法、使用技巧和注意事項。
#開發#React
Thumbnail
avatar-avatar
大漠聊 CSS
图解CSS：揭开CSS的面纱
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
#CSS#前端#CSS應用
Thumbnail
avatar-avatar
大漠聊 CSS
图解CSS：揭开CSS的面纱
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
#CSS#前端#CSS應用
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News