(BUSAN.SASHIMI)
terminal
Weekly Digest // STYLING — Week 2-2026
paletteWeekly Report

CSS and Styling — 2026 Week 2

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 2-2026
CSS FEATURE

Build smarter color systems with relative colors

Kevin Powell demonstrates how CSS relative colors eliminate the need to maintain separate variables for lighter, darker, and transparent color variants. Using toast notification UI as a worked example, he shows the hsl(from var(--toast-color) H S L) syntax to derive background, border, and box-shadow values from a single custom property — swapping in a fixed lightness percentage or appending a forward-slash alpha channel. He then introduces OKLCH as a perceptually uniform alternative to HSL: because OKLCH keeps perceived brightness consistent across hues (unlike HSL, where yellows appear far brighter than blues at the same lightness value), generated color variants stay visually coherent without extra tweaks. The tutorial is built on two companion Piccalilli articles Powell wrote covering the space-separated CSS color syntax and practical color manipulation.

Build smarter color systems with relative colors
play_arrow
10:41
AI_INFOGRAPHIC
Build smarter color systems with relative colors — infographicWatch Recordingarrow_forward
Article · CREATIVE CODINGREAD TIME: 8m

Creating a Curvy Arrow

Ben Knight walks through building a dynamic SVG curved arrow that connects two DOM elements, using the SVG M (move-to) and C (cubic Bézier) path commands plus a <marker> element with orient="auto" for a self-orienting arrowhead. Start and end coordinates are read from offsetLeft, offsetWidth, and offsetTop relative to a common position: relative parent, with control points placed at the horizontal midpoint and offset above/below the endpoints to form the curve. The S command can chain smooth additional curves without manually specifying the first control point. CSS stroke-dashoffset animation makes the line appear to draw itself, and opacity/stroke-width keyframes add further effects. The author notes that Safari has known bugs with dynamically updated SVG marker attributes and recommends Chrome or Firefox for the interactive demos.

READ_FULL_LOGarrow_forward
Article · CSS FEATUREREAD TIME: 2m

Responsive Hexagon Grid without Media Queries

Temani Afif shows how three cutting-edge CSS features combine to produce a fully responsive hexagon grid with no media queries: corner-shape: bevel on a border-radius: 50% / 25% element creates the hexagon shape, container queries (container-type: inline-size) expose 100cqw for arithmetic, and sibling-index() together with round(), mod(), and calc() derive a --_c flag that applies a margin-left offset to only the first element of every other row. A negative margin-bottom computed from cos(30deg) creates the row overlap. The technique is currently Chrome-only; Afif explicitly flags this and links to a previous implementation with broader browser support. The pattern extends to rhombus and octagon grids by adjusting aspect-ratio, border-radius, and the gap formula.

READ_FULL_LOGarrow_forward
Article · CSS FEATUREREAD TIME: 3m

Effortless animations with CSS view transitions

The author added polished cross-page animations to a static website using only a few lines of CSS and zero JavaScript. Adding a single @view-transition { navigation: auto; } rule enables a default cross-fade between pages; the duration and easing can then be overridden on ::view-transition-group(*). For per-element morphing animations — such as nav items visually "flying" to become breadcrumbs on the next page — each paired element across documents gets a matching view-transition-name value, and the browser handles the interpolation automatically. Firefox does not yet fully support cross-document view transitions, so the effect degrades gracefully there. The page is generated in Gleam via Lustre, with a small helper that applies view-transition-name as an inline style attribute to avoid repetition.

READ_FULL_LOGarrow_forward
Article · CSS FEATUREREAD TIME: 4m

CSS Logical Properties: A Key Feature in Future-Proof Web Design

Physical CSS properties like margin-left, top, and width embed a left-to-right, top-to-bottom assumption that breaks for RTL languages (Arabic, Hebrew, Farsi) and vertical East Asian writing modes. Logical properties replace them with flow-relative equivalents: margin-inline-start adapts to the document's writing direction automatically, inline-size maps to width in horizontal but to height in vertical layouts, and inset-block-start replaces top. All modern browsers — Chrome, Firefox, Safari, Edge — now support logical properties fully, making IE the only meaningful hold-out. The article recommends adopting incrementally: ban margin-left/margin-right from new PRs first, then use the stylelint-use-logical-spec plugin to flag remaining physical properties across the codebase.

READ_FULL_LOGarrow_forward
Article · CSS FEATUREREAD TIME: 2m

Responsive and Fluid Typography with Baseline CSS Features

Miriam Suzanne summarizes her 2025 research into fluid and responsive typography for a web.dev article, centering on a tension that governs all viewport-relative font sizing: the more a font size tracks the viewport, the less it can respond to user-controlled zoom preferences. Her approach uses clamp() combining em or rem with vw or vi units, a pattern now expressible cleanly thanks to Baseline-supported CSS comparison functions. She visualizes the math with overlaid graphs plotting base font size in px alongside effective zoom percentage against viewport width, showing that a 2× font-size increase via viewport scaling grows at a steeper rate than 200% zoom. The article cautions that choosing only px or only rem is a false binary now that CSS min(), max(), and clamp() have broad support.

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

The CSS story of week 2 is about color intelligence meeting layout ingenuity. The featured video is Kevin Powell's demonstration of CSS relative colors, which reframes a common design-systems pain point: instead of maintaining a parallel set of tint, shade, and transparent variables for every brand color, the hsl(from var(--toast-color) H S L) syntax derives all variants from a single custom property. Powell then layers in OKLCH as the perceptually superior color space — where HSL treats a yellow and a blue at the same lightness value as visually equivalent (they are not), OKLCH keeps perceived brightness consistent across hues, making generated palettes visually coherent without manual correction.

Miriam Suzanne's fluid typography research, published via web.dev, addresses the tension every responsive font system must resolve: viewport-relative scaling and user zoom are fundamentally in conflict — the more a font tracks the viewport, the less it responds to user accessibility preferences. Her answer is clamp() combining em/rem with vw/vi, now expressible cleanly with Baseline-supported min(), max(), and clamp() functions. The graphed math makes the trade-off legible: 2× viewport scaling grows at a steeper rate than 200% user zoom, a difference that matters for accessibility.

Temani Afif's hexagon grid demonstrates how three cutting-edge features compose into something striking: corner-shape: bevel with a specific border-radius creates the shape, container queries expose 100cqw for arithmetic, and sibling-index() with round()/mod()/calc() derive the alternating-row offset — a cos(30deg) negative margin-bottom produces the row overlap. It is Chrome-only for now, but the pattern previews where no-media-query layout composition is heading. The week rounds out with CSS logical properties making the case for a codebase-wide migration away from physical properties like margin-left and top, and Ben Knight's SVG cubic Bézier curved arrow tutorial, where M/C/S path commands, a <marker orient="auto"> arrowhead, and stroke-dashoffset animation combine to connect two DOM elements dynamically.

Key Takeaways
  • Replace parallel tint/shade/alpha variable sets with CSS relative color syntax — hsl(from var(--color) H S L) lets one token do the work of five, and switching to OKLCH keeps generated shades perceptually consistent across hues.
  • Pair clamp() with rem and vw for fluid typography rather than choosing one unit — the combination lets font size respond to both viewport width and user zoom, whereas either alone sacrifices one axis of accessibility.
  • Adopt CSS logical properties (margin-inline-start, inset-block-start, inline-size) in all new code and use the stylelint-use-logical-spec plugin to surface remaining physical property usages across the existing codebase.