最新消息:关注人工智能 AI赋能新媒体运营

Chrome新HTML属性简化互动功能开发,强化跨平台相容性

科技智能 admin 浏览 评论

範例显示透过command与commandfor属性,直接在HTML元素间建立互动关联,让按钮操作对话框开启与关闭

Google在Chrome 135版本中加入两项HTML新属性,分别是command与commandfor,目的是要以宣告的方式简化网页互动功能的开发流程。这两项属性可直接应用在按钮等元件上,开发人员无需撰写额外的JavaScript程序码,就能简单实作如弹出视窗或对话框等互动行为,并同时兼顾无障碍设计需求。

新属性的推行,将有望取代过去使用popovertarget与popovertargetaction属性的旧做法,若能获得其他主流浏览器与开发者的普遍採用,将可进一步减少开发複杂性与提升跨平台一致性。

过去,开发人员要处理网页上按钮与其他元件之间的互动,常需使用JavaScript监听事件,例如click或toggle,并自行维护元件状态以及无障碍辅助属性,导致程序码複杂且维护成本增加。虽然如React、Svelte或AlpineJS等前端框架已透过封装元件与状态管理,提供更好的使用体验,但这也让开发者必须依赖框架,降低了跨平台或跨框架的可移植性。

Command与commandfor这两个新属性,能藉由原生HTML方式直接建立按钮与目标元件间的互动关联,例如按钮可使用commandfor指定目标元件的ID,再以command属性指定要执行的动作,像是show-popover、toggle-popover或show-modal等,让浏览器本身管理互动的流程,不仅程序码量大幅减少,也确保了跨浏览器相容性与更好的无障碍支援。

除此之外,Chrome 135还允许开发者自订command,透过前缀「--」来指定非内建的自定义互动行为,提供开发人员足够的弹性,以因应不同应用场景需求。即使在使用影子DOM架构下,也能透过JavaScript API设定元素之间的互动关联,克服过去影子DOM元件互动困难的限制。

Chrome的这些更新逐步降低网页元件互动的複杂性,让原生HTML的表达能力更丰富且标準化程度更高,降低前端开发的门槛与成本。未来这项技术可能拓展至其他互动需求,例如影音播放控制、输入元件的弹出选单或元素文字複製等,推动更广泛的网页互动功能标準化。

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)
  • 验证码 点击我更换图片

网友最新评论