以下是您有必要知道的信息:
- 现在,您可以使用
import
语句加载 CSS 样式表,就像加载 JavaScript 模块一样。 - 安装的 PWA 可以注册为网址处理程序,以便用户直接跳转到您的 PWA。
- 我们已根据您的反馈更新了 Multi-Screen Window Placement API,并开始第二次源试用。
- PWA 峰会将于 10 月 6 日至 7 日举行。
- 还有许多更多内容。
我是 Pete LePage,在家工作和拍摄。接下来,我们将深入探讨一下 Chrome 93 为开发者提供了哪些新功能。
CSS 模块脚本
现在,您可以像加载 JavaScript 模块一样使用 import
语句加载 CSS 样式表。然后,您可以按照可构造的样式表一样将样式表应用于文档根或阴影根。
新的 CSS 模块脚本功能非常适合自定义元素。与通过 JavaScript 应用 CSS 的其他方式不同,无需创建元素或混淆 CSS 文本的 JavaScript 字符串。
如需使用它,请使用 assert {type: 'css'}
导入样式表,然后通过调用 adoptedStyleSheets
将其应用于 document
或 shadowRoot
。
import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];
但请注意,如果您未添加 assert
,则该文件将被视为 JavaScript 并且无法运行!
如需了解完整详情,请参阅 web.dev 上的使用 CSS 模块脚本导入样式表。
Multi-Screen Window Placement API
对于某些应用,打开新窗口并将其置于特定位置或特定显示屏是一项重要功能。例如,使用 Google 幻灯片进行演示时,我希望幻灯片在主显示屏上全屏显示,而我的演讲者备注显示在另一个显示屏上。
借助 Multi-Screen Window Placement API,可以枚举连接到用户计算机的屏幕,并将窗口放置在特定屏幕上。这是我们的第二次源试用,我们根据您的反馈进行了多项更改。
您可以快速检查设备是否连接了多个屏幕:
const isExtended = window.screen.isExtended;
// returns true/false
不过,关键功能是在 window.getScreens()
中,它提供了有关已连接显示屏的所有详细信息。
const screens = await window.getScreens();
// returns
// {
// currentScreen: {...}
// oncurrentscreenchange: null
// onscreenschange: null
// screens: [{...}, {...}]
// }
例如,您可以确定主屏幕,然后使用 requestFullscreen()
在该屏幕上显示某个元素。
try {
const screens = await window.getScreens();
const primary = screens.filter((screen) => screen.primary)[0];
await elem.requestFullscreen({ screen: primary });
} catch (err) {
console.error(err);
}
此外,它还提供了一种方法来监听更改,例如,是否接通或移除了新显示屏。
const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
if (screens.screens.length !== numScreens) {
console.log('Screen count changed');
numScreens = screens.screens.length;
}
});
如需更深入地了解相关信息,请参阅 Tom 在 web.dev 上发表的使用 Multi-Screen Window Placement API 管理多种显示屏一文。
缩短发布周期
3 月份,我们宣布了缩短发布周期的计划,每四周发布一次 Chrome 新版本。
这一决定已经到来,我们将于 9 月 21 日发布 Chrome 94。您可以在 Chrome 日历中找到每个版本的计划发布日期。
新的 PWA 功能
如果您正在构建渐进式 Web 应用,有两项新的源试用值得尝试。
PWA 的网址处理程序
如果您安装了 PWA,并且点击指向该 PWA 的链接,您可能希望它在 PWA 中打开,而不是在浏览器标签页中打开。
通过在 Web 应用清单中指定 url_handlers
并将 web-app-origin-association
文件添加到 .well-known/
目录,您可以告诉浏览器,如果用户点击指向您的 PWA 的链接,它应该会在已安装的 PWA 中打开。
manifest.json
文件中的示例 url_handlers
:
{
...
"url_handlers": [
{"origin": "https://music.example.com"}
]
}
web-app-origin-association
文件示例:
{
"web_apps": [
{
"manifest": "https://music.example.com/manifest.json",
"details": {
"paths": ["/*"],
"exclude_paths": ["/internal/*"]
}
}
]
}
通过一些额外的验证,您甚至可以让 PWA 处理来自您拥有的其他来源的链接。
如需关于源试用的所有详细信息,请参阅 web.dev 上的 PWA 作为网址处理程序。
窗口控件叠加层
窗口控件叠加层会将客户端区域扩展为覆盖整个窗口,包括标题栏和窗口控制按钮(例如“关闭”“最大化”和“最小化”按钮)。
您可以使用此功能使安装的 PWA 看起来更像其他安装的应用。
如需详细了解源试用,请参阅自定义 PWA 标题栏的窗口控件叠加层。
PWA 峰会
PWA 峰会将于 10 月举行。这是一个免费的在线会议,专注于帮助每个人通过渐进式 Web 应用取得成功。PWA 峰会是一些参与 PWA 技术开发的不同公司(Google、Intel、Microsoft 和 Samsung)的人员之间的合作。
这里有大量精彩的讲座和内容。您可以访问 PWASummit.org 了解详情并进行注册。
还有更多其他奖励!
当然还有很多。
- Flexbox 和 flexbox 内容添加了对对齐关键字的支持:
start
、end
、self-start
、self-end
、left
和right
。 - async Clips API 现在支持 SVG 文件。
- 此外,在设置
meta
theme-color
时将遵循media
属性,因此您可以为浅色模式和深色模式指定不同的主题颜色。
<meta name="theme-color"
media="(prefers-color-scheme: light)"
content="white">
<meta name="theme-color"
media="(prefers-color-scheme: dark)"
content="black">
深入阅读
这仅涵盖了部分重要的亮点。如需了解 Chrome 93 中的其他变化,请点击以下链接。
- Chrome 开发者工具的新变化 (93)
- Chrome 93 弃用和移除
- 针对 Chrome 93 的 ChromeStatus.com 更新
- Chrome 93 中的 JavaScript 的新变化
- Chromium 源代码库更改列表
订阅
如需及时了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。
我是 Pete LePage