最近在處理 SVG 動畫時，遇到了一個有趣的畫面瑕疵。當我們使用 path 標籤搭配 marker-end 來加上箭頭時，瀏覽器展現動畫的行為跟我們預期的有點落差。

這篇文章來記錄這個問題的根本原因，以及如何透過簡單的技巧完美解決。

問題是甚麼

在網頁中，如果我們寫了 path 結合 marker-end 這樣的語法，本意是希望路徑在畫完的時候，終點才出現這個箭頭。

但是實際執行動畫時，只要路徑開始顯現，也就是透明度變成 1 的那一個瞬間，瀏覽器就會在終點立刻把這個箭頭渲染出來。

這會導致一個很不協調的現象：線條還在慢慢從起點畫過來，但終點已經提早立好了一個箭頭。

為什麼會這樣

這是因為 SVG 的 marker-end 本質上就是一個綁定在路徑端點上的裝飾元件。

當我們使用 stroke-dashoffset 來控制線條慢慢畫出來時，路徑只要一有顯示的跡象，瀏覽器就會認為端點已經存在，於是提前把裝飾的箭頭畫上去，沒有辦法隨著線條進度同步延遲出現。

解決方案

為了讓箭頭配合線條畫到的時間點才出現，我們需要分開處理路徑和箭頭。

第一步是移除 SVG 的 marker-end 屬性，這樣可以避免瀏覽器在路徑終點預先繪製箭頭。

第二步是獨立一個箭頭元件出來，這裡使用 polygon 標籤來當作獨立的箭頭，並且根據路徑終點的座標以及切線斜率來旋轉對齊端點。

程式碼實作

調整過後的程式碼像這樣：

HTML

<svg class="marathon-svg" viewBox="0 0 1400 260" xmlns="http://www.w3.org/2000/svg">
    <!-- Track path -->
    <path id="track" d="M80,150 Q280,40 480,120 Q680,240 880,140 Q1080,50 1280,150 L1360,180" stroke="#C8922A" stroke-width="6" stroke-linecap="round" fill="none" stroke-dasharray="1360" stroke-dashoffset="1360" style="
            animation: dashDraw 3s ease forwards;
            --dash-len: 1360;
            animation-delay: calc(var(--scene-t,0s) * -1 + 9s);
            animation-play-state: paused;
            "></path>
    <!-- Arrowhead that appears when drawing reaches the end (at 11.5s) -->
    <polygon points="0 -9, 22 0, 0 9" fill="#C8922A" transform="translate(1360, 180) rotate(20.56)" style="
            opacity: 0;
            animation: fadeIn 0.3s ease forwards;
            animation-delay: calc(var(--scene-t,0s) * -1 + 11.5s);
            animation-play-state: paused;
            "></polygon>
</svg>

透過把箭頭拉出來獨立控制，並且設定好對應的 animation-delay 讓它在時間點剛好對上線條畫完的一刻，就能解決箭頭提前出現的不協調感。

雖然 Flexbox 非常好用，但在處理多行、不規則高度或是希望呈現傳統表格對齊（例如類似 HTML 表格中的 tr 包含兩個 td ）的結構時，以下示範如何把第4列搬到第2例右側。

AI 生成的盲點：為什麼 Flexbox 在這裡會翻車？

如果讓 AI 直接用 display: flex 來處理這種左側是標籤、右側是標題加內文的卡片，通常會遇到以下幾個痛點：

1. 高度與垂直對齊難以控制：當右側的文字因為換行變成兩行或三行時，左側的標籤或圖示往往會跟著亂跑，無法與右側內容保持一致的垂直置中或頂端對齊。
2. 巢狀結構過於肥胖：為了模擬左右兩欄，AI 往往會生出好幾層 div 來互相巢狀包裹，導致 HTML 結構變得很冗長。
3. 欄位寬度不穩定：如果左側的標籤文字長度不一致，會直接導致右側的文字區域跟著被擠壓變形。

核心原理：為什麼改用 CSS Grid？

為了達到類似傳統表格（ tr 搭配兩個 td ）的嚴謹對齊效果，最佳解法其實是 CSS Grid。

我們只需要將卡片本身設為 display: grid，並透過 grid-template-columns: 200px 1fr：

• 第一欄（左側）固定寬度或給予適當的空間放標籤與圖示。
• 第二欄（右側）設定為 1fr，自動佔滿剩餘的所有寬度。

這樣一來，不管右側的文字換幾行、內容有多長，左右兩欄的對齊關係依然穩固如山，完全不需要擔心版面變形。

