Newsdesk
Engineering
Data & AI
Industries
Enterprise Systems
Go-to-Market
Longform
DesignIndiaAll stories

Web & Frontend

02 September 2026

14 new posts across 5 web platform sources — 8 worth your time.

One week of Web & Frontend, 8 stories, as published.

CSS & Layout

Controlling when CSS custom property values are computed

This post explores how and when CSS custom property values are calculated, particularly when using dynamic functions like sibling-index(). It explains the rendering implications of these computation times and how they affect child element styles.

Why it matters — Custom property values assigned via dynamic functions like sibling-index() are computed at different times in the cascade, which can cause unexpected scaling bugs in nested child elements.

Jake Archibald · 02 September 2026 · Read the original →

Browsers & Standards

Creating Web Widgets Using the Document Picture-in-Picture API

This article explains how to use the Document Picture-in-Picture API to create floating windows. Unlike traditional PiP which only supports video, this API allows developers to inject arbitrary HTML, CSS, and JavaScript to build interactive floating widgets.

Why it matters — The Document Picture-in-Picture API enables developers to open an always-on-top window that can be populated with arbitrary, interactive HTML and CSS rather than just video streams.

CSS-Tricks · 02 September 2026 · Read the original →

CSS & Layout

animation-trigger

This post introduces the CSS animation-trigger property, which allows developers to delay the start of a CSS animation. It explains how to use this property to trigger animations only when specific events or conditions occur.

Why it matters — The native animation-trigger property allows developers to defer CSS animations until specific conditions are met, eliminating the need for custom IntersectionObserver JavaScript boilerplate.

CSS-Tricks · 02 September 2026 · Read the original →

CSS & Layout

Let’s Use the Emergent CSS random() Function in all the Browsers

This post details the process of building a cross-browser polyfill for the upcoming native CSS random() function. It covers the technical challenges of simulating dynamic randomness within current CSS limitations.

Why it matters — Creating a polyfill for the upcoming CSS random() function requires mapping dynamic random values to CSS custom properties to achieve cross-browser compatibility today.

CSS-Tricks · 02 September 2026 · Read the original →

CSS & Layout

Background Image Refraction in CSS

This article demonstrates how to create a liquid glass refraction effect using CSS background images. It details the limitations of using fixed backgrounds for this effect and provides a technique to achieve realistic light distortion.

Why it matters — Achieving a realistic glass refraction effect requires aligning background positions across overlapping elements to bypass the visual limitations of CSS fixed backgrounds.

Frontend Masters · 02 September 2026 · Read the original →

CSS & Layout

Hover Proximity Using Modern CSS

This post demonstrates how to create a hover proximity effect where adjacent elements scale dynamically based on cursor distance. It provides a step-by-step guide to achieving this interactive effect using modern CSS selectors and transitions.

Why it matters — Proximity-based hover effects that scale adjacent elements can be built purely in CSS by leveraging advanced sibling combinators and transition delays instead of JS mousemove listeners.

Frontend Masters · 02 September 2026 · Read the original →

Practice

Having Fun with Vercel’s AI SDK and AI Gateway

This article covers how to integrate AI capabilities directly into frontend applications using Vercel's AI SDK and AI Gateway. It explains how to make and manage AI requests and handle streaming responses from within application code.

Why it matters — Frontend applications can offload the complexity of managing multiple LLM providers and streaming responses by routing requests through a unified AI gateway.

Frontend Masters · 02 September 2026 · Read the original →

CSS & Layout

CSS `text-box` Properties Reach Baseline

The CSS `text-box-trim`, `text-box-edge`, and `text-box` shorthand properties are now Baseline Newly available, with Firefox 154 (August 18, 2026) adding support. This means they are supported across Chrome 133, Edge 133, Firefox 154, and Safari 18.2.

Why it matters — Developers can now precisely control text alignment and spacing by trimming font leading, reducing the need for manual adjustments or hacks.

web.dev · 02 September 2026 · Read the original →

At this rate, we will soon be debugging memory leaks in our stylesheets.

8 stories, every Wednesday

Published here every week. Follow by RSS to get it as it lands.

← Previous issue Next issue →