颜色输入：深入研究跨浏览器差异

本文探讨了内部结构<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 ）需要注意填充以保持一致性。色板本身（ ::-webkit-color-swatch和::-moz-color-swatch ）需要明确的box-sizing定义，并注意边框样式和颜色，以实现交叉浏览器的一致性。边缘不允许其内部色板的样式。

结论

实现一致的跨浏览器渲染<input type="color">需要仔细考虑默认样式，阴影dom结构和浏览器特定的行为。明确定义各种状态和属性的样式对于确保视觉一致性和可访问性至关重要。鼓励向浏览器供应商报告不一致之处，以提高跨浏览器的兼容性和可访问性。提供的错误报告提供了协作和改进的途径。