css – Max的程式語言筆記

SVG 動畫的排版小陷阱：讓線條和箭頭同步出現

max-stackoverflow — Mon, 26 Oct 2026 21:21:44 +0000

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

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

問題是甚麼

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

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

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

為什麼會這樣

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

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

解決方案

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

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

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

程式碼實作

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

HTML

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

如果 AI 生成的 Flex ：如何用 CSS Grid 打造完美的左右雙欄卡片

max-stackoverflow — Tue, 20 Oct 2026 16:04:15 +0000

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

核心原理：為什麼改用 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


  
    心法 1：釐清真正的需求
    拿到任務先別急著打開檔案或叫 AI 產出
    多問幾個為什麼，找出背後真正要解決的核心問題。先問清定價需求，一頁表格就能直擊核心。

After（修改後）：

HTML


  
    
      心法 1：釐清真正的需求
    
    
      拿到任務先別急著打開檔案或叫 AI 產出
      多問幾個為什麼，找出背後真正要解決的核心問題。先問清定價需求，一頁表格就能直擊核心。

總結

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

如何為 WordPress 主題無痛加入深色模式？Git Patch 與高效率 Prompt 實戰

max-stackoverflow — Thu, 15 Oct 2026 16:19:35 +0000

在現代網頁設計中，深色模式（Dark Mode / Dark Theme）已經是用戶體驗（UX）的基本標配。除了降低在暗處閱讀時的眼部疲勞，也能延長 OLED 螢幕的電池續航力。

本篇技術筆記以開源主題 Guntenbee 為例，完整記錄如何架構一個具備「系統主題偏好自動偵測 + Cookie 記憶 + 切換按鈕 + 防閃爍 (Anti-flicker)」的深色模式方案。同時針對日後「原作者主題升級」時如何以零成本（Git Patch / Child Theme）或極低 Token 的 AI 提示詞無痛重新套用進行深度解析。

一、核心需求與架構設計

一個健全的深色模式切換機制需要具備以下要點：

使用者優先權階層：
- 若使用者曾在站上點擊切換過，以 Cookie 儲存的偏好 為最優先。
- 若為首次造訪或未設定 Cookie，自動偵測使用者的系統外觀模式（prefers-color-scheme: dark）。
避免白光閃爍（Anti-flicker / FOUC）：
- 瀏覽器解析 HTML 時，如果等到完整腳本下載並在 DOMContentLoaded 才執行加 class，畫面上會出現短暫的白光閃爍。因此需在注入極輕量的行內（Inline）腳本提早設定 class。
直覺易用的開關位置：
- 將切換開關置入 Header 頂部導覽列（
  ），確保各裝置與版型都能一致顯示。

二、功能實作步驟

1. 樣式實作：獨立樣式表 (`css/dark-theme.css`)

將所有深色模式樣式統一抽離至獨立檔案，避免直接污染原作者的 style.css，大幅降低後續維護與合併時的衝突風險。

/* ==========================================================================
   Dark Theme Styles
   ========================================================================== */

/* 全域背景與文字 */
body.theme-dark {
  background-color: #121417;
  color: #c9d1d9;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6 {
  color: #f0f6fc;
}

/* 頂部導覽、底欄與行動端選單 */
body.theme-dark .head-mast,
body.theme-dark .head-outro,
body.theme-dark .navigation-mobile-wrap {
  background-color: #181b20;
  color: #c9d1d9;
}

/* 下拉選單 */
body.theme-dark .navigation-main ul {
  background-color: #1a1e24;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  border: 1px solid #2b3036;
}

/* 輸入框與表單元件 */
body.theme-dark input[type="text"],
body.theme-dark input[type="search"],
body.theme-dark select,
body.theme-dark textarea {
  background-color: #1a1e24;
  color: #e6edf3;
  border-color: #343a42;
}

/* 主題切換按鈕與 SVG 圖示切換 */
.theme-switch-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.theme-switch-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* 淺色模式顯示月亮，深色模式顯示太陽 */
.theme-switch-icon .icon-sun { display: none; }
.theme-switch-icon .icon-moon { display: inline-block; }
body.theme-dark .theme-switch-icon .icon-sun { display: inline-block; }
body.theme-dark .theme-switch-icon .icon-moon { display: none; }

