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

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

可訪(fǎng)問(wèn)性挑戰(zhàn)

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

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

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

• Chrome：在“元素”>“首選項(xiàng)”下的DevTools設(shè)置中啟用“顯示用戶(hù)代理Shadow dom”。
• firefox：將devtools.inspector.showAllAnonymousContent設(shè)置為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 ）包含另一個(gè)<div>（ <code>::-webkit-color-swatch ）。 Firefox提出了一個(gè)未標(biāo)記的<div>，可通過(guò)<code>::-moz-color-swatch訪(fǎng)問(wèn)。奇物前的邊緣不允許訪(fǎng)問(wèn)內(nèi)部結(jié)構(gòu)以進(jìn)行樣式。

檢查瀏覽器樣式

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

這<input>元素屬性

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

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

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

造型色板包裝和色板

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

結(jié)論

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