CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 1-2026
article
Getting Started with CSS Anchor Positioning: anchor-name, position-anchor, and position-area
TAG: CSS FEATURE
CSS anchor positioning eliminates the need for JavaScript libraries like Popper.js and Floating UI by letting you declaratively attach one element to another using three properties: anchor-name (assigned to the reference element using the <dashed-ident> syntax, e.g. --tooltip-anchor), position-anchor (declared on the positioned element, which must be position: absolute or fixed), and position-area (which places the element in one of eight cells of a conceptual 3×3 grid surrounding the anchor). A key subtlety is that position-area does not merely shift the element — it redefines its containing block to that grid region, so percentage sizing and inset: 0 respond to the region rather than the viewport. Physical keywords (top, right) and logical keywords (block-start, inline-end) cannot be mixed in the same position-area value. When using the Popover API, the browser implicitly establishes the anchor relationship, making anchor-name and position-anchor unnecessary. Developers should always add box-sizing: border-box when sizing an anchored element to a region, and bear in mind that keyboard focus order and screen-reader semantics are not managed by the API.
Patrick Brosset recreates the 2005 Million Dollar Homepage — a viral marketing stunt in which Alex Tew sold one million pixels of ad space at $1 per pixel (minimum purchase: 10×10 pixels) — as a CSS Grid demonstration. The original page was implemented with a single stitched image and an HTML image map; this recreation replaces that approach with a 100-column, 100-row CSS grid where each advertiser's block is a div positioned via the grid-area property, mapping directly to the original pixel coordinates. The demo serves as a concrete illustration of CSS Grid's ability to handle precise, non-uniform placement across a large explicit grid, using grid-area shorthand to define each cell's row and column spans. The original image assets are reused, with explicit material removed.
CSS Scroll Markers: Building Carousels Without JavaScript
TAG: CSS FEATURE
The ::scroll-marker pseudo-element is a new CSS feature that creates interactive navigation indicators tied directly to a scroll container, functioning like anchor links that snap the viewport to specific sections when clicked — building carousel pagination dots with zero JavaScript. Scroll markers are declared on the scroll container's children and auto-connect to the scroller, replacing the JavaScript event listeners, scroll calculations, and active-state management that dot-based carousels have historically required. The article by Usman Writes presents the feature as part of CSS's continuing trend of absorbing UI patterns that previously required scripting. Browser support is nascent at time of publication, so production use should be gated accordingly.
Precise Positioning with CSS Anchor Functions: anchor(), anchor-center, and anchor-size()
TAG: CSS FEATURE
Part 2 of Schalk Neethling's CSS anchor positioning series moves beyond position-area's 3×3 grid to three functions that give sub-pixel control. anchor(<side>) resolves to the distance from the containing block edge to a specified anchor edge and is used in inset properties (inset-block-start, left, etc.); it supports physical, logical, contextual (inside/outside), and percentage keywords, but physical keywords must match their property's axis. Combined with calc(), it enables exact gaps (e.g. calc(anchor(start) + 0.5rem)) and multi-anchor stretching (different anchors for inset-block-start and inset-block-end). A critical gotcha with the Popover API: UA stylesheets set inset: 0; margin: auto on [popover], so developers must explicitly reset both with inset: auto; margin: unset before anchor functions take effect. anchor-center is a value for align-self/justify-self that centres the positioned element on the anchor along that axis — unlike anchor(center) which only moves the element's edge to the anchor's midpoint. anchor-size(<dimension>) returns the anchor's measured size (e.g. inline-size: anchor-size(inline) matches a dropdown to its trigger), with no axis-matching constraint unlike anchor().
Why CSS Grid feels complex, and how to keep it simple
Kevin Powell argues that CSS Grid's reputation for complexity stems from a common misuse: developers routinely apply it to entire page layouts — header, sidebar, main, footer — using explicit line numbers or grid-template-areas for every element, when simpler, scope-reduced grids would serve far better. His demonstration refactors a classic holy grail layout by pulling the full-width header and footer out of the grid entirely and leaving only a three-columngrid-template-columns definition (auto 1fr auto) for the middle content area, eliminating the need for line-number assignments on each child. Responsiveness then reduces to a single nested media query that removes the grid-template-columns below 860px, stacking columns naturally. Powell contrasts this against flexbox: CSS Grid lets you declare child column sizes once on the parent without relying on flex-grow interactions that can misbehave when items wrap. The practical takeaway is to default to small, targeted grids for just a few tracks, reaching for grid-template-areas and explicit line numbers only when the layout genuinely requires coordinated row-and-column control.
CSS now ships native custom functions via the @function at-rule, currently experimental, demonstrated by Kyle (Web Dev Simplified) through progressively complex examples. A function is declared with @function --name(--param <type>), returns a value through the special result property rather than a return keyword, and follows normal cascade ordering — the last result assignment wins, enabling media-query-driven branching inside a single function body. Type annotations (<color>, <number>, <percentage>) are optional today but will power dev-tool warnings as the feature matures. Functions obey CSS layers: defining the same function name in a lower-priority layer acts as an overload, similar to JavaScript function shadowing. The video demonstrates a --responsive(--small, --medium, --large) utility that swaps values across three breakpoints (≤200px, 200–300px, and larger) using nested media queries, then combines CSS if() style queries to fall back gracefully when the --large parameter is omitted. The key mental-model shift: unlike JavaScript, there is no early-return — every conditional path evaluates, and the final result in cascade order is what the browser uses.
Getting Started with CSS Anchor Positioning: anchor-name, position-anchor, and position-area
CSS anchor positioning eliminates the need for JavaScript libraries like Popper.js and Floating UI by letting you declaratively attach one element to another using three properties: anchor-name (assigned to the reference element using the <dashed-ident> syntax, e.g. --tooltip-anchor), position-anchor (declared on the positioned element, which must be position: absolute or fixed), and position-area (which places the element in one of eight cells of a conceptual 3×3 grid surrounding the anchor). A key subtlety is that position-area does not merely shift the element — it redefines its containing block to that grid region, so percentage sizing and inset: 0 respond to the region rather than the viewport. Physical keywords (top, right) and logical keywords (block-start, inline-end) cannot be mixed in the same position-area value. When using the Popover API, the browser implicitly establishes the anchor relationship, making anchor-name and position-anchor unnecessary. Developers should always add box-sizing: border-box when sizing an anchored element to a region, and bear in mind that keyboard focus order and screen-reader semantics are not managed by the API.
Why CSS Grid feels complex, and how to keep it simple
Kevin Powell argues that CSS Grid's reputation for complexity stems from a common misuse: developers routinely apply it to entire page layouts — header, sidebar, main, footer — using explicit line numbers or grid-template-areas for every element, when simpler, scope-reduced grids would serve far better. His demonstration refactors a classic holy grail layout by pulling the full-width header and footer out of the grid entirely and leaving only a three-columngrid-template-columns definition (auto 1fr auto) for the middle content area, eliminating the need for line-number assignments on each child. Responsiveness then reduces to a single nested media query that removes the grid-template-columns below 860px, stacking columns naturally. Powell contrasts this against flexbox: CSS Grid lets you declare child column sizes once on the parent without relying on flex-grow interactions that can misbehave when items wrap. The practical takeaway is to default to small, targeted grids for just a few tracks, reaching for grid-template-areas and explicit line numbers only when the layout genuinely requires coordinated row-and-column control.
CSS now ships native custom functions via the @function at-rule, currently experimental, demonstrated by Kyle (Web Dev Simplified) through progressively complex examples. A function is declared with @function --name(--param <type>), returns a value through the special result property rather than a return keyword, and follows normal cascade ordering — the last result assignment wins, enabling media-query-driven branching inside a single function body. Type annotations (<color>, <number>, <percentage>) are optional today but will power dev-tool warnings as the feature matures. Functions obey CSS layers: defining the same function name in a lower-priority layer acts as an overload, similar to JavaScript function shadowing. The video demonstrates a --responsive(--small, --medium, --large) utility that swaps values across three breakpoints (≤200px, 200–300px, and larger) using nested media queries, then combines CSS if() style queries to fall back gracefully when the --large parameter is omitted. The key mental-model shift: unlike JavaScript, there is no early-return — every conditional path evaluates, and the final result in cascade order is what the browser uses.
Patrick Brosset recreates the 2005 Million Dollar Homepage — a viral marketing stunt in which Alex Tew sold one million pixels of ad space at $1 per pixel (minimum purchase: 10×10 pixels) — as a CSS Grid demonstration. The original page was implemented with a single stitched image and an HTML image map; this recreation replaces that approach with a 100-column, 100-row CSS grid where each advertiser's block is a div positioned via the grid-area property, mapping directly to the original pixel coordinates. The demo serves as a concrete illustration of CSS Grid's ability to handle precise, non-uniform placement across a large explicit grid, using grid-area shorthand to define each cell's row and column spans. The original image assets are reused, with explicit material removed.
CSS Scroll Markers: Building Carousels Without JavaScript
The ::scroll-marker pseudo-element is a new CSS feature that creates interactive navigation indicators tied directly to a scroll container, functioning like anchor links that snap the viewport to specific sections when clicked — building carousel pagination dots with zero JavaScript. Scroll markers are declared on the scroll container's children and auto-connect to the scroller, replacing the JavaScript event listeners, scroll calculations, and active-state management that dot-based carousels have historically required. The article by Usman Writes presents the feature as part of CSS's continuing trend of absorbing UI patterns that previously required scripting. Browser support is nascent at time of publication, so production use should be gated accordingly.
Precise Positioning with CSS Anchor Functions: anchor(), anchor-center, and anchor-size()
Part 2 of Schalk Neethling's CSS anchor positioning series moves beyond position-area's 3×3 grid to three functions that give sub-pixel control. anchor(<side>) resolves to the distance from the containing block edge to a specified anchor edge and is used in inset properties (inset-block-start, left, etc.); it supports physical, logical, contextual (inside/outside), and percentage keywords, but physical keywords must match their property's axis. Combined with calc(), it enables exact gaps (e.g. calc(anchor(start) + 0.5rem)) and multi-anchor stretching (different anchors for inset-block-start and inset-block-end). A critical gotcha with the Popover API: UA stylesheets set inset: 0; margin: auto on [popover], so developers must explicitly reset both with inset: auto; margin: unset before anchor functions take effect. anchor-center is a value for align-self/justify-self that centres the positioned element on the anchor along that axis — unlike anchor(center) which only moves the element's edge to the anchor's midpoint. anchor-size(<dimension>) returns the anchor's measured size (e.g. inline-size: anchor-size(inline) matches a dropdown to its trigger), with no axis-matching constraint unlike anchor().
CSS starts 2026 by absorbing yet more JavaScript territory. The centerpiece is Schalk Neethling's two-part series on CSS Anchor Positioning: part one introduces anchor-name, position-anchor, and the 3×3 position-area grid; part two reaches for anchor(), anchor-center, and anchor-size() when the grid isn't precise enough. Tooltips, dropdowns, and context menus without a positioning library is no longer a demo — it's a workflow.
The same absorb-the-JavaScript current runs through the week's smaller pieces: ::scroll-marker makes zero-JS carousels practical, and Web Dev Simplified digs into custom CSS functions — overloads included. Meanwhile Kevin Powell proposes a New Year's resolution (stop over-engineering grid) and Patrick Brosset rebuilds the 2005 Million Dollar Homepage as a single 100×100 CSS grid, a small monument to how far layout has come.
Key Takeaways
CSS Anchor Positioning is ready for real tooltip/dropdown work — learn position-area first, reach for anchor() only when you need pixel precision.
::scroll-marker and custom CSS functions continue CSS's absorption of what previously required JavaScript.
Grid complexity is usually self-inflicted — default to simple track definitions before reaching for the full spec.