這是一篇針對此次 CSS 版面調整所撰寫的技術部落格文章，內容包含原理簡介、AI 生成常見陷阱、實際遇到的問題以及解法，並已將程式碼對照調整為清楚的 Before 與 After 區塊。

從 AI 生成的 Flex 陷阱談起：如何用 CSS Grid 打造完美的左右雙欄卡片

在網頁前端開發中，我們經常需要將區塊拆分成左右兩欄，例如左邊放標籤或圖示、右邊放標題與內文。當我們把任務交給 AI 生成時，最常見的反應就是直接使用 Flexbox 排版。

雖然 Flexbox 非常好用，但在處理多行、不規則高度或是希望呈現傳統表格對齊（例如類似 HTML 表格中的 tr 包含兩個 td ）的結構時，使用 Flexbox 往往會衍生出許多意想不到的排版災難。

AI 生成的盲點：為什麼 Flexbox 在這裡會翻車？

如果讓 AI 直接用 display: flex 來處理這種左側是標籤、右側是標題加內文的卡片，通常會遇到以下幾個痛點：

1. 高度與垂直對齊難以控制：當右側的文字因為換行變成兩行或三行時，左側的標籤或圖示往往會跟著亂跑，無法與右側內容保持一致的垂直置中或頂端對齊。
2. 巢狀結構過於肥胖：為了模擬左右兩欄，AI 往往會生出好幾層 div 來互相巢狀包裹，導致 HTML 結構變得很冗長。
3. 欄位寬度不穩定：如果左側的標籤文字長度不一致，會直接導致右側的文字區域跟著被擠壓變形。

核心原理：為什麼改用 CSS Grid？

為了達到類似傳統表格（ tr 搭配兩個 td ）的嚴謹對齊效果，最佳解法其實是 CSS Grid。

我們只需要將卡片本身設為 display: grid，並透過 grid-template-columns: 200px 1fr：

• 第一欄（左側）固定寬度或給予適當的空間放標籤與圖示。
• 第二欄（右側）設定為 1fr，自動佔滿剩餘的所有寬度。

這樣一來，不管右側的文字換幾行、內容有多長，左右兩欄的對齊關係依然穩固如山，完全不需要擔心版面變形。

實戰修改前後對照

CSS 修改前後對照

Before（修改前）：

CSS

