#css
Tagged “css”
18 articlesThe CSS infinity keyword, and what it lets you delete
A tour through Adam Argyle's recipes for the CSS infinity keyword — pill radii, unbounded clamps, and a boolean pattern the cascade can decide on its own.
Aug 1, 2026 · Iris CalderónCSS & layoutThe lh unit sizes to the line, not the font
Ahmad Shadeed's post on ishadeed.com tours the CSS lh unit, which resolves to the element's computed line-height. Here's where sizing against that line beats sizing against font-size.
Aug 1, 2026 · Iris CalderónCSS & layoutRoute and navigation matching, proposed for CSS
Bramus Van Damme, Noam Rosenthal and David Baron are drafting a CSS spec — css-navigation-1 — that describes URL routes and per-navigation styling in stylesheets, so multi-page View Transitions can drop the pageswap/pagereveal JavaScript.
Jul 31, 2026 · Iris CalderónBrowser releasesSafari Technology Preview 249 drops attr(), if(), @function, popover=hint and Temporal in one build
WebKit's July 29 preview stacks nine CSS additions, a new HTML popover value, the dialog closedby attribute, and the JavaScript Temporal object into a single release — one of the feature-densest STP drops of the year for hand-authored HTML and CSS.
Jul 30, 2026 · Dex HalloranCSS & layoutHard color stops turn conic-gradient() into a triangle machine
Chris Coyier makes the case that conic-gradient() with two hard color stops is the fastest way to draw a triangle in CSS. The from and at keywords do most of the work.
Jul 29, 2026 · Iris CalderónBrowser releasesSafari Technology Preview 248 gives progress() a no-clamp option and forwards missing components across analogous color spaces
WebKit's Safari Technology Preview 248 lands two CSS additions worth reading — a no-clamp option on the CSS progress() function and forwarding of missing color components when interpolating between analogous color spaces — plus a pair of accessibility repairs and a small stack of quieter CSS fixes.
Jul 23, 2026 · Iris CalderónCSS & layoutOne grid, five rounds, no track matching
A rebuild of the FIFA knockout layout with CSS subgrid shows how nested rounds can share the parent grid's columns and rows, with negative line numbers doing the trimming.
Jul 19, 2026 · Iris CalderónCSS & layoutborder-shape is the property clip-path always owed you
The upcoming CSS border-shape accepts the same values as clip-path, but border, box-shadow and outline follow the shape instead of getting clipped off. It is the missing half of the CSS shapes story — Chromium-only for now.
Jul 8, 2026 · Dex HalloranCSS & layoutCSS anchor positioning: two properties do the wiring
Anchor positioning has landed in every major browser engine. Two properties, a keyword grid, and a fallback list replace the JavaScript most floating-UI widgets used to need.
Jul 7, 2026 · Iris CalderónBrowser releasesSafari Technology Preview 247 lands calc-mix() and clears a scatter of small fixes
WebKit's July 1 preview build adds CSS calc-mix() under its New Features list, plus HTML spec-alignment repairs for align="center" and rel=preload as="json", two VoiceOver-facing accessibility fixes, and a MathML change for underover layout.
Jul 2, 2026 · Yuki TanakaCSS & layoutPseudo-classes are states, not events
CSS-Tricks reframes the everyday choice between :hover, :focus-visible, :has() and the matching JavaScript event listeners. The piece also previews the proposed event-trigger syntax in the Animation Triggers spec, which would let CSS bind animations to events instead of states.
Jun 29, 2026 · Iris CalderónCSS & layoutOpposing scroll columns with one view() timeline and three keyframe sets
CSS-Tricks walks through making adjacent columns drift in opposite directions as the page scrolls, with no JavaScript. The trick is a per-item animation-timeline: view() and animation-range: entry 0% cover 100%, repeated across three keyframe sets.
Jun 25, 2026 · Iris CalderónCSS & layoutWhy setting perspective on :root won't flip your view transition
Setting perspective on html, :root, or even ::view-transition itself looks like the obvious place to enable a 3D view transition — and produces nothing. The fix is to switch from the property form to the perspective() function, applied inside the snapshot's keyframes.
Jun 24, 2026 · Iris CalderónCSS & layoutNaming many view transitions: attr() or match-element?
Two modern ways to give every card in a grid its own view-transition-name — attr() reading a data attribute, or the match-element keyword. They look interchangeable, then diverge the moment a navigation crosses documents or a pseudo-selector needs to address a specific snapshot.
Jun 24, 2026 · Iris CalderónCSS & layoutScroll-triggered animations land in CSS: `timeline-trigger` is not `animation-timeline`
Chrome 146 is the first browser to ship CSS scroll-triggered animations. The new `timeline-trigger` property fires a fixed-duration animation when a scroll threshold is crossed, and it is a close cousin of scroll-driven animations on a very different mechanism.
Jun 23, 2026 · Iris CalderónBrowser releasesSafari Technology Preview 246 widens color, images and attr()
WebKit has shipped Safari Technology Preview 246 with a batch of CSS additions — light-dark() taking image values, image(<color>), alpha(), color-mix() with more than two colors, attr() on pseudo-elements, and preview support for font-variant-emoji and word-break: auto-phrase.
Jun 23, 2026 · Yuki TanakaCSS & layoutGrid Lanes gets a Field Guide — and a fourth layout primitive to argue about
WebKit has published gridlanes.webkit.org, a Field Guide for the new display: grid-lanes layout primitive, with a playground, a cheat sheet and six demos pitting Grid Lanes against Flexbox, Multicolumn and Grid.
Jun 22, 2026 · Iris CalderónBrowser releasesSafari 27 beta opens up the form control, scroll, and the cascade
WebKit has detailed the Safari 27 beta: 58 new web-platform features and 525 fixes, including customizable <select>, scroll anchoring, the :heading pseudo-class, and the revert-rule and stretch CSS keywords.
Jun 19, 2026 · Yuki Tanaka