Practical, versioned notes on browser and tooling signals that affect art direction and motion. Every claim below links to an authoritative source cited in research.
- Chrome (Mar 27, 2026)
− - Element-scoped view transitions (Chrome 147) — Chrome 147 (docs published Mar 27, 2026) exposes element-scoped transitions via Element.startViewTransition, which scopes snapshotting and the ::view-transition pseudo-tree to a subtree instead of the whole document. This enables concurrent and nested transitions, fixes many z-index and clipping issues from document-scoped transitions, and keeps the rest of the page interactive. See the Chrome guide: https://developer.chrome.com/docs/css-ui/view-transitions/element-scoped-view-transitions and the blog announcement: https://developer.chrome.com/blog/element-scoped-view-transitions (Mar 27, 2026).
+ - Element-scoped view transitions (Chrome 147) — Chrome 147 exposes element-scoped transitions via Element.startViewTransition, which scopes snapshotting and the ::view-transition pseudo-tree to a subtree instead of the whole document. This enables concurrent and nested transitions, fixes many z-index and clipping issues from document-scoped transitions, and keeps the rest of the page interactive. See the Chrome guide and blog announcement: https://developer.chrome.com/docs/css-ui/view-transitions/element-scoped-view-transitions and https://developer.chrome.com/blog/element-scoped-view-transitions (Mar 27, 2026).
- Practical note: prefer element-scoped transitions for independently updating components (modals, list reorders, nested route panels). When nesting, follow the docs for view-transition-name, containment, and clipping to avoid visual leakage.
- Feature detection pattern (copy-pasteable, robust):
```js
− // Support both function and object callback signatures where available
+ // Support both Element.startViewTransition and document.startViewTransition
async function runScopedTransition(root, mutate) {
if (!root) return mutate();
const start = root.startViewTransition;
if (typeof start === 'function') {
try {
− // Some browsers accept a function directly, others accept an options object
+ return root.startViewTransition(mutate);
− // Try the function form first, then fall back to the options object.
− if (start.length === 1 || start.length === 0) {
− return root.startViewTransition(mutate);
− }
− return root.startViewTransition({ callback: mutate });
} catch (e) {
// fall through to document-level or JS choreography
}
@@ −57 +52 @@
```
- Tailwind (v4.x)
− - Tailwind v4.1 (Apr 3, 2025) adds utilities useful for art direction: text-shadow utilities, mask utilities, colored drop-shadows, pointer-aware device variants (pointer/any-pointer), `items-baseline-last`, `safe` alignment, and more. See the announcement: https://tailwindcss.com/blog/tailwindcss-v4-1 (Apr 3, 2025).
+ - Tailwind v4.1 adds utilities useful for art direction: text-shadow utilities, mask utilities, colored drop-shadows, pointer-aware device variants (pointer/any-pointer), `items-baseline-last`, `safe` alignment, and more. See the announcement on the Tailwind blog (v4.1).
- Tailwind v4.0 reworked the framework toward a CSS-first approach that exposes theme values as native CSS variables and improves container/query and runtime performance. Map Tailwind utilities to your canonical CSS variables or author tokens directly so framework, vanilla, and third-party integrations share the same token values.
- Tailwind Plus (vanilla-JS Elements)
− - Tailwind Plus announced vanilla-JS support for its UI blocks via `@tailwindplus/elements` on July 25, 2025. Elements are headless custom elements you can include via CDN and style with utilities or CSS. When using Elements in non-framework contexts, map component classes or element variables back to your token CSS variables so tokens remain authoritative across framework and vanilla integrations. (https://tailwindcss.com/blog/vanilla-js-support-for-tailwind-plus — Jul 25, 2025).
+ - Tailwind Plus (the Tailwind UI product family) introduced vanilla-JS support for its UI blocks via headless custom elements (`@tailwindplus/elements`). Use the provided Elements in CDN or build contexts and map component classes or element CSS variables back to your token CSS variables so tokens remain authoritative across framework and vanilla integrations. See the Tailwind Plus blog and Elements docs for examples.
- Design tooling
- Figma variables and token tooling: use variables to test font scaling and token variations in design so accessibility regressions surface in design review rather than code review.
