专栏名称: 前端早读课
我们关注前端,产品体验设计,更关注前端同行的成长。 每天清晨五点早读,四万+同行相伴成长。
目录
今天看啥  ›  专栏  ›  前端早读课

【第3395期】Chrome Canary 130 版本:可定制的select

前端早读课  · 公众号  · 前端  · 2024-10-18 08:00
    

主要观点总结

文章介绍了谷歌正在解决开发者长期以来对自定义表单控件元素的需求。新的可自定义选择元素已进入WHATWG的Stage 2阶段,并在Chrome Canary 130版本提供了原型。文章详细描述了如何使用新的可自定义选择API,包括使用CSS appearance属性启用新行为,自定义选择元素的各个部分,以及如何使用选项和内容模型。此外,还讨论了该功能的限制和可访问性注意事项。

关键观点总结

关键观点1: 自定义表单控件的需求和解决方案

多年来,表单控件的样式问题一直是开发者关注的重点。谷歌正在努力解决这一问题,并已实现可自定义选择元素的功能。

关键观点2: 新功能的阶段和原型

可定制的选择元素已进入WHATWG的Stage 2阶段,并在Chrome Canary 130版本提供了原型,供用户测试。

关键观点3: 如何使用新的可自定义选择API

使用CSS appearance属性启用新行为,自定义选择元素的各个部分,包括按钮、选择器弹出框、选项等。

关键观点4: 内容的模型和示例

介绍了选择器的组成部分示意图,以及如何使用选项和内容模型来自定义选择框的内容。

关键观点5: 限制和可访问性说明

介绍了使用新功能的限制和可访问性注意事项,包括不允许在select内包含任何交互式元素,以及正在寻找可访问的解决方案等。


文章预览

前言 谷歌正在努力解决开发者长期以来对于自定义表单控件元素 的需求。该功能已进入 WHATWG 的第二阶段,并在 Chrome Canary 130 版本中提供了原型。今日前端早读课文章由 @排骨翻译分享。 译文从这开始~~ 多年来,像   这样的表单控件的样式问题一直被开发者视为主要的困扰点,我们一直在寻找解决方案。虽然这项工作复杂且耗时较长,但我们已经非常接近实现这一功能。可定制的   元素已正式进入 WHATWG 的 Stage 2 阶段,并受到了跨浏览器的广泛关注,Chrome Canary 130 中还提供了一个可供测试的原型。 请确保您的 Chrome Canary 版本已更新至 130,并且启用了实验性 Web 平台功能标志。您可以通过在地址栏中输入 chrome://flags,然后开启 #experimental-web-platform-features  来启用此标志。然后,您应该能够查看本文中的 Codepen 示例。或者,您可以查看这个 Cod ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览