以下是一些注意事項:
- 您現在可以使用
import
陳述式載入 CSS 樣式表,就像 JavaScript 模組一樣。 - 已安裝的 PWA 可以註冊為網址處理常式,讓使用者可直接進入 PWA。
- 我們根據您的意見回饋更新了 Multi-Screen Window Placement API,並開始第二次來源試用。
- PWA 高峰會將於 10 月 6 日至 7 日舉行。
- 還有更多應用程式。
我是 Pete LePage,目前在工作及拍攝地點。接下來,我們來深入探索 Chrome 93 開發人員推出的新功能。
CSS 模組指令碼
您現在可以使用 import
陳述式載入 CSS 樣式表,就像 JavaScript 模組一樣。接著,樣式表便可套用至文件或陰影根層級,方法與可建構的樣式表相同。
新的 CSS 模組指令碼功能非常適合自訂元素。不同於從 JavaScript 套用 CSS 的其他方式,您完全不需要建立元素或包含 CSS 文字的 JavaScript 字串的 mes。
如要使用,請使用 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 模組指令碼匯入樣式表」。
多螢幕視窗放置 API
對於某些應用程式而言,開啟新視窗並放在特定位置或特定螢幕是非常重要的功能。例如,使用簡報進行簡報時,我想在主螢幕以全螢幕顯示投影片,並在另一個螢幕上顯示我的演講者備忘稿。
多螢幕視窗放置 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.dev 上的「使用多螢幕視窗刊登位置 API 管理多個螢幕」一文。
縮短發布週期
我們曾在 3 月宣布縮短發布週期,每四週會推出新版 Chrome。
時至今日,Chrome 94 將於 9 月 21 日推出。您可以在 Chrome 日曆中查看各版本的預定發布日期。
PWA 新功能
如果您建構的是漸進式網頁應用程式,有兩個新的來源試用值得一探。
PWA 的網址處理常式
如果您已在安裝 PWA 後點選該 PWA 的連結,則可能需要在 PWA 中開啟 PWA,而「而非」瀏覽器分頁。
您可以在網頁應用程式資訊清單中指定 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 月舉行。這場免費的線上會議旨在幫助每個人運用漸進式網頁應用程式獲得成功。PWA 高峰會是 Google、Intel、Microsoft 和 Samsung 等幾家公司參與開發 PWA 技術的公司,共同合作。
網路上有很多精彩的講座和內容,如要瞭解詳情及註冊,請前往 PWASummit.org。
還有更多獎品等著您!
當然還有許多其他東西。
- Flexbox 和 flexbox 項目已新增對對齊關鍵字的支援:
start
、end
、self-start
、self-end
、left
和right
。 - async 剪貼簿 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,只要 Chrome 94 已經推出,我就會在這裡為您提供 Chrome 的新功能!