網誌

JavaScript 視差效果總是看起來有點不對——有點脫節，好像圖層在頁面後面半幀漂浮。這不是草率的程式碼。這是因為捲動事件在瀏覽器已經繪製捲動之後才到達 JavaScript。瀏覽器曾經解決了這個問題——當它將粘性標頭變成 position: sticky 時。Scroll-driven animations 是同樣的手法，一次應用於所有捲動綁定的效果。

十年來，將縮圖動畫成英雄圖片只有一種技術：在前後測量元素，用 transform 偽造差異，然後播放。FLIP。每個動畫函式庫都這樣做，每個都在最糟糕的時候以主執行緒的 JavaScript 為代價。View Transitions API 將整個技巧轉移到瀏覽器——自 React 19.2 和 Next.js 16 起，整個合約只需要一個名為 name 的 prop。

一千則留言的清單渲染得很慢，於是你搬出 react-window——換來流暢的捲動，卻犧牲了 Ctrl+F、列印頁面，以及部分螢幕閱讀器導覽，因為視窗外的元素在 DOM 中已經不復存在。content-visibility 用另一種方式解決同一個問題：元素仍然留在 DOM 裡，瀏覽器只是暫時跳過為它們計算版面配置與繪製的昂貴工作，直到它們接近可視範圍為止——而且令人意外的是，當你在其中搜尋文字時，它還能暫時把它們顯露出來。

在無障礙設計那篇文章裡，一個用 display:none 隱藏、卻依然存在於可訪問性樹裡的 modal，正是從零開始用 div 手寫 modal 會出現的典型錯誤。真正該問的問題是：一開始為甚麼要從零開始做？本文探討原生 <dialog> 和 popover 屬性能免費送你甚麼——top layer、焦點陷阱、light dismiss——以及這兩個機制之間的分別大到甚麼程度，混用它們是通往不可訪問介面最簡單的一條路。

工具類 .mt-4 輸給了 .card .card__header .card__title 這條規則，儘管照道理它是後加上去的，應該要贏。這不是巧合——這正是 specificity 按照它原本的設計在運作。@layer 帶來了一條全新的判定優先次序的軸線，它在 specificity 之前起作用，而不是跟它一起運作——而且當中有一個陷阱違反直覺到連網上部分文件都會寫錯。

表單欄位要在內部 input 無效時變成紅色。聽起來很簡單——只是 CSS 在過去 25 年裡，從來沒辦法讓元素查詢自己內部發生的事，只能反過來做。本文探討 :has() 如何逆轉這個方向、它跟一般組合器有何不同，以及這種新能力在哪些地方真的會犧牲效能。