
布偶操作員
Puppeteer 是 JavaScript 程式庫,可提供高階 API,透過 Chrome 開發人員工具通訊協定和 WebDriver BiDi 自動化 Chrome 和 Firefox。
您可以使用這項工具自動執行瀏覽器中的任何操作,包括擷取螢幕截圖、產生 PDF 檔案、瀏覽及測試複雜的 UI,以及分析效能。
概念
頁面互動
網路攔截
擷取螢幕截圖
執行模式
網誌文章
Android 版 Chrome 邊到邊遷移指南
打造無邊框網頁體驗
為 Android 版 Chrome 的無邊框設計做好準備
從 Chrome 135 開始,Android 版 Chrome 會以全螢幕模式顯示。
CSS attr() 升級
您現在可以將 attr() 與任何 CSS 屬性 (包括自訂屬性) 搭配使用,且該函式可將值剖析為字串以外的資料類型。
CSS 2024 年度總回顧
歡迎加入 Chrome DevRel 團隊,與滑板恐龍一起探索 2024 年推出的最新 Chrome 和網頁平台 CSS。
Chrome 131 的新功能
Chrome 131 即將推出!為詳細資料元素提供更多 CSS 樣式、透過頁面邊界方塊簡化列印版面配置,以及更多功能。
更多樣式 <詳細資料> 樣式選項
您現在可以使用新的 ::details-content pseudo-element 設定顯示類型,並為展開和收合的部分設定容器樣式。
Chrome 130 的新功能
Chrome 130 已正式推出!子圖中的文件圖片可讓您進一步控管相框中的畫面,CSS 巢狀宣告可修正一些棘手的極端情況,而您可以指定元素裝飾在不同線條中的裝飾行為。Pete LePage 已詳細說明 Chrome 130 中開發人員可用的最新功能。
單頁應用程式適用的相同文件檢視轉換功能
開始在單頁應用程式中使用相同文件檢視模式轉換功能。
以高度為高度:自動;(以及其他內建大小關鍵字) 在 CSS 中
使用 `interpolate-size` 和 `calc-size()` 為內建大小設定關鍵字設定動畫
捲動貼齊事件
推出兩個新的 JavaScript 事件:ScrollSnapChange 和 ScrollSnapChanged。
關於觀看轉換的誤解
現在有越來越多人開始研究 View Transition API,接著該 API 有助於釐清一些錯誤。
CSS 和網頁版 UI 最新動態:2024 年 I/O 大會重點回顧
閱讀 2024 年 Google I/O 大會中發布的所有 CSS 和網頁版 UI 公告。
什麼是觀看轉場效果?(2024 年 Google I/O 大會更新內容)
隆重推出 MPA 跨文件檢視轉換功能、利用有效類型的選擇性檢視轉場效果,以及透過檢視轉場類別共用動畫樣式。
為什麼 CSS 和使用者介面功能對你的電子商務網站至關重要?
瞭解導入最新的 CSS 和使用者介面功能 (例如查看轉場效果、捲動式動畫、Popover API 等) 為何可為電子商務網站帶來助益。
捲動式動畫個案研究
探索使用 Policybazaar、redBus 和 Tokopedia 如何運用捲動式動畫的優點。
隆重推出 ";呈現「捲動式動畫」的強大威力
這堂 10 集教學影片,全面瞭解捲動式動畫
CSS 磚石的替代提案
依不同規格定義磚石和網格的提案。
使用 View Transition API 順暢轉換
View Transition API 可讓您新增網站檢視畫面之間的轉場效果。
多頁面應用程式的跨文件檢視模式轉換
開始在多頁面應用程式 (MPA) 中使用跨文件檢視轉場效果。
CSS 異動 ::backdrop 繼承
自 Chrome 122 版起,`::backdrop` 元素會沿用原始元素的屬性。
捲軸樣式
請使用「scrollbar-width」和「scrollbar-color」屬性來設定捲軸的樣式。
獨家手風琴
建立具有相同 `name` 的多個 `` 元素的專屬摺疊元素。
包裝 CSS:2023!
2023 年是 CSS 的一大關鍵!瞭解今年在 Chrome 和各個網路平台中掀起一股熱潮。
使用 CSS @scope at-rule 限制選取器的觸及範圍
瞭解如何使用 @scope 僅在 DOM 有限的子樹狀結構內選取元素。
使用 Linear() 加/減速函式在 CSS 中建立複雜的動畫曲線
隆重推出 Linear()。這是一種 CSS 的加/減速函式,可在其點之間進行線性內插,讓您重新建立彈跳和彈簧效果。
CSS 和使用者介面的新功能:2023 年 I/O 大會版本
Google I/O 2023 的前 20 大 CSS 和 UI 功能會醒目顯示你不容錯過的消息';
使用捲動式動畫呈現捲動時的元素動畫
瞭解如何使用捲動時間軸和檢視畫面時間軸,以宣告方式建立捲動式動畫。
CSS 巢狀
我們現在推出了一項喜愛的 CSS 預先處理工具功能:巢狀樣式規則。
協助選擇 CSS 巢狀結構的語法
CSS Working Group 會持續討論在 CSS 中定義巢狀結構的最佳方式。如果您是 CSS 供應商,我們很樂意提供協助。
為 Android 版 Chrome 即將推出的可視區域大小調整行為異動做好準備
在 Chrome 108 版中,可視區域大小調整行為將有哪些異動、Chrome 進行這項異動的原因,以及您可採取的準備工作。
Chrome 106 新功能
Chrome 106 現已推出。部分新的 Intl API 可讓您進一步掌控數字格式設定。新的 Pop Up API 具有來源試用,可讓您輕鬆向使用者顯示重要內容。我們提供了幾項 CSS 改善項目。此外,還有許多實用功能。
個案研究:使用開發人員工具改善 Angular 偵錯服務
使用 Angular 進行測試,Chrome 開發人員工具和 Angular 團隊攜手合作,為你提供更優質的偵錯體驗。其他架構也可以導入類似的變更。
Chrome 開發人員工具中的新型網路偵錯功能
來看看 Chrome 開發人員工具近期的異動,改善在使用 bundler、架構和第三方程式碼時,能夠改善偵錯和剖析體驗。
瀏覽器即將推出 Cascade 圖層
"Cascade 圖層是新的 CSS API,可協助您管理程式碼的階層優先順序,不久後就能在所有新版瀏覽器中生效"。
Chrome 89 版的新功能
Chrome 89 現已推出!WebHID、WebNFC 和 Web Serial 已從來源試用升級,現已推出穩定版。We'即將關閉一些開發人員用來抵禦 PWA 可安裝性檢查的開發人員迴圈。「網路分享」和「網路分享目標」已傳送至桌面。還有 #39 點更多!
How NRK uses scroll-driven animations to bring stories to life
Learn how scroll-driven and scroll-triggered animations enhance storytelling articles
Specify how multiple animation effects should composite with animation-composition
When multiple animations affect the same property simultaneously, should they replace each other, add, or accumulate?
More control over :nth-child() selections with the of S syntax
Pre-filter a set of child elements before applying An+B logic on it.