写点什么

谷歌的“Web UI 新功能”演讲:更少的自定义组件 JavaScript,更多的 Web 标准

  • 2025-06-10
    北京
  • 本文字数:1373 字

    阅读完需:约 5 分钟

大小:533.50K时长:03:02
谷歌的“Web UI新功能”演讲:更少的自定义组件JavaScript,更多的Web标准

Una Kravets最近在一次演讲中介绍了Chrome团队支持的Web UI的最新发展。一些目前需要大量 JavaScript 的常见 UI 模式可能,很快就会以声明式的方式实现,使用 HTML 和 CSS 的新特性,使用更少的自定义 JavaScript,并内置无障碍功能。

 

演讲重点介绍了三种特别棘手的 UI 模式:可定制的选择菜单、轮播图和悬停卡片。所有这三种 UI 模式在设计系统中都很常见,需要许多 JavaScript 代码来实现自定义样式、呈现、布局、交互或无障碍模式。随着浏览器供应商发展网络标准,将这些模式从用户层纳入到了浏览器本身,开发人员在未来可能需要做的工作更少了,只需依赖平台。更少的自定义 JavaScript 也有利于用户提高性能。提议的声明式 API 已经包含在至少一个稳定的浏览器引擎中了。

 

首先讨论的模式是可定制的选择菜单。原生 <select> 元素的内部结构历来很难在不同浏览器中一致地进行样式定制

 

开发人员在尝试使用浏览器内置表单控件( <select> 和各种 <input> 类型)时,一个常见的挫折是他们无法自定义这些控件的外观以适应他们网站的设计或用户体验。在一项关于表单控件和组件的Web开发人员调查中,开发人员重写这些控件版本的主要原因是无法充分自定义原生控件的外观。

 

可定制选择菜单的构建块是Popover API锚点定位

 

Popover API 处理浮动选项列表,确保它出现在其他 UI 元素之上,易于关闭,并管理焦点。Popover 已达到基线状态,现在在所有浏览器中都可用

 

命令调用者Commandcommandfor 属性)提供了一个类似于 popovertarget 的声明式 HTML 解决方案,用于将按钮点击连接到操作(例如,打开对话框),减少了样板 JavaScript 的需求。

 

锚点定位(Anchor Positioning)是一个 CSS API,允许开发人员将元素相对于其他元素(称为锚点)进行定位。这个 API 简化了许多界面特性(如菜单和子菜单、工具提示、选择、标签、卡片、设置对话框等)的复杂布局需求。锚点定位是Interop 2025的一部分,这意味着它将在今年年底出现在所有浏览器中。

 

改进的 select 元素结构展示了两个部分,一个按钮和一个锚定在该按钮上的弹窗,它们都有相应的选择器用于定位和设置样式:



可以通过选择器 ::picker(select) 为弹出窗口应用样式。一个自定义样式的例子如下所示:

 

/*进入自定义模式*/select,::picker(select) {  appearance: base-select;}

/*设置按钮的样式*/::select-fallback-button { background: gold; font-family: fantasy; font-size: 1.2rem;}

/*设置下拉菜单中选择器的样式*/::picker(select) { border-radius: 1rem;}

/*设置选项的样式*/option { font-family: monospace; padding: 0.5rem 1rem 0.5rem 0; font-size: 1.2rem;}

/*下拉列表中选中项的样式*/option:checked { background: powderblue;}

/*设置鼠标悬停或焦点时的选项样式*/option:hover,option:focus-visible { background-color: pink;}

/*设置当前选项指示符的样式*/option::before { content: ''; font-size: 80%; margin: 0.5rem;}

/*类推*/body { padding: 2rem;}
复制代码

 

鼓励开发人员查看完整的演讲以获取更多的技术细节、演示和解释。这次演讲还解释了CSS Overflow 5规范中的新特性,即滚动按钮和滚动标记,是如何在纯CSS中实现滚动驱动动画(例如轮播图)的。

 

原文链接:

https://www.infoq.com/news/2025/06/new-web-ui-standard-2025/

2025-06-10 16:004413

评论

发布
暂无评论

超全!GitHub星标6500的Python入门教程大全,太强了!

我再BUG界嘎嘎乱杀

Python 后端 入门 开发语言 零基础

2024年第二届服务韧性工程(SRE)论坛成功举办

雅菲奥朗

人工智能 大数据 运维 SRE 运维开发

2024第二届服务韧性工程(SRE)论坛分会场“人工智能驱动运维研发革命”成功举办

雅菲奥朗

人工智能 运维 大模型

Python中的7种基础数据类型,看这4500字就够了!

我再BUG界嘎嘎乱杀

Python 后端 基础 数据类型 开发语言

PostgreSQL 如何解决数据迁移过程中的数据类型不匹配问题?

程序员墨松

数据库 postgresql

IoTDB 社区出品|CommunityOverCode Asia 2024 专题介绍之 IoT

Apache IoTDB

IoTDB 社区出品|CommunityOverCode Asia 2024 专题介绍之 IoT

Apache IoTDB

英伟达开源 RTX Remix 技术,用 AI 重制经典游戏;Luma 发布首尾帧功能可快速补全视频丨 RTE 开发者日报

声网

淘宝天猫商品评论API接口:用户反馈实时分析,驱动电商增长

技术冰糖葫芦

API Explorer API 调试 API 文档 API 协议

通过引入火山引擎“数据飞轮”,头部美图类APP找到下一个增长点

新消费日报

数据库容灾 | MySQL MGR与阿里云PolarDB-X Paxos的深度对比

阿里云数据库开源

融云入驻首个数字生态出海基地,加速构建数字经济出海创新生态

融云 RongCloud

前后端数据传输约定探讨

京东科技开发者

使用mybatis切片实现数据权限控制

京东科技开发者

数字化时代的数据管理:多样化数据库选型指南

京东科技开发者

一文读懂!10款办公必备的AI合成PPT软件盘点!

彭宏豪95

人工智能 在线白板 办公软件 AIGC AI生成PPT

半小时速通Python爬虫!GitHub开源的Python爬虫入门教程

我再BUG界嘎嘎乱杀

Python 爬虫 入门 开发语言 零基础

企业智能之旅(1): 建立智能企业的战略蓝图并付诸行动

亚马逊云科技 (Amazon Web Services)

亚马逊云科技 生成式AI

企业智能之路(2): 着手进行企业智能的技术准备和实践

亚马逊云科技 (Amazon Web Services)

亚马逊云科技 生成式AI

2024第二届服务韧性工程(SRE)论坛分会场“SRE助力出海企业构建健壮的IT生态系统”成功举办

雅菲奥朗

人工智能 运维 SRE 混沌工程 运维开发

谷歌的“Web UI新功能”演讲:更少的自定义组件JavaScript,更多的Web标准_软件工程_Bruno Couriol_InfoQ精选文章