2. 行為邏輯：偵測與持久化 (`js/theme-switch.js`)

透過原生 JavaScript 實現無相依性（Vanilla JS）的偵測與 Cookie 儲存：

(function () {
  'use strict';

  var COOKIE_NAME = 'guntenbee_theme';
  var COOKIE_DAYS = 365;

  function getCookie(name) {
    var match = document.cookie.match(new RegExp('(^|;\\s*)' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
  }

  function setCookie(name, value, days) {
    var expires = '';
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = '; expires=' + date.toUTCString();
    }
    document.cookie = name + '=' + encodeURIComponent(value) + expires + '; path=/; SameSite=Lax';
  }

  function getSystemTheme() {
    return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
      ? 'dark'
      : 'light';
  }

  function getPreferredTheme() {
    var savedTheme = getCookie(COOKIE_NAME);
    return (savedTheme === 'dark' || savedTheme === 'light') ? savedTheme : getSystemTheme();
  }

  function applyTheme(theme) {
    var isDark = (theme === 'dark');
    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);

    var toggles = document.querySelectorAll('.theme-switch-toggle');
    toggles.forEach(function (btn) {
      btn.setAttribute('aria-pressed', isDark ? 'true' : 'false');
      btn.setAttribute('title', isDark ? '切換至淺色模式' : '切換至深色模式');
    });
  }

  function init() {
    applyTheme(getPreferredTheme());

    document.addEventListener('click', function (e) {
      var toggle = e.target.closest('.theme-switch-toggle');
      if (toggle) {
        e.preventDefault();
        var currentTheme = document.body.classList.contains('theme-dark') ? 'dark' : 'light';
        var nextTheme = (currentTheme === 'dark') ? 'light' : 'dark';
        setCookie(COOKIE_NAME, nextTheme, COOKIE_DAYS);
        applyTheme(nextTheme);
      }
    });

    // 監聽作業系統外觀模式動態變化
    if (window.matchMedia) {
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
        if (!getCookie(COOKIE_NAME)) {
          applyTheme(getSystemTheme());
        }
      });
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();

3. WordPress 資源載入與防閃爍 (`inc/scripts-styles.php`)

在 wp_enqueue_scripts 鉤子中註冊資源，並加入極速 Inline 腳本：

// Enqueue 樣式與腳本
wp_register_style( 'gutenbee-dark-theme', get_theme_file_uri( '/css/dark-theme.css' ), array( 'gutenbee-style' ), gutenbee_asset_version() );
wp_enqueue_style( 'gutenbee-dark-theme' );

// 防閃爍腳本：在頁面剛開始解析 DOM 時搶先將 theme-dark 注入 
$anti_flicker_js = "(function(){try{var m=document.cookie.match(/(^|;\\s*)guntenbee_theme=([^;]+)/);var t=m?decodeURIComponent(m[2]):null;var d=(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light';if((t||d)==='dark'){document.documentElement.classList.add('theme-dark');}}catch(e){}})();";
wp_add_inline_script( 'gutenbee-dependencies', $anti_flicker_js, 'before' );

wp_register_script( 'gutenbee-theme-switch', get_theme_file_uri( '/js/theme-switch.js' ), array(), gutenbee_asset_version(), true );
wp_enqueue_script( 'gutenbee-theme-switch' );

4. 範本標籤與按鈕輸出 (`inc/template-tags.php` & Header Templates)

定義輔助函數：function gutenbee_the_theme_switch_button() { ?>





在 template-parts/header/header-full.php、header-split.php、header-navbar.php 的  內部直接呼叫 gutenbee_the_theme_switch_button() 即可完美呈現。









三、未來原作者升級主題時的處理策略



當原主題作者發布新版本更新時，若直接覆蓋整個主題資料夾，客製化代碼將會遺失。以下提供三種不同維護情境的應對方式：



策略 A：建立子主題（Child Theme）—— 永遠不被覆蓋（推薦最佳實踐）



WordPress 的標準升級防禦機制是子主題。只需將新寫好的 dark-theme.css、theme-switch.js 及對應 template parts 放進子主題資料夾，日後父主題無論升級幾次，客製化邏輯都不會被覆蓋。



策略 B：利用 Git Patch 自動打補丁（零 Token 快速升級）



若習慣直接於主題目錄工作，建議在功能完成時立即產生 patch 檔案備份：



# 產出補丁檔
git diff > dark-theme.patch



當日後原作者有新版發布時：



# 下載並解壓縮覆蓋原主題後，執行一鍵套用
git apply --reject --whitespace=fix dark-theme.patch



git apply 具備自動比對行號上下文與建立新檔案的能力，速度快且完全不花費任何 AI token。







策略 C：低 Token 的精準 AI 提示詞（AI Prompt Template）



若在遠端或未配備 Git 的環境，需請 AI 助理重新在原作者新版主題植入 Dark Theme 功能時，千萬不要使用模糊指令（例如「幫我在這個主題加深色模式」，這會讓 AI 花費數萬 Token 去探索全文結構與測試選擇器）。



直接複製使用以下經結構化優化的 精準 Prompt：



請為 @guntenbee 主題實作 Dark Theme 功能。請直接依照以下規格建立檔案與注入代碼，不需漫遊搜尋其他檔案：

1. 新增樣式與腳本：
   - 建立 `css/dark-theme.css`：定義 `body.theme-dark` 樣式（深色底色 #121417、文字 #c9d1d9、容器/選單 #181b20）與 `.theme-switch-toggle` 按鈕 SVG 切換動態。
   - 建立 `js/theme-switch.js`：讀取/寫入 Cookie `guntenbee_theme`（效期 365 天）；若無 Cookie 則以 `prefers-color-scheme: dark` 為準，並監聽 OS 主題變化與按鈕點擊事件。

2. 註冊與防閃爍（修改 `inc/scripts-styles.php`）：
   - 在 `gutenbee_enqueue_scripts` 中以 `wp_enqueue_style` 載入 `dark-theme.css`。
   - 注入 Inline Script 到 ``：若 Cookie 或系統偏好為 dark，即時加上 `document.documentElement.classList.add('theme-dark')` 以防止白光閃爍。
   - 以 `wp_enqueue_script` 載入 `theme-switch.js`。

3. 按鈕與鉤子整合：
   - 在 `inc/template-tags.php` 新增 `gutenbee_the_theme_switch_button()` 輸出太陽/月亮按鈕 HTML。
   - 在 `template-parts/header/header-*.php` 各樣板的 `` 的 `head-content-slot` 中呼叫該按鈕函式。
   - 在 `inc/default-hooks.php` 的 `gutenbee_body_class` 過濾器中檢查 `$_COOKIE['guntenbee_theme']`，有 dark 值即附加 `theme-dark` class。



為什麼這個 Prompt 具備高性價比（Low Token Usage）？




消除探勘步驟：精確指出檔案名稱（如 inc/scripts-styles.php、template-parts/header/header-*.php），AI 不需調用目錄搜尋工具消耗大量 Context Window。



精準函式命名：直接給予目標鉤子（gutenbee_body_class、gutenbee_enqueue_scripts），AI 思考路徑縮短，輸出 token 減少 70% 以上。



成果可預測且易於維護：模組化規範使每一次生成的樣式結構一致，日後維護與問題排查極為單純。



CSP (Content Security Policy) 的網站要如何安全的使用 Inline script
max-stackoverflow — Thu, 18 Jun 2026 09:01:22 +0000

當你在幫網站做健康檢查，看到弱掃報告（ 像是 ZAP ）跳出一個橘黃色的 Medium 警告，寫著 style-src 'unsafe-inline' 或是發現 script-src 滿是漏洞時，心裡是不是頓時涼了一半？



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



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



HTML









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







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



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



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



HTTP



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




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



HTML








 工程師真心話




優點：超級安全。因為駭客根本猜不到你下一個 Request 的亂數密碼是什麼，就算他成功塞了惡意指令，也會因為沒有通關密碼而被瀏覽器直接擋在門外。



缺點（ 也就是坑 ）：這非常考驗後端的大腦。你的伺服器必須在「 每次 」收到請求時，都用高強度的加密演算法生出一組全新的隨機字串。最慘的是，你的網頁從此跟「 回應快取 」（ Response Cache ）說再見，因為一旦網頁被快取，密碼就不會變了，那這個鎖就形同虛設。








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



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



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



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



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



HTTP



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




 工程師真心話




優點：前端自己就能搞定，不需要後端伺服器配合，而且網頁依然可以開開心心地做快取，提升載入速度。



缺點（ 最雷的地方 ）：

字元敏感度破表：SHA256 是一個極度龜毛的演算法。只要你的程式碼裡面多了一個空格、少了一個換行，甚至不同工程師的電腦存檔時，斷行符號一個是 LF （ \n ）一個是 CRLF （ \r\n ），算出來的指紋就完全不一樣。指紋一對不上，你的 GTM 就會直接被 CSP 射下來。



維護地獄：哪天行銷團隊突然要求修改 GTM 裡面的參數，只要動到一個字，你就必須重新計算一次 Hash 值、重新更新 CSP 標頭。如果交接沒做好，後續接手的工程師改了程式碼發現網站功能壞掉，可能要在電腦前哭著找兇手找很久。










總結防禦指南



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



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



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







網頁開發者必看！用白話秒懂 CSS Injection 與 CSP 防禦
max-stackoverflow — Thu, 18 Jun 2026 06:39:22 +0000





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







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



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



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



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



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







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



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



但是，最讓人傻眼的是，連單純想幫網頁化妝的行內樣式（inline-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 的龜毛規則，雖然設定時會寫到抓狂，但至少能保住大家的飯碗，不讓網站變成駭客的免費遊樂園！







How to Use the :has() Selector in CSS
max-stackoverflow — Thu, 05 Dec 2024 01:41:05 +0000





之前使用過 :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 功能。



tabulator 的寬度無法overflow:hidden
max-stackoverflow — Fri, 04 Aug 2023 10:33:26 +0000

正常情況下, overflow 的部分被隱藏, 並在內部元件產生橫向的scroll bar.







異常情況, 是無法產生 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 居然也行, 真太神奇了, 呵呵. 



Left align and right align within div in Bootstrap
max-stackoverflow — Tue, 18 Jul 2023 10:04:52 +0000

想把下面的按鈕們搬到右邊, 但都失敗, 成功後的執行畫面:











解法:
https://getbootstrap.com/docs/5.0/utilities/flex/




  Flex item
  Flex item
  Flex item








直接下 justify-content-end , 沒有效果, 



使用 text-right 也失敗:
https://getbootstrap.com/docs/4.0/utilities/text/



Right aligned text on all viewport sizes.



css selector tester online: jsoup
max-stackoverflow — Fri, 14 Jul 2023 18:10:17 +0000

今天要分享一個跟css selector 有關的網站:
https://try.jsoup.org/



我實際執行畫面：







原本的 css selector 是寫 tr.status_tr 但是，會連 Soldout 也一起被選到，改用 tr[class=’status_tr’] 就解決了，沒有使用到  :NOT().







在網路上學習 css selector 的語法，想套用看看，例如我想試的是NOT 的用法：
https://www.geeksforgeeks.org/how-to-use-a-not-equal-css-attribute-selector/



相關討論：Can’t find a “not equal” css attribute selector
https://stackoverflow.com/questions/25287229/cant-find-a-not-equal-css-attribute-selector



One problem with the accepted answer is that it will also select elements that do not have a foo attribute at all. Consider:



No foo
Empty foo
XXX
YYY
ZZZ




div:not([foo='']) will select both the first and second div elements. If you only want div elements that have an attribute foo that is set to an empty string, you should use:



div[foo]:not([foo=''])




If you want all elements with attribute foo that is neither y nor z, you should use:



div[foo]:not([foo='y']):not([foo='z'])




Bootstrap Tabs Example
max-stackoverflow — Tue, 18 Apr 2023 07:41:44 +0000

最近有一個需求, 想做成 wizard  風格的操作界面, 首先是在 google 下 keyword:



bootstrap tabs template



使用下面的範例來修改:
https://colorlib.com/etc/bwiz/colorlib-wizard-30/index.html











實做的結果:



Step 1:











Step 2:











Step 3:











使用的 html:




	
		
			
				
				1
			
			
				
				2
			
			
				
				3
			
		
	

	
                
                  Field1
                    
                
	
	
                
                  Field2
                    
                
                
                  Field3
                    
                
	
	
                
	                
	                  User
	                
	                
	                  
	                
                

                
	                
	                  Field1
	                
	                
	                  
	                
                

                
	                
	                  Field2
	                
	                
	                  
	                
                

                
	                
	                  Field3
	                
	                
	                  
	                
                
	





下方的按鈕們:


















使用的 css:



 .form-register .steps {
    margin-bottom: 33px;
    margin-top: 40px
}

.form-register .steps ul {
    display: flex;
    display: -webkit-flex;
    list-style: none;
    padding-left: 0;
    justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center
}

.form-register .steps li,.form-register .steps li.current {
    outline: none;
    -o-outline: none;
    -ms-outline: none;
    -moz-outline: none;
    -webkit-outline: none
}

.form-register .steps li div {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #ccc;
    margin-right: 143px;
    position: relative;
    outline: none
}

.form-register .steps li div::before {
    position: absolute;
    content: "";
    background: #e5e5e5;
    width: 143px;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 100%
}

.form-register .steps li.last div {
    margin-right: 0
}

.form-register .steps li.last div::before {
    content: none
}

.form-register .steps li.current div
,.form-register .steps li.current div:active
,.form-register .steps li.done div::before
,.form-register .steps li.done div
,.form-register .steps li.done div:active {
    background: #3760e5
}

.form-register .steps li .current-info {
    display: none
}

.form-register .steps li .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    font-family: montserrat,sans-serif
}








使用到的 javascript:



這段用來控制按鍵和區塊在切換時的顯示.



function switch_tab_step(table_name, active_at, tab_count) {
	for(let i=1; i<=tab_count; i++){
		$("#"+ table_name +"_nav_"+i).removeClass("current");
		$("#"+ table_name +"_nav_"+i).removeClass("done");
		
		if(i




next 與 previous 的控制:



function your_table_next_1() {
	switch_tab_step('your_table',2,3);
}

function your_table_previous_1() {
	switch_tab_step('your_table',1,3);
}

function your_table_next_2() {
	switch_tab_step('your_table',3,3);
	
	// final step
    // your code here...
}

function your_table_previous_2() {
	switch_tab_step('your_table',2,3);
}







大致上, 這樣就可以做出 wizard 效果.

css – Max的程式語言筆記

SVG 動畫的排版小陷阱：讓線條和箭頭同步出現

問題是甚麼

為什麼會這樣

解決方案

程式碼實作

如果 AI 生成的 Flex ：如何用 CSS Grid 打造完美的左右雙欄卡片

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

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

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

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

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

實戰修改前後對照

CSS 修改前後對照

HTML 修改前後對照

總結

如何為 WordPress 主題無痛加入深色模式？Git Patch 與高效率 Prompt 實戰

一、核心需求與架構設計

二、功能實作步驟

1. 樣式實作：獨立樣式表 (css/dark-theme.css)

2. 行為邏輯：偵測與持久化 (js/theme-switch.js)

3. WordPress 資源載入與防閃爍 (inc/scripts-styles.php)

4. 範本標籤與按鈕輸出 (inc/template-tags.php & Header Templates)

三、未來原作者升級主題時的處理策略

策略 A：建立子主題（Child Theme）—— 永遠不被覆蓋（推薦最佳實踐）

策略 B：利用 Git Patch 自動打補丁（零 Token 快速升級）

策略 C：低 Token 的精準 AI 提示詞（AI Prompt Template）

為什麼這個 Prompt 具備高性價比（Low Token Usage）？

CSP (Content Security Policy) 的網站要如何安全的使用 Inline script

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

工程師真心話

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

工程師真心話

總結防禦指南

網頁開發者必看！用白話秒懂 CSS Injection 與 CSP 防禦

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

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

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

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

結論

How to Use the :has() Selector in CSS

相關文章

tabulator 的寬度無法overflow:hidden

Left align and right align within div in Bootstrap

css selector tester online: jsoup

Bootstrap Tabs Example

1. 樣式實作：獨立樣式表 (`css/dark-theme.css`)

2. 行為邏輯：偵測與持久化 (`js/theme-switch.js`)

3. WordPress 資源載入與防閃爍 (`inc/scripts-styles.php`)

4. 範本標籤與按鈕輸出 (`inc/template-tags.php` & Header Templates)

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

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