以前如果說 CSS 是「程式碼」的話，通常都會被糾正為「原始碼」，但在 @function 等功能性的語法出現之後，現在這個傳統界線也越來越模糊。 本文將透過之前提過的 if() 和 sibling-index()、sibling-count() 語法，帶大家體驗 @function 的強大功能。 1. 結合 attr() 與型別定義的狀態樣式 過去我們使用 attr() 取值時，通常只能用於 content 屬性，且無法參與運算或邏輯判斷。新的語法允許我們指定型別 type(<custom-ident>) ，這讓 HTML 的屬性值可以被 CSS 的 if() 邏輯正確識別。 在這個範例中，我們定義了一個 --status-color 函數，它接收一個狀態參數，並根據傳入的值決定回傳的顏色。你可以注意到，它和 JavaScript 一樣可以設定變數的預設值： @function --status-color(--status: xxx, --success: #7dfaa5, --error: #ff3874) { result: if( style(--status: success): var(--success); style(--status: error): var(--error); else: #fccd81 ); } .card { /* 使用 attr() 抓取 HTML 的 data-status，並強制轉型為 custom-ident */ background-color: --status-color(attr(data-status type(<custom-ident>))); } 跟 JavaScript 不同的地方在於，JS 是用 return 拋出結果，CSS 則是用 result: 。 這樣的寫法讓我們可以直接在 HTML 中控制語意，而樣式的邏輯完全封裝在 CSS 函數內： <div class="card" data-status="error">error</div> <div class="card" data-status=...

許多行銷人員都會依賴 GTM 插入 Facebook Pixel 的程式碼，但你是否有想過，當一個網站上出現多個 Pixel ID 的時候，一直 init（重新宣告）Pixel ID、直接觸發事件、整段程式碼貼上，會重複追蹤事件（一直Add to Cart）、覆蓋變數影響其它 Pixel ID……等問題，最終除了讓網頁效能降低外，收集到的數據也不準確。 曾經經手過一個充滿好幾個 meta pixel 和 bing uet 的網站，單純把 GTM 拿掉，效能就可以提升超過40分。 自訂事件一般寫法 許多行銷人員會在 GTM 中使用「自訂 HTML」直接貼上像這樣的程式碼來達成他想要的自訂事件： <script> !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '1234567890'); fbq('trackCustom', '自訂事件名稱', { '額外要傳送的數據Object': 999 }); </script> 但他完全沒有考慮可能會發生的問題： https://connect.facebook.net/en_US/fbevents.js 是否已經載入過了。（ 這個其實官方程式碼已經處理： if(f.fbq)return; ） Pixel ID 是否已經宣告...