本文探討了內(nèi)部結(jié)構(gòu)<input type="color">元素，突出顯示瀏覽器的不一致，并提供策略，以實現(xiàn)一致的跨瀏覽器渲染，并以最小的代碼渲染。了解這些不穩(wěn)定對于確定跨瀏覽器兼容設計的可行性和實施至關(guān)重要。

在深入研究技術(shù)細節(jié)之前，讓我們解決一個關(guān)鍵的可訪問性問題：

可訪問性挑戰(zhàn)

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

檢查內(nèi)部結(jié)構(gòu)

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

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

特定于瀏覽器的結(jié)構(gòu)

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

檢查瀏覽器樣式

分析瀏覽器樣式對于理解默認值至關(guān)重要。在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的行為受操作系統(tǒng)的變焦級別的影響。填充不一致也存在，F(xiàn)irefox由于流動式填充而顯示出意外的行為。尺寸（寬度和高度）也有所不同，反映了box-sizing和潛在的流動尺寸設置的差異。背景樣式還顯示出不一致之處，使用梯度和鉻和Firefox使用ButtonFace （呈現(xiàn)方式不同）。

處理不同的狀態(tài)

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

造型色板包裝和色板

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

結(jié)論

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