Browser APIs

The CSS Typed Object Model: read and set CSS values as numbers Reading a style in JavaScript returns strings: getComputedStyle( el ).width is "320px", and changing a value means building a string like `${ x }px`. Parsing and concatenating units is a source of small bugs and of work on every animation frame. The CSS…

The Web Animations API: CSS-quality animations controlled from JavaScript Animations that depend on data, such as a counter that moves to a value from the REST API, a card that flies to the cart, or an animation that must be paused, reversed or awaited, are clumsy with CSS classes: the script adds a class, listens…

The CSS Custom Highlight API: highlight search terms without changing the DOM Highlighting the search term in results used to mean wrapping every match in a <mark> element: a regular expression over HTML, broken markup when the term appears inside an attribute, and a re-render of the content. The Custom Highlight API highlights text ranges…

The Temporal API: dates and times without the Date pitfalls JavaScript’s Date is a timestamp with a confusing interface: months start at 0, objects are mutable, there is no date without a time and no time zone other than UTC and the browser’s own. A booking widget that shows “Tuesday 10:00 in Berlin” to a…

The Popover API: menus, tooltips and panels without JavaScript toggles Every theme has elements that open on click and close on Escape or a click outside: a user menu, a mini cart, a language switcher, a help tooltip. Each needs the same JavaScript: toggle a class, set aria-expanded, listen for Escape and outside clicks, manage…

The Navigation API: intercept navigations in a theme without a router library A theme that loads pages of a portfolio or a filtered list with fetch() needs three things: intercept the link click, update the URL with history.pushState(), and handle the back button with popstate. The History API makes this fiddly: popstate does not fire…

Read and write local files from the WordPress admin with the File System Access API An admin tool that imports a CSV or exports settings usually goes through the server: upload the file, parse it in PHP, offer a download. For files that only the browser needs to read or write, the File System Access…

BroadcastChannel: keep WordPress tabs in sync Many people work with several tabs of the same site open: the shop in one tab, the cart in another, the WordPress admin in a third. When something changes in one tab, the others show old data until they are reloaded. The BroadcastChannel API sends messages between tabs, windows…

requestAnimationFrame and requestIdleCallback in WordPress scripts The browser has one main thread for JavaScript, layout and painting. A loop that inserts 2,000 table rows, or a scroll handler that reads and writes layout on every event, takes that thread away from everything else, and the page stops reacting. Two scheduling functions help: requestAnimationFrame() runs code…