Andy Tsou的沙龍

[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
Andy Tsou的沙龍
1會員
4內容數
紀錄閱讀Vue3框架思維、設計實戰的過程
留言0
查看全部
avatar-img
發表第一個留言支持創作者！
Andy Tsou的沙龍 的其他內容
[Nuxt3] 如何支援 iOS13 InApp WebView
前言 近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁，並且要支援到 iOS13 版本。 測試時發現 Nuxt3 在 iOS13 功能會無法正常執行，因此順手記錄這個踩坑過程…XD 第一坑 Nuxt3 Announcing Nuxt 3 officially suppo
#Nuxt3#Vue#iOS
[Nuxt3] 如何支援 iOS13 InApp WebView
前言 近期用 Nuxt3 開發內嵌於 iOS、Android App 的網頁，並且要支援到 iOS13 版本。 測試時發現 Nuxt3 在 iOS13 功能會無法正常執行，因此順手記錄這個踩坑過程…XD 第一坑 Nuxt3 Announcing Nuxt 3 officially suppo
#Nuxt3#Vue#iOS
你可能也想看
Google News 追蹤
avatar-avatar
筱涵｜Hannah的沙龍
Thumbnail
【生活記事】AI人工智慧解籤｜慈母籤｜線上求籤｜科技與玄學
嘿，大家新年快樂~ 新年大家都在做什麼呢？ 跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
#互動設計#文化體驗#慈母籤
avatar-avatar
Michael楊
Thumbnail
CSS入門-Day7：佈局（二）
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
#CSS
avatar-avatar
Michael楊
Thumbnail
CSS入門-Day2：語法
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
#CSS
avatar-avatar
驅動數位行銷
Thumbnail
Padding 與 Margin 的區別是什麼？先從 Box Model 開始說起
在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
#CSS
avatar-avatar
Lee Luciano的沙龍
Thumbnail
星期三的CSS-CSSBattle#38
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
#分享#文章#背景
avatar-avatar
hunwooooof
Thumbnail
【JS30-5】Flex Panels Image Gallery
JavaScript30 傳送門：https://javascript30.com/ 挑戰５透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果，看別人的成果：yhabib.github.io 本次學習心得： 製造過度效果延遲的方法：transition-delay V.S
avatar-avatar
郭欣玫的沙龍
CSS - margin、padding
CSS Box Model 是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片: 簡單來說margin就是一個是外邊距，與外層元素的間距 Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
avatar-avatar
Lee Luciano的沙龍
Thumbnail
星期三的CSS-CSSBattle#166
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式，藉由使用 flex 來進行排版，並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
#分享#工程師#基礎
avatar-avatar
學習如何學習
Thumbnail
CSS 習作｜響應式網站・width、max-width、min-width 是什麼？
CSS 裡的「寬度，最大寬度，最小寬度」分別是什麼呢？ ➊ width 用來設定元素的寬度，且 width 作用範圍僅在 content-box 區塊 ➋ max-width → 用來設定元素的最大寬度 ➌ min-width → 用來設定元素的最小寬度
#HTML#CSS#網頁設計
avatar-avatar
廖偉帆的沙龍
Thumbnail
善用 data-attributes 為 Tailwind CSS 設定動態樣式
data-* attributes 是 HTML 內建的屬性，可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能，讓樣式設定可以更動態多變。
#TailwindCSS#前端#網頁開發
avatar-avatar
大漠聊 CSS
Thumbnail
图解CSS：揭开CSS的面纱
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
#CSS#前端#CSS應用
avatar-avatar
筱涵｜Hannah的沙龍
Thumbnail
【生活記事】AI人工智慧解籤｜慈母籤｜線上求籤｜科技與玄學
嘿，大家新年快樂~ 新年大家都在做什麼呢？ 跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
#互動設計#文化體驗#慈母籤
avatar-avatar
Michael楊
Thumbnail
CSS入門-Day7：佈局（二）
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
#CSS
avatar-avatar
Michael楊
Thumbnail
CSS入門-Day2：語法
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
#CSS
avatar-avatar
驅動數位行銷
Thumbnail
Padding 與 Margin 的區別是什麼？先從 Box Model 開始說起
在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
#CSS
avatar-avatar
Lee Luciano的沙龍
Thumbnail
星期三的CSS-CSSBattle#38
這篇文章分享了 CSS Battle 第 38 題的解法，並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
#分享#文章#背景
avatar-avatar
hunwooooof
Thumbnail
【JS30-5】Flex Panels Image Gallery
JavaScript30 傳送門：https://javascript30.com/ 挑戰５透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果，看別人的成果：yhabib.github.io 本次學習心得： 製造過度效果延遲的方法：transition-delay V.S
avatar-avatar
郭欣玫的沙龍
CSS - margin、padding
CSS Box Model 是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片: 簡單來說margin就是一個是外邊距，與外層元素的間距 Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
avatar-avatar
Lee Luciano的沙龍
Thumbnail
星期三的CSS-CSSBattle#166
本篇文章分享了前端工程師在 CSS Battle #166 的解題方式，藉由使用 flex 來進行排版，並提供了相關的技術總結。歡迎一起來學習或練習基礎切版的朋友們和作者互動。
#分享#工程師#基礎
avatar-avatar
學習如何學習
Thumbnail
CSS 習作｜響應式網站・width、max-width、min-width 是什麼？
CSS 裡的「寬度，最大寬度，最小寬度」分別是什麼呢？ ➊ width 用來設定元素的寬度，且 width 作用範圍僅在 content-box 區塊 ➋ max-width → 用來設定元素的最大寬度 ➌ min-width → 用來設定元素的最小寬度
#HTML#CSS#網頁設計
avatar-avatar
廖偉帆的沙龍
Thumbnail
善用 data-attributes 為 Tailwind CSS 設定動態樣式
data-* attributes 是 HTML 內建的屬性，可將網頁的狀態與元素進行綁定。而Tailwind CSS 在 3.2 版更新中推出使用 data-* attributes 自訂樣式的功能，讓樣式設定可以更動態多變。
#TailwindCSS#前端#網頁開發
avatar-avatar
大漠聊 CSS
Thumbnail
图解CSS：揭开CSS的面纱
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
#CSS#前端#CSS應用