開發者工具 · HTML WYSIWYG 編輯器
為什麼 HTML 中的“所見”並不完全是“所得到”
· 背景
html CSS 內容可編輯
解釋了 WYSIWYG 只能近似網路上最終結果的結構原因，因為 HTML 描述結構，而 CSS、裝置和客戶端決定外觀，以及由此產生的 WYSIWYM 想法。
在編輯器中完美，在頁面上錯誤 - 打開時出現熟悉的不匹配
通知在 ToolAcre 內看起來很平衡，但在進入網站後看起來很擁擠，因為相同的元素滿足不同的樣式表。本地 iframe 是一個具有自己的字體、行高、填充和淺色方案的文檔。這是一個檢查視圖，而不是每個目的地的螢幕截圖。
WYSIWYG 在網路上具有有限的意義。編輯器可以準確地顯示其當前的渲染上下文，但稍後「您得到的」包括宿主 CSS、容器寬度、瀏覽器設定和繪圖期間不存在的內容轉換。
HTML 描述結構，而不是外觀 — 解釋了相同的標記在不同的樣式表下呈現不同的效果
HTML 主要記錄結構與關係：標題、段落、清單、引文、強調、程式碼和連結。當使用者代理預設值和作者風格解釋這些元素時，外觀就會出現。 ToolAcre 刪除了內聯樣式和類別屬性，從而加強了其複製片段中的分離。
相同的 h2 在預設頁面中可以很大，在申請卡中可以很緊湊，並在列印時可以重新設計。即使尺寸發生變化，它的作用仍然是一個標題。作者在決定預覽是否具有所需的排版之前應判斷結構是否正確。
使用者代理程式樣式表和級聯 - 涵蓋預設瀏覽器樣式以及網站 CSS 如何覆蓋編輯器預覽顯示的內容
瀏覽器從元素的使用者代理規則開始，然後透過級聯應用頁面樣式和使用者首選項。 ToolAcre 的預覽檔案新增了自己的小樣式表。它不會匯入主機網站的設計令牌或未來的 CMS 主題。
當複製的標記進入另一個頁面時，其頁邊距、清單縮排、連結顏色和標題比例都會改變。解決方案不是將臨時預覽樣式烘焙到片段中，因為該編輯器無論如何都會刪除它們。在目的地應用經過審查的簡報並在那裡進行測試。
裝置、暗模式和電子郵件用戶端 - 描述片段將遇到的許多渲染上下文
裝置會改變可用寬度、字體規格和使用者縮放。深色模式主題可以改變顏色，而 ToolAcre 有意將其預覽固定到淺色檔案。電子郵件用戶端施加了另一組 HTML 和 CSS 約束，此頁面既不模擬也不驗證這些約束。
沒有儲存庫來源提供瀏覽器或郵件用戶端相容性矩陣，因此本文定性地命名維度，而不是承諾通用行為。響應式和電子郵件宣告需要在實際支援環境中進行測試。一個沙盒 iframe 無法取代這項證據。
WYSIWYM：所見即所得 — 介紹由 LyX 等工具普及的結構編輯哲學
結構編輯思考會詢問內容的意義，而不是繪圖表面是否與端點完全相同。標題層級表示層次結構，清單表示分組，強表示重要性，連結表示目的地。然後 CSS 在上下文中以視覺方式傳達這些含義。
工作簿將此稱為 WYSIWYM 並命名為 LyX，但此處沒有可用的歷史來源。這個概念可以在不指定起源或產品行為的情況下進行解釋：首先創作語義意圖，然後預覽和調整內容實際存在的呈現方式。
工作範例：三個上下文中的一個片段 — 在預設樣式表、網站主題和電子郵件預覽下顯示相同的標記
使用 h2、p、strong、ul 和公共連結建立一個片段。打開下載的檔案以查看 ToolAcre 的輕型包裝器，將複製的片段貼上到主題測試頁中，並將改編後的副本放置在批准的電子郵件預覽中。保持措辭相同。
這三個視圖可能會有所不同，因為它們的風格和客戶端規則不同，但來源結構可以保持可比較。如果電子郵件需要表格或內嵌演示，則需要單獨翻譯； ToolAcre 刪除了表格和樣式，而不是假裝其瀏覽器預覽已驗證收件匣。
這不包括什麼 - CSS 偵錯或配置編輯器以載入網站樣式
本文不會除錯 CSS 特異性、使用網站樣式設定編輯器或驗證電子郵件標記。它還沒有聲稱複製的輸出對於任意不受信任的發布是安全的。該消毒劑是一個狹窄的編輯器許可名單，具有記錄的解析器差異風險。
預覽沙箱會停止 ToolAcre 內的腳本、表單和同源存取。複製的 HTML 會離開該沙箱。使用目的地端衛生、適當的 CSP、回應測試和可及性檢查。視覺不匹配和安全性是不同的問題，即使兩者在發布後變得可見。
重點：編輯意義，驗證標記 - 總結方法以及 ToolAcre 的 HTML WYSIWYG 編輯器如何讓您專注於實際移交的標記
在追求視覺奇偶校驗之前編輯意義並驗證標記。 ToolAcre 使語意片段和本地渲染並排可用，這有助於識別不匹配是來自結構還是來自目標呈現。
然後將審查的片段移至代表性上下文中並在那裡測量結果。良好的工作流程會預期差異，記錄有意的調整，並避免聲稱一個編輯器視圖可以預測每個瀏覽器、裝置、主題或收件匣。