/* Right: 3 Alignment Pillars */
.alignment-pillars {
  position: absolute;
  top: 170px;
  left: 510px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.align-card {
  padding: 18px 26px;
  opacity: 0;
}

After（修改後）：

CSS

/* Right: 3 Alignment Pillars */
.alignment-pillars {
  position: absolute;
  top: 170px;
  left: 510px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 600px;
}

.align-card {
  padding: 18px 26px;
  opacity: 0;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: center;
}

.align-card-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.align-card-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

HTML 修改前後對照

Before（修改前）：

HTML

<!-- Pillar 1 -->
  <div class="align-card align-1 card-base">
    <div class="pillar-tag p1">心法 1：釐清真正的需求</div>
    <div class="pillar-title">拿到任務先別急著打開檔案或叫 AI 產出</div>
    <div class="pillar-desc">多問幾個為什麼，找出背後真正要解決的核心問題。先問清定價需求，一頁表格就能直擊核心。</div>
  </div>

After（修改後）：

HTML

<!-- Pillar 1 -->
  <div class="align-card align-1 card-base">
    <div class="align-card-left">
      <div class="pillar-tag p1">心法 1：釐清真正的需求</div>
    </div>
    <div class="align-card-right">
      <div class="pillar-title">拿到任務先別急著打開檔案或叫 AI 產出</div>
      <div class="pillar-desc">多問幾個為什麼，找出背後真正要解決的核心問題。先問清定價需求，一頁表格就能直擊核心。</div>
    </div>
  </div>

總結

下次當你需要處理類似表格列、左右對齊的區塊時，如果 AI 自動幫你寫了滿滿的 Flexbox 巢狀結構，不妨主動要求它改用 CSS Grid。只要定義好欄位寬度比例，就能用最乾淨的程式碼，換取最穩定、最不容易跑版的畫面表現。

在為 WordPress 主題自訂深色模式（Dark Mode / Dark Theme）切換功能時，許多開發者常會遇到一個相當破壞使用體驗的視覺 Bug：

現象描述：
點擊切換為深色模式（或由深色轉淺色）的瞬間，頁面上的超連結（<a>）或文字區塊背景會先短暫閃出一塊白色（#ffffff），接著在約 0.5 秒的時間內才緩慢漸變過渡為黑色（#000000 / #16181d）。

這並非 JavaScript 執行延遲，而是 CSS 過渡動畫（Transitions）與瀏覽器補間運算相互作用產生的典型副作用。本文將完整記錄該問題的根本成因與最佳實踐解法。

一、問題根本原因分析

這個問題主要由兩個 CSS 特性疊加造成：

1. 原生主題的 transition: all 0.5s ease; 廣泛繼承

在許多 WordPress 主題（包括 Gutenshop）的樣式表（style.css）中，為了讓按鈕與部分互動元素具備平滑動畫，常常撰寫了如下規則：

transition: all 0.5s ease;

當使用 JavaScript 動態在 <body> 或 <html> 上新增/切換 .theme-dark 類別時，瀏覽器會監測到樣式變更。由於設定了 transition: all，頁面上所有繼承或套用了該規則的屬性（包含 background-color、color、border-color）都會進入 0.5 秒的漸變過渡狀態。

2. 顏色插值運算（Color Interpolation）與透明背景缺失

• 預設情況下，常規文字超連結 <a> 的 background-color 通常是 transparent（透明）或繼承父容器。
• 當深淺模式切換時，如果某些元件或祖先元素設定了背景色變換，瀏覽器在計算 transparent（實質為 rgba(0,0,0,0) 或 rgba(255,255,255,0)）至目標色（如 #16181d）的中間過渡幀時，容易將未明定背景的元素以白色底（#fff）作為基底進行過渡插值。
• 結果就形成了：超連結背景突然變白，並耗時 0.5 秒慢慢過渡到黑色的突兀閃爍。

3. 首次造訪無 Cookie 時，未即時寫入使用者系統偏好

• 若使用者尚未手動點擊切換過，瀏覽器中就沒有 gutenshop_theme 的 Cookie。
• 每次重新整理或跳轉頁面時，若僅依賴延遲載入的腳本偵測 prefers-color-scheme: dark，頁面在 HTML 解析初期無法從 Cookie 取得狀態，導致從預設的淺色（白）重新被腳本動態判定改為深色（黑），觸發二次切換閃爍。
• 最佳解法： 在初次載入（Page Load）偵測到無 Cookie 時，立即將使用者的 System Theme 寫入 Cookie，並在 <head> 的 Anti-flicker 行內腳本同步寫入，確保下一個畫面與未來所有子頁面在 DOM 渲染前就能以 Cookie 命中深色模式，徹底杜絕閃爍。

二、解決方案

要徹底杜絕這個現象，最佳做法是「雙管齊下」：

1. 切換當下全域靜音過渡（Disable Transitions during Toggle）：切換主題時暫時鎖死所有 transition，讓深淺色瞬間套用，不觸發任何補間動畫。
2. 約束超連結的 transition 範圍：明確鎖定 <a> 的背景為透明，並限制僅有 color（文字顏色）允許 hover 漸變，禁止背景參與 transition。

步驟 1：在 CSS 中加入停用過渡與連結約束規則

在你的獨立深色模式樣式檔（如 css/dark-theme.css）加入以下規則：

/* ==========================================================================
   1. 暫停過渡工具類：切換主題瞬間徹底消除 0.5 秒的顏色補間閃爍
   ========================================================================== */
.disable-transitions,
.disable-transitions *,
.disable-transitions *::before,
.disable-transitions *::after {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

/* ==========================================================================
   2. 超連結背景與過渡約束：
      明確限制常規連結背景為透明，且過渡僅限文字顏色 (color)，防止背景補間
   ========================================================================== */
a:not(.button):not(.added_to_cart):not(.theme-switch-link) {
  background-color: transparent;
  transition-property: color;
  transition-duration: 0.2s;
}

/* 深色模式下連結文字配色 */
body.theme-dark a {
  color: #60a5fa;
}

body.theme-dark a:hover,
body.theme-dark a:focus {
  color: #93c5fd;
}

步驟 2：在切換 JavaScript 中包裝過渡阻斷邏輯

在處理主題切換的 JavaScript（如 js/theme-switch.js）的 applyTheme 函數中：

• 切換前先在根節點 <html> 加上 .disable-transitions。
• 透過存取 window.getComputedStyle().opacity 強制觸發瀏覽器重繪（Force Reflow），保證類別立即生效且不會被瀏覽器批次合併渲染。
• 完成類別切換後，使用 requestAnimationFrame 在下一個畫面幀將 .disable-transitions 移除，確保按鈕後續正常的滑鼠 hover 動畫不受影響。

/**
 * 套用深淺主題類別
 * @param {string} theme 'dark' 或 'light'
 */
function applyTheme(theme) {
  var isDark = (theme === 'dark');

  // 1. 立即停止當前所有 CSS 過渡動畫，防止 0.5s 白黑殘影閃爍
  document.documentElement.classList.add('disable-transitions');

  // 2. 切換深淺模式類別
  document.body.classList.toggle('theme-dark', isDark);
  document.body.classList.toggle('theme-light', !isDark);
  document.documentElement.classList.toggle('theme-dark', isDark);
  document.documentElement.classList.toggle('theme-light', !isDark);

  // 3. 強制觸發重繪 (Reflow)，確保樣式變更在 transition 被關閉的狀態下生效
  window.getComputedStyle(document.documentElement).opacity;

  // 4. 下一個渲染週期恢復原本的 CSS 過渡效果（按鈕 hover 等仍維持流暢動畫）
  requestAnimationFrame(function () {
    document.documentElement.classList.remove('disable-transitions');
  });

  // 5. 同步切換按鈕的 aria 屬性與提示文字
  var links = document.querySelectorAll('.theme-switch-link');
  links.forEach(function (el) {
    el.title = isDark ? '切換至淺色模式' : '切換至深色模式';
    el.setAttribute('aria-pressed', isDark ? 'true' : 'false');
  });
}

/**
 * 頁面初始化：當無 Cookie 時，立即將使用者的系統主題 (OS Theme) 寫入 Cookie
 */
function init() {
  var saved = getCookie(COOKIE_NAME);
  var currentTheme;

  if (saved === 'dark' || saved === 'light') {
    currentTheme = saved;
  } else {
    // 首次造訪無 cookie：抓取系統主題並立即寫入 cookie，避免二次載入或跳轉時重複判斷而閃爍
    currentTheme = getSystemTheme();
    setCookie(COOKIE_NAME, currentTheme, COOKIE_DAYS);
  }

  var isDark = (currentTheme === 'dark');
  applyTheme(currentTheme);
  injectDesktopToggle(isDark);
  injectMobileToggle(isDark);
  document.addEventListener('click', handleClick);
  watchOSTheme();
}

步驟 3：在 Head 注入極速防閃爍腳本並更新版本號

在 functions.php 的 wp_enqueue_scripts 中：

1. 注入極速 Inline 腳本：若初次無 Cookie，亦立即將系統主題寫入 Cookie 並先加上 theme-dark 類別，在 HTML 剛載入時就完成判定。
2. 推進樣式表與腳本版本號（例如 1.0.1 / 1.0.3），避免瀏覽器快取舊檔案：

// functions.php
wp_register_style( 
    'gutenshop-dark-theme', 
    get_template_directory_uri() . '/css/dark-theme.css', 
    array( 'gutenshop-style' ), 
    '1.0.1' 
);
wp_enqueue_style( 'gutenshop-dark-theme' );

// 防閃爍腳本：搶先注入 <html>，若無 cookie 則同步寫入系統主題 cookie
$anti_flicker_js = "(function(){try{var m=document.cookie.match(/(^|;\\s*)gutenshop_theme=([^;]+)/);var t=m?decodeURIComponent(m[2]):null;var d=(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light';var theme=t||d;if(!t){var exp=new Date();exp.setTime(exp.getTime()+(365*24*60*60*1000));document.cookie='gutenshop_theme='+encodeURIComponent(d)+'; expires='+exp.toUTCString()+'; path=/; SameSite=Lax';}if(theme==='dark'){document.documentElement.classList.add('theme-dark');}}catch(e){}})();";
wp_add_inline_script( 'gutenshop-navigation', $anti_flicker_js, 'before' );

wp_register_script( 
    'gutenshop-theme-switch', 
    get_template_directory_uri() . '/js/theme-switch.js', 
    array( 'gutenshop-custom-js-jquery' ), 
    '1.0.3', 
    true 
);
wp_enqueue_script( 'gutenshop-theme-switch' );

三、成果驗證

套用此修改後：

1. 點擊深淺模式切換按鈕：背景與所有文字立刻無縫切換，完全不再出現 0.5 秒的白色閃爍與變色殘影。
2. 一般互動不受影響：一般的按鈕 hover、下拉選單滑動等原有動畫依然正常流暢運作。
3. 效能優化：利用強制 Reflow 配合 requestAnimationFrame，不會造成頁面重載或多餘運算開銷。

簡單來說，如果你的 CSP （ 網頁安全政策 ）開了 unsafe-inline ，就等於是在大門裝了密碼鎖，卻把密碼用便利貼貼在門口一樣。駭客只要找到機會塞一段惡意腳本（ XSS 攻擊 ），你的網站就直接變成他的遊樂場。

但是偏偏像是 Google Tag Manager （ GTM ）這種必裝的分析工具，官方給的程式碼裡面就是有一大段 Inline Script ：

HTML

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

既想要防禦 XSS 攻擊，又不能把 GTM 拔掉，這時候你有兩條路可以走，讓我們來看看這兩個相愛相殺的解決方案。

方案一：使用 Nonce （ 一次性密碼鎖 ）

這個方法就像是去看演唱會，每次進場工作人員都會在你的手上蓋一個當天限定、過期失效的印章。

在 CSP 標頭（ Header ）裡，你可以這樣設定：

HTTP

Content-Security-Policy: script-src 'nonce-每天換的神秘亂數密碼'; img-src www.googletagmanager.com

然後在你的網頁程式碼中，那段 GTM 的標籤也必須帶上相同的密碼：

HTML

<script nonce='每天換的神秘亂數密碼'>
  // GTM 的扣（Code）放這裡
</script>

工程師真心話

• 優點：超級安全。因為駭客根本猜不到你下一個 Request 的亂數密碼是什麼，就算他成功塞了惡意指令，也會因為沒有通關密碼而被瀏覽器直接擋在門外。
• 缺點（ 也就是坑 ）：這非常考驗後端的大腦。你的伺服器必須在「 每次 」收到請求時，都用高強度的加密演算法生出一組全新的隨機字串。最慘的是，你的網頁從此跟「 回應快取 」（ Response Cache ）說再見，因為一旦網頁被快取，密碼就不會變了，那這個鎖就形同虛設。

方案二：使用 Hash （ 驗收指紋認證 ）

如果你的網站是 SPA （ 單頁應用程式 ），或是部署在 GitHub Pages 這種根本沒有後端可以幫忙生密碼的靜態伺服器，那 Hash 就是你的救星。

這個概念是，瀏覽器會直接去核對這段程式碼的「 指紋 」。

步驟非常簡單，把 <script> 到 </script> 之間的程式碼內容，丟到 SHA256 線上計算工具 裡面去跑一下，會得到一串像是 0bbd063b7... 的雜湊值（ Hash ）。

接著把這串指紋放進你的 CSP 設定裡：

HTTP

Content-Security-Policy: script-src 'sha256-計算出來的那串指紋'; img-src www.googletagmanager.com

工程師真心話

• 優點：前端自己就能搞定，不需要後端伺服器配合，而且網頁依然可以開開心心地做快取，提升載入速度。
• 缺點（ 最雷的地方 ）：
  1. 字元敏感度破表：SHA256 是一個極度龜毛的演算法。只要你的程式碼裡面多了一個空格、少了一個換行，甚至不同工程師的電腦存檔時，斷行符號一個是 LF （ \n ）一個是 CRLF （ \r\n ），算出來的指紋就完全不一樣。指紋一對不上，你的 GTM 就會直接被 CSP 射下來。
  2. 維護地獄：哪天行銷團隊突然要求修改 GTM 裡面的參數，只要動到一個字，你就必須重新計算一次 Hash 值、重新更新 CSP 標頭。如果交接沒做好，後續接手的工程師改了程式碼發現網站功能壞掉，可能要在電腦前哭著找兇手找很久。

總結防禦指南

想要高枕無憂、後端架構也撐得住，請選 Nonce 。

如果是靜態網站、追求速度與快取，請選 Hash ，但每次改動程式碼時，請記得去燒香拜拜順便更新指紋。

總之，快把 unsafe-inline 從你的 CSP 裡面拿掉，別再讓你的網站裸奔了。

為什麼連寫個看起來無害的 CSS 都會被瀏覽器當成恐怖份子。

瀏覽器的大內總管：CSP 到底在嚴格什麼？

各位前端與後端苦力們，有沒有遇過這種慘劇？

當你興高采烈地在網站加上這行內容安全政策（CSP）：

Content-Security-Policy: default-src 'self';

本以為從此高枕無憂，結果下一秒打開網頁，發現自己寫的行內腳本（inline-script）全部陣亡：

<script>console.log('連我都不能跑是怎樣');</script>

好啦，大家都知道 JavaScript 權限大、壞人最愛用，所以瀏覽器預設不讓它亂跑很合理。為了安撫大內總管，我們還得乖乖去算雜湊值（Hash）或是塞個 nonce 安全憑證，像是這樣：

Content-Security-Policy: default-src 'self'; script-src 'sha256-xxx...';

但是，最讓人傻眼的是，連單純想幫網頁化妝的行內樣式（inline-style）也被一起關進大牢了：

<style>h1 { color: yellow; }</style>

CSS 到底做錯了什麼？它只是個孩子啊！

警匪片現場：當 CSS 變成滲透工具

資安世界有三大神聖支柱：機密性、完整性、可用性。而隨便亂加的 CSS，其實正在默默破壞這一切。

疑犯一號：DOM 元素私生子（破壞完整性）

你可能會想：「這網頁是我寫的，裡面的 CSS 當然也是我寫的啊！」

事情可沒那麼簡單。在 JavaScript 的世界裡，壞人可以用各種神奇手法動態產生元素：

JavaScript

let style = document.createElement('style');
style.innerText = 'h1 { color: blue; }';
document.body.appendChild(style);

這段程式碼一旦被惡意注入，它就能神不知鬼不覺地改掉你的網頁外觀。這就是為什麼瀏覽器乾脆一不做二不休，預設把所有沒登記過的行內樣式全部封鎖。

疑犯二號：假藉美化名義的間諜（破壞機密性）

CSS 裡面有兩個看起來很無辜、但實際上超常被當作間諜的語法： @import 和 url() 。

當你用了背景圖片：

background-image: url(https://example.com/spy.jpg);

瀏覽器看到這行，就會自動發出一個請求去下載圖片。這時候，壞人就可以利用這個機制搞鬼：

• 偷看你的行蹤（Beacon 技術）： 只要把圖片網址加上個人專屬的編碼，當你一打開網頁，壞人的伺服器收到圖片請求，就知道「喔！某某某在幾點幾分看了這個頁面！」
• Cookie 順風車： 如果網站沒設定好，這個請求甚至會順便把你的 Cookie 跨站送出去，直接把你的登入狀態雙手奉上。

所以，想要在有 CSP 的防護下安全地秀出圖片，你還必須跟總管報備圖片的白色名單：

Content-Security-Policy: default-src 'self'; style-src 'sha256-...'; img-src http://信任的圖片來源;

結論

在這個壞人招數層出不窮的時代，網頁開發者真的不能只活在「CSS 只是用來排版」的粉紅泡泡裡。多了解一點 CSP 的龜毛規則，雖然設定時會寫到抓狂，但至少能保住大家的飯碗，不讓網站變成駭客的免費遊樂園！

之前使用過 :not() 覺得超級的實用，例如：選取所有checkbox 狀態是沒被打勾的。今天要來學習使用 :has().

相關文章

• :has()
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has
• CSS :has() Pseudo-class
  https://www.w3schools.com/cssref/sel_has.php
• :has() 個案研究
  https://developer.chrome.com/blog/css-ui-ecommerce-has?hl=zh-tw
• How to Use the :has() Selector in CSS
  https://www.freecodecamp.org/news/how-to-use-the-has-selector-in-css/

影片：Learn CSS :not() and :has() selector in 6 Minutes
https://www.youtube.com/watch?v=-pQZLQakz-c

滿神奇的，居然完全沒使用 javascript 就到過 filter 功能。

在使用 clipchamp 時看到這一個功能，覺得很有趣。

比較簡單的解法，是使用 sidebar + collapse 就可以做到，範例程式：
https://getbootstrap.com/docs/5.3/examples/sidebars/

clipchame 的這個做法的優點是讓分類可以保持在左側sidebar 裡。

實作的方式是，sidebar 使用 tab 來實作，收合使用。 collapse, 參考看看 bootstrap 範例：
https://getbootstrap.com/docs/5.3/components/collapse/

一般 collapse 是上下收合，這個是左右收。

一般 tab 是上下的版面，這個是左右版面。

實際上用的到html程式碼：

  <div class="ifilter_chart">
      <div class="ifitler_chart_left_side_bar">
          <nav aria-label="左側導覽" class="ifilter_chart_left_nav normal" tabindex="0">
              <div class="ifilter_chart_left_nav_grid">
                  <div class="ifilter_chart_left_nav_item">
                      <div role="tablist">
                          <button aria-label="Filter" aria-selected="true" class="ifilter_chart_left_nav_btn active" data-bs-toggle="tab" href="#ifilter_tab_bar_filter" data-sidebar-tab="true" role="tab" tabindex="0">
                              <i class="fs-3 bi bi-filter"></i>
                              <div class="ifilter_chart_left_nav_item_text">
                                  Filter
                              </div>
                          </button>
                          
                        <button aria-label="Config" aria-selected="false" class="ifilter_chart_left_nav_btn" data-bs-toggle="tab" href="#ifilter_tab_bar_config" data-sidebar-tab="true" role="tab" tabindex="-1">
                            <i class="fs-3 bi bi-grid-fill"></i>
                            <div class="ifilter_chart_left_nav_item_text">
                                Config
                            </div>
                        </button>                          
                      </div>
                  </div>
              </div>
          </nav>
          <div style="position: relative;">
              <div aria-label="左側內容" class="ifilter_chart_left_sidebar" style="height: 100%">
                  <div class="ifilter_chart_left_sidebar_grid collapse show" id="collapse_bar_sidebar">
                      <div class="tab-content ifilter_chart_left_sidebar_grid_container" style="position: relative; box-sizing: border-box; will-change: width; width: 280px; height: 100%; max-width: 50vw; min-width: 280px;">
                          <div class="tab-pane fade active show" id="ifilter_tab_bar_filter" role="tabpanel">
<!-- your filter block here -->
                          </div>
                          <div class="tab-pane fade" id="ifilter_tab_bar_config">
<!-- your config block here -->
                          </div>
                      </div>
                  </div>
              	  
              	  <button aria-label="收合按鈕"
              	  	data-bs-toggle="collapse" data-bs-target="#collapse_bar_sidebar" aria-expanded="true" aria-controls="collapse_sidebar" 
              	  	class="btn btn-primary ifilter_chart_collapse_button ifilter_chart_collapse_icon ifilter_sidebar_button collapsed">
				    <svg class="ifilter_chart_collapse_icon_svg" height="12" viewbox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg">
				        <path d="M2.22 4.47c.3-.3.77-.3 1.06 0L6 7.19l2.72-2.72a.75.75 0 0 1 1.06 1.06L6.53 8.78c-.3.3-.77.3-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06Z" fill="currentColor">
				        </path>
				    </svg>
				</button>
              </div>
          </div>
      </div>
      <div class="ifilter_chart_canvas">
<!-- your main canvas here -->
      </div>
  </div>

css:

div.ifilter_chart {
    display: flex;
    height: 100%;	
}

.ifitler_chart_left_side_bar{
    display: flex;
    /*
    // why remark this become height: 100% 
    height: 100%; */
    position: relative;
    z-index: 5;	
}

.ifilter_chart_left_nav {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 64px;
    border-inline-end: 1px solid rgb(230, 230, 230);
}

.ifilter_chart_left_nav_grid {
    flex-grow: 1;
    align-self: stretch;
    position: relative;
    overflow: hidden;
}

.ifilter_chart_left_nav_item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0px;
    /* overflow-y: scroll; */
}

.ifilter_chart_left_nav_btn.active {
    opacity: 1;
    color: var(--primary) !important;
    background: var(--rgba-primary-1);
    font-weight: 600;
    box-shadow: none;    
}
.ifilter_chart_left_nav_btn {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    color: #737B8B;
    line-height: 1.1;
    padding: 4px;
    width: 64px;
    height: 64px;
    font-weight: 400;
    cursor: pointer;
    /* transition: color 100ms ease-in-out 0s, background 100ms ease-in-out 0s; */
}

.ifilter_chart_left_nav_item_text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
    
.ifilter_chart_left_sidebar {
	position: relative;
    height: 100%;
}

.ifilter_chart_left_sidebar_grid {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
}

.ifilter_chart_left_sidebar_media {
    background-color: rgb(255, 255, 255);
    overflow: hidden overlay;
    flex-grow: 1;
}

.ifilter_chart_left_sidebar_section {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.ifilter_chart_left_sidebar_grid_container {
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.ifilter_chart_collapse_icon {
    position: absolute;
    top: calc(50% - 38px);
    height: 76px;
    width: 16px;
    color: rgb(39, 40, 54);
    transition: color 150ms ease-out 0s;
}
.ifilter_sidebar_button {
    position: absolute;
    top: calc(50% - 38px);
    transition: color 150ms ease-out 0s;	
}

.ifilter_chart_collapse_icon {
    left: 100%;
}
.ifilter_chart_collapse_icon_svg:not(.collapsed) {
    transform: rotate(90deg);
}
.ifilter_chart_collapse_icon_svg.collapsed {
    transform: rotate(270deg);
}

.ifilter_chart_collapse_icon_svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -6px;
    margin-top: -6px;
}

.ifilter_chart_collapse_button {
    text-align: inherit;
    padding: 0px;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}

.ifilter_chart_canvas {
	width: 100%;
	text-align: -webkit-center;
	padding-top: 3rem;
    margin-left: 20px;
}

javascript:

var collapseElementList = [].slice.call(document.querySelectorAll('.ifilter_chart_left_nav_btn'));
collapseElementList.map(function (collapseEl) {
	collapseEl.addEventListener("click", function(event){
        let targetElement = event.target || event.srcElement;
        //console.log(targetElement);
        if(targetElement.tagName=="I" || targetElement.tagName=="DIV") {
        	targetElement = targetElement.parentNode;
            //console.log(targetElement);
        }
    	
        let btn_href = targetElement.getAttribute("href");
    	let btn_selector = "";
    	let collapse_id = "";
    	if(btn_href=="#ifilter_tab_bar_config" || btn_href=="#ifilter_tab_bar_filter") {
    		collapse_id = "collapse_bar_sidebar";
    		btn_selector = 'button[data-bs-target="#'+ collapse_id +'"]';
    	}
    	const sidebar_btn = document.querySelector(btn_selector);
    	if(sidebar_btn) {
    		//console.log(sidebar_btn.getAttribute("class"));
    		if(sidebar_btn.getAttribute("class").indexOf("collapsed") > -1) {
    			const bsCollapse = new bootstrap.Collapse(document.querySelector('#'+collapse_id));
    			bsCollapse.toggle();
    		}
    	}
    });
});


var collapseElementList = [].slice.call(document.querySelectorAll('.ifilter_chart_left_sidebar_grid'));
collapseElementList.map(function (collapseEl) {
	// hide.bs.collapse
	const element_selector = "button[data-bs-target=\"#"+ collapseEl.getAttribute("id") +"\"] svg.ifilter_chart_collapse_icon_svg";
	collapseEl.addEventListener("hidden.bs.collapse", function(event){
		$(element_selector).addClass("collapsed");
	});

	// show.bs.collapse
	collapseEl.addEventListener("shown.bs.collapse", function(event){
		$(element_selector).removeClass("collapsed");
	});
});

說明：你的使用情況可能比我簡單很多，我因為有多個圖表要共用 css, 所以程式碼會複雜一點點。

比較方便的做法, 是直接填滿某一個網格, 然後再格子裡設定間距, 做出來的執行效果:

中間神奇的關鍵是 row-cols-md-3, 滿神奇的, 加了這個class , 圖片就自動縮到格子裡, 後面加 g-3 是要讓邊邊不要直接摸到圖片的線條。

為什麼要使用 validation, 因為這個使用上很直覺, 可以直接跟user講那一個欄位分別是合法,還有各自的錯誤訊息, 也不會因讓畫面有奇怪的彈跳, 使用的效果相較於彈出式的alert/dialog/modal 而言, 比較推薦使用.

在 input tag, 並不是使用 onchange 來觸發每一個輸入的字元, onchange 是在離開input 輸入框時, 才會觸發, 每打一個字, 使用的是事件是 oninput.

在 input 的 parent 加入 .was-validated 就可以觸發讓輸入框有打勾與”必填”的視覺上的效果. 如果是要類似的 ajax 的使用方法, 必需在”完成檢查” 並且沒有錯誤, 才 addClass, 反之要 removeClasss, 就可以有上面的效果.

但是, 如果是要在輸入框有值, 且要顯示為錯誤, 請手動讓正確的 form-control 加入 class .is-valid 有錯的 form-control 加入 .is-invalid .

官方的說明:
https://getbootstrap.com/docs/5.3/forms/validation/

異常情況, 是無法產生 scrollbar, 畫面變超大,

努力地研究 tabulator 官方文件, 也看不出所以然:
https://tabulator.info/docs/5.5/layout#fittowidth

手動調整 tabulator 的 table width:100% 也無解.

產成的原因:

某一個爸爸 div 讓 tabulator 繼承到 display: grid; 而且上層又是用 flex, 交叉使用就掛掉.

解法1: 避開 grid 就OK了.

解法2: 在 tabulator 的上層設成 display: grid 居然也行, 真太神奇了, 呵呵.