顏色輸入：深入研究跨瀏覽器差異

本文探討了內部結構<input type="color">元素，突出顯示瀏覽器的不一致，並提供策略，以實現一致的跨瀏覽器渲染，並以最小的代碼渲染。了解這些不穩定對於確定跨瀏覽器兼容設計的可行性和實施至關重要。

在深入研究技術細節之前，讓我們解決一個關鍵的可訪問性問題：

可訪問性挑戰

顏色輸入的鍵盤導航在Firefox的Safari和Windows版本中提出了重大挑戰。在Windows上的Firefox中，雖然輸入可以通過選項卡進行焦點並輸入打開對話框，但對話框中的鍵盤導航是不可能的。存在解決方法（Alt Tab，然後是Alt Tab Back），但這遠非理想。野生動物園的處境甚至更糟。除非啟用配音，否則輸入通常是不關鍵的，即使那樣，對話框導航仍然有問題。向瀏覽器開發人員報告這些問題對於改善可訪問性至關重要。

檢查內部結構

訪問陰影dom<input type="color">根據瀏覽器需要不同的方法：

• Chrome：在“元素”>“首選項”下的DevTools設置中啟用“顯示用戶代理Shadow dom”。
• firefox：將devtools.inspector.showAllAnonymousContent設置為true in about:config 。
• 冠前邊緣：內部結構的直接造型似乎是不可能的。

特定於瀏覽器的結構

內部結構在瀏覽器之間差異很大。 Chrome顯示A。<div>包裝器（ <code>::-webkit-color-swatch-wrapper ）包含另一個<div>（ <code>::-webkit-color-swatch ）。 Firefox提出了一個未標記的<div>，可通過<code>::-moz-color-swatch訪問。奇物前的邊緣不允許訪問內部結構以進行樣式。

檢查瀏覽器樣式

分析瀏覽器樣式對於理解默認值至關重要。在Chrome和Firefox中，可以檢查用戶代理樣式表（需要在Firefox中明確啟用）。計算的樣式應始終與瀏覽器樣式一起檢查。 Firefox用戶還可以檢查view-source:resource://gre-resources/forms.css以了解表單元素樣式。

這<input>元素屬性

分析默認屬性值有助於確定哪些屬性需要明確的跨兄弟一致性定義。 box-sizing最初是Firefox中的border-box但在Chrome和Edge中的content-box 。 font-size始終為13.33px，而邊距則均勻地為0。邊界樣式和顏色在瀏覽器之間差異很大，而Firefox的行為受操作系統的變焦級別的影響。填充不一致也存在，Firefox由於流動式填充而顯示出意外的行為。尺寸（寬度和高度）也有所不同，反映了box-sizing和潛在的流動尺寸設置的差異。背景樣式還顯示出不一致之處，使用梯度和鉻和Firefox使用ButtonFace （呈現方式不同）。

處理不同的狀態

分析不同狀態的樣式（ :disabled ， :focus ， :hover ， :active ）揭示了進一步的不一致之處。 :disabled狀態在瀏覽器之間顯示出背景顏色的細微差異。 :focus行為差異很大，而Firefox和Edge取決於偽元素在DevTools中不一致的可見。 :hover和:active狀態在背景，邊框顏色和样式上表現出差異，通常受操作系統樣式影響。

造型色板包裝和色板

Chrome的Swatch包裝器（ ::-webkit-color-swatch-wrapper wrapper ）需要注意填充以保持一致性。色板本身（ ::-webkit-color-swatch和::-moz-color-swatch ）需要明確的box-sizing定義，並註意邊框樣式和顏色，以實現交叉瀏覽器的一致性。邊緣不允許其內部色板的樣式。

結論

實現一致的跨瀏覽器渲染<input type="color">需要仔細考慮默認樣式，陰影dom結構和瀏覽器特定的行為。明確定義各種狀態和屬性的樣式對於確保視覺一致性和可訪問性至關重要。鼓勵向瀏覽器供應商報告不一致之處，以提高跨瀏覽器的兼容性和可訪問性。提供的錯誤報告提供了協作和改進的途徑。