發布日期：2026 年 11 月 11 日
本週，我們發布了 Modern Web Guidance 1.0 版，這是一組技能，可將網頁平台專業知識、最佳做法和瀏覽器相容性資料，直接嵌入程式設計代理。Modern Web Guidance 的目標是協助使用 AI 程式設計代理的開發人員，充分發揮現代網路平台的強大功能，最終提升使用者的網路體驗。
自 5 月推出 Modern Web Guidance 早期預先發布版 以來，程式設計代理的效能不斷提升，許多令人驚豔的全新前沿模型也陸續問世。我們最常聽到的問題之一是：這些新的前沿模型難道不符合網頁程式開發最佳做法嗎？
很遺憾，答案是「不會」，而我們之所以知道答案是「不會」，是因為我們測試過。
Modern Web Guidance 的每份指南都定義了一組預期，如果正確遵循指南中的最佳做法，這些預期就必須成立。接著，評估套件會測試這些指南，方法是向安裝 Modern Web Guidance 的代理 (引導式代理) 和未安裝 Modern Web Guidance 的代理 (非引導式代理) 提供相同的提示。系統會根據指南定義的預期結果，檢查兩次執行的輸出內容。
比較有引導和無引導的通過率，可以發現 AI 模型 (即使是最新、最先進的模型) 無法可靠地自行遵循現代網頁開發最佳做法。
平均而言，未經引導的程式設計代理在評估套件中，只能通過約 50% 的檢查，而使用 Modern Web Guidance 的代理則能通過約 90%。
您可以查看評估資訊主頁，瞭解我們針對每項指南執行的具體檢查項目完整清單，以及各模型的評分。
不過，為了提供高階總覽，本文將介紹 AI 模型在網頁程式開發人員日常工作中最可能遇到的關鍵領域 (例如無障礙功能、使用者體驗、效能和安全性) 中，最常出錯的 10 個領域。
1. 無障礙功能：鍵盤焦點和 inert 管理
對於使用鍵盤或螢幕閱讀器瀏覽的使用者來說，可預測的焦點順序是互動式 UI 的可用性關鍵。否則焦點可能會移至隱藏的背景內容，或卡在數十個額外的定位點。
在我們的評估中，焦點和inert管理是無障礙功能最大的落差之一，也是 Modern Web Guidance 改善最多的領域之一。最常見的錯誤包括：
- 未將焦點移至新開啟的檢視畫面，且返回時忘記將焦點還原至觸發元素。
- 在自訂互動視窗上，依賴手動 JavaScript 分頁陷阱和
aria-modal="true"，而不是使用互動視窗<dialog>或標記背景內容inert。 - 將工具列或方向格線中的每個項目公開為獨立定位點，而不是使用單一定位點搭配漫遊
tabindex。 - 建立自訂
:focus-visible輪廓，但與相鄰背景的對比度未達 3:1。
2. 無障礙功能：支援減少動態效果
非預期的頁面移動和大型動畫不僅會干擾使用者，對於前庭功能障礙或動暈症患者，還可能引發頭暈、噁心或頭痛。
AI 模型在新增標準 CSS 轉場效果或主要畫面格動畫時，通常會記得檢查 prefers-reduced-motion。不過，使用順暢捲動、檢視畫面轉換或捲動驅動動畫等新功能時，他們往往會忘記減少動態效果，或在實作時出錯：
- 在根元素上全域且無條件設定
scroll-behavior:smooth。 - 使用捲動式 CSS 動畫，但未檢查是否減少動態效果。
- 移除輪轉介面項目的
transition持續時間，以便在捲動時減少動態效果，但忘記移除轉換屬性，導致項目在捲動時大小跳動。 - 在啟用減少動態效果時，對
*、*::before和*::after套用全面的0.01ms持續時間重設，同時清除所有必要的非動態轉場效果 (用於傳達 UI 狀態變更)。 - 無條件啟用跨文件檢視畫面轉換，並在啟用減少動態效果時覆寫
::view-transition-*動畫，而不是只在減少動態效果檢查後限制@view-transition規則。
3. 無障礙功能：表單驗證、格式提示和自動填入狀態
表單是網路上大多數關鍵使用者歷程的基石。結帳表單中的小問題可能會對商家的收益造成重大影響。
建立表單時，AI 模型能正確處理許多基本事項。不過，他們往往會忽略一些微小但重要的細節，例如驗證錯誤、預留位置和格式提示的適當位置，以及正確整合密碼管理工具和自動填入功能：
- 使用自訂 JavaScript
blur驗證重新導入 CSS:user-invalid，這通常會在使用者透過 Tab 鍵跳過未觸碰的required欄位時，立即標記這些欄位。 - 讓
aria-invalid與可見錯誤不同步，例如在blur上過早設定aria-invalid="true"，或在 CSS 中設定:user-invalid樣式，但未在 JavaScript 中同步aria-invalid。 - 依賴消失的
placeholder文字顯示必要格式 (例如卡片到期日輸入欄位上的MM/YY)，而不是顯示與aria-describedby連結的永久提示。 - 將格式提示和密碼規則放在
<input>下方 (而非上方)，使用者需要閱讀時，可能會被行動鍵盤和自動填入彈出式視窗遮住。 - 醒目顯示
:autofill輸入內容時，只變更邊框顏色，而非搭配不會改變版面配置的非顏色提示 (例如內嵌box-shadow)。
4. 使用者體驗：滑動和觸控手勢
代理擅長使用指令式 JavaScript 實作觸控手勢，以及編寫自訂物理邏輯。這些導入方式雖然可行，但 JavaScript 驅動的觸控互動，流暢度通常不如使用者對原生應用程式的預期。
許多這類互動都可以透過 CSS 和原生捲動 API 實作，讓瀏覽器在主執行緒外執行手勢物理。然而，在我們的評估中，AI 模型經常忽略這些特徵：
- 使用
pointermove或touchmove事件監聽器，實作滑動關閉或滑動顯示手勢，而非使用 CSS 捲動貼齊。 - 在分頁滑動介面上省略
overscroll-behavior-x:none，可能會在過度滑動時意外觸發瀏覽器返回或向前瀏覽。 - 在 JavaScript 回呼的主執行緒上，驅動滑動進度效果，而非使用捲動驅動動畫。
- 不支援在捲動式滑動操作面板上使用鍵盤焦點。
5. 使用者體驗：對話方塊、彈出式視窗和頂層轉場效果
在我們的評估中，模型在為互動式對話方塊和彈出式視窗加上動畫、關閉或捲動時，通常會改用 JavaScript 指令式解決方法。
代理程式通常會手動建立進入和離開狀態機、歷史記錄掛鉤和主體捲動鎖定，而不是依賴專為頂層疊加層建構的新式 HTML 和 CSS 功能，這些功能較難維護，且容易出現細微的 UI 錯誤。
如果能妥善處理這些互動，就能將不穩定的體驗轉化為使用者信任的精緻體驗。以下是我們最常看到的錯誤：
- 建構自訂
position:fixed疊加層，並手動點擊外部處理常式，以便輕觸關閉，而非僅使用popover。 - 透過切換 CSS 轉場類別，並與
requestAnimationFrame()和transitionend事件監聽器 (搭配setTimeout()備用事件監聽器) 協調，建立進入和退出動畫，而不是使用@starting-style和transition-behavior在純 CSS 中建立。 - 在
<html>上設定overflow:hidden，鎖定開啟的互動視窗後方的頁面捲動，而不是使用<dialog>元素來包含過度捲動。 - 新增
popstate事件監聽器，偵測 Android 返回手勢並關閉開啟的互動視窗，而非使用互動視窗<dialog>元素的原生返回按鈕關閉功能。
6. 使用者體驗：深色模式和主題自動調整控制項
使用者啟用深色模式是為了減少眼睛疲勞和眩光，因此載入網頁時出現明亮的白色閃光、未套用主題的表單控制項，或切換鈕與 OS 偏好設定不同步，都會立即破壞使用者體驗。
深色模式切換功能看似簡單，但在我們的評估中，未經引導的模型總是會遺漏關鍵的平台細節，導致無法正確切換主題和原生表單控制項：
<head>中缺少<meta name="color-scheme" content="light dark">，導致深色模式使用者在載入外部樣式表時，會看到白色畫布閃爍。- 使用自訂顏色設定深色主題或深色介面元件的樣式，但未設定
color-scheme，導致原生捲軸和表單控制項停留在淺色模式。 - 定義主題自動調整顏色權杖時，忽略 CSS
light-dark()函式，該權杖會自動遵循有效的color-scheme。 - 僅提供二進位淺色或深色切換鈕，在
localStorage中設定明確覆寫，但無法返回 OS 預設值。 - 忘記新增
storage事件監聽器，導致使用者變更主題時，其他開啟的分頁未同步。
7. 效能：執行階段的回應速度和流暢度
使用者大部分時間都花在載入完成的網頁上，因此互動遲緩、轉場不順暢，對使用者體驗的影響不亞於初始載入速度緩慢。
在我們的評估中，模型通常會遵循 Lighthouse 等工具多年來推廣的經典載入時間最佳做法，而且通常知道要將明顯繁重的迴圈卸載至 Web Worker。他們一直難以解決的問題是主執行緒回應能力，這對最佳化 INP 至關重要：隔離版面配置工作、依優先順序排定工作，以及利用新的 HTML 和 CSS 功能，在主執行緒外執行算繪工作。
舉例來說，我們經常看到代理商：
- 為背景或低優先順序工作推出自訂
setTimeout()佇列，而不是使用scheduler.postTask()優先處理使用者可見的工作，或在瀏覽器支援時利用scheduler.yield()繼續執行工作。 - 建構複雜的版面配置 (例如密集資料格線) 時，未套用
content-visibility:auto和contain-intrinsic-size，導致使用者互動後觸發全頁重排。 - 使用
display:none隱藏 (或刪除) 非作用中的 SPA 檢視畫面，而非使用content-visibility:hidden(搭配inert)。前者會刪除快取的轉譯狀態，因此切換回時會觸發完整的版面配置和繪製。 - 使用 Intersection Observer 回呼暫停畫面外的
<canvas>動畫和背景循環，而不是將content-visibility:auto與contentvisibilityautostatechange事件配對 (如有)，導致元素捲動至檢視畫面之前，錯過瀏覽器的預先算繪邊界。 - 使用
scroll事件監聽器建構捲動預設用途 UI 提示，強制持續計算版面配置，而非在可用時使用 CSS 捲動狀態查詢 (搭配 Intersection Observer 備用方案)。
8. 效能：版面配置偏移和視覺閃爍
非預期的版面配置位移會干擾讀者注意力，並可能導致使用者點選非預期的按鈕，有時甚至會造成無法挽回的後果！
模型確實會可靠地將 width 和 height 屬性新增至標準 <img> 元素，防止版面配置位移，但一律會遺漏其他常見的版面配置位移來源，以及 <video> 元素、網頁字型切換、行動瀏覽器工具列和用戶端實驗的預先繪製閃爍，這些都會影響 CLS。
- 省略
<video>元素上的明確width和height屬性 (因此未載入的播放器預設為300×150，並在載入中繼資料後轉移版面配置)，或設定媒體包裝函式元素樣式，而非直接在媒體元素上設定aspect-ratio和object-fit。 - 將網頁字型與系統備用字型配對，但沒有
font-size-adjust，導致網頁字型切換時，段落和標題明顯重新排列。 - 使用靜態
vh單位 (而非動態或小型可視區域單位dvh、svh) 調整主頁橫幅區塊和全螢幕版面配置的大小，導致內容在行動瀏覽器工具列展開和收合時跳動。 - 使用舊版
opacity:0或visibility:hidden防網頁閃爍程式碼片段和多秒逾時，隱藏用戶端 A/B 測試的內容 (延遲 LCP 並讓隱形元素可供點選)，而非在可用時使用含有blocking="render"的指令碼。 - 在剖析重要的不需捲動位置標記前，觸發跨文件檢視畫面轉場效果，而非使用
rel="expect"和blocking="render"保留首次轉譯，導致剖析到一半的元素在轉場期間彈出。
9. 安全性：DOM XSS 防禦和 HTML 清理
只要有一個跨網站指令碼攻擊 (XSS) 漏洞，攻擊者就能在使用者瀏覽器中執行任意程式碼，竊取工作階段資料或代表使用者執行動作。因此，瀏覽器強制執行的防禦措施 (例如安全的 HTML 清理、可信任類型和嚴格的 CSP) 非常重要。
模型很少主動解決這些安全疑慮。舉例來說，在完整評估套件的所有任務中，模型不會在沒有明確提示的情況下，新增內容安全政策 (CSP) 或已跨來源隔離標頭。
即使提示直接要求安全性，未經引導的模型仍有超過一半的安全檢查失敗，導致脆弱的自訂備用方案或不完整的政策。防範 DOM XSS 時，這點會更明顯：
- 在原生清理功能無法使用時，編寫手動
DOMParser許可清單清理工具 (做為setHTML()備用方案或在可信任類型政策中)，而不是使用 DOMPurify 等經過審查的程式庫。 - 每次載入網頁時都急著繫結 DOMPurify，而不是在支援時使用原生
setHTML()，並僅在備用時延遲載入 DOMPurify。 - 註冊寬鬆的
(input) => input傳遞信任類型政策，破壞接收端強制執行。 - 在靜態網頁上搭配使用 Trusted Types 和主機許可清單
script-src 'self'CSP，而不是使用 SHA-256 雜湊鎖定內嵌指令碼。 - 設定以 Nonce 為基礎的
script-src內容安全政策時，省略'strict-dynamic'和'report-sample'。
10. 安全性：密碼金鑰登入、重新驗證和憑證生命週期
密碼金鑰可提升使用者安全性，並提高企業的登入轉換率，但實作密碼金鑰 (即使有代理程式協助) 仍是一大挑戰。
WebAuthn 具有特定的序列化、功能偵測和信號 API，在我們的評估中，未經引導的模型幾乎完全忽略了這些 API。如果要求 AI 模型新增密碼金鑰登入、管理或升級重新驗證功能，AI 模型通常會編寫手動位元組編碼輔助程式、略過管理 UI 的功能檢查，或未將憑證與密碼管理工具同步：
- 手動建立
atob()和btoa()Base64URL 轉換輔助程式 (做為主要路徑或備用樣板)，而非依賴內建的序列化方法，例如parseCreationOptionsFromJSON()、parseRequestOptionsFromJSON()和credential.toJSON()。 - 伺服器回報不明憑證 ID 時，登入期間會省略
PublicKeyCredential.signalUnknownCredential()，並將已刪除或撤銷的密碼金鑰留在使用者的密碼管理工具中。 - 略過
PublicKeyCredential.getClientCapabilities()，然後轉譯密碼金鑰建立和管理 UI。 - 啟動升級密碼金鑰重新驗證要求時，省略
AbortController和AbortSignal。 - 傳遞來源試用
mediation:"immediate"選項，而非uiMode:"immediate"，以簡化登入提示。
填補這些落差
這 10 個領域並非詳盡清單，我們預期具體的知識落差會隨著時間而改變。模型會迎頭趕上，網路平台也會持續演進。
好消息是，Modern Web Guidance 解決了所有這些落差，並會隨著平台持續演進。
如要開始使用 Modern Web Guidance，請執行下列指令，或在代理的外掛程式市集搜尋：
npx modern-web-guidance@latest install
你是否看過模型在其他網頁開發工作中出錯？我們希望您能舉發。在 Modern Web Guidance GitHub 存放區提出問題，或參與專案，協助其他開發人員解決這些問題。