文章目錄
Safari 26 在 WWDC25 公布測試版時，更新清單很長。比起逐個記 API 名稱，我比較在意的是：平常做頁面那些不起眼的小麻煩，有沒有哪個終於可以少繞一點路？文字換行、頭像底下的選單，還有部落格的閱讀進度，這次都有能對上需求的更新。
最後一行不要只剩一個單字#
卡片簡介明明不長，最後一行卻孤零零留了一個英文單字，看起來就是有點不順。手動加換行也不是好辦法，桌機排漂亮了，換到手機又得重來。
Safari 26 beta 加入的 text-wrap: pretty，會讓瀏覽器調整文字斷行，盡量改善參差不齊的行尾，以及過短的最後一行。
.article p,
.card-description {
text-wrap: pretty;
}它不保證每段都變成理想的排版，但對文章內文、卡片簡介來說，這種不用改內容就能試的改善很方便。實際效果還是要放進自己的字型、文字和欄寬裡看。
點頭像，選單就出現在它下面#
帳號選單看起來很簡單：點一下右上角頭像，在下面顯示「個人資料」和「登出」。麻煩的是，頭像位置可能隨版面改變，選單又可能靠近畫面邊緣。
CSS Anchor Positioning 讓我們直接指定「這個選單以那個頭像為定位基準」。用 anchor-name 替頭像命名，再用 position-anchor 把選單接上去，就能描述它要放在哪一側；也可以設定空間不足時改試另一個位置，減少自己讀取座標和計算偏移的工作。
我覺得這比多一種炫目的特效更有吸引力。選單本來就該跟著按鈕，現在終於能把這個關係直接交給 CSS 表達。不過這裡處理的是位置，選單的開關和鍵盤操作仍要另外安排。
往下讀，頂端進度條跟著走#
長文章上方常有一條細細的閱讀進度：剛打開時是空的，往下滑就逐漸填滿。以前做這個效果，通常得監聽捲動，再用 JavaScript 算目前走了多少距離。
Scroll-driven Animations 可以把 CSS 動畫直接連到捲動位置。例如讓進度條從零寬逐漸填滿，並透過 animation-timeline: scroll(root)，讓動畫跟著整頁的捲動進度走。往上滑，進度也會退回去，不是開頁後自己播完的一段動畫。
如果文章後面還有留言區，整頁捲動進度就不等於文章閱讀進度，做的時候要先決定想表達哪一個。這個差別，比進度條要用什麼顏色更值得先想清楚。
三個裡面，我會先試文字換行，最容易直接拿現有頁面比較。選單定位和捲動動畫則等實際需求出現再接進來；目前是 Safari 26 測試版公布的支援，正式網站仍要顧到使用者正在用的瀏覽器版本。