Accordions stop guessing their height in Safari's preview build

Release 254 of Safari Technology Preview, published October 8, adds the interpolate-size property. Set it to allow-keywords and transitions can run to and from auto, min-content, and fit-content, the sizes CSS has always refused to animate.

The same release adds calc-size(), which does math on those intrinsic sizes, so a single element can opt in on its own. Chrome has shipped both since version 129. Safari is the second engine to carry them, though for now only in the preview build, not in shipping Safari.

The accordion stops guessing. It opens to the height its content needs, and no taller.

Four more CSS features land in the same build, alongside a run of grid sizing fixes:

size, min-size, max-size

Shorthands that set width and height in one declaration.

border-top-radius and kin

Round both corners on one side of a box at once.

symbols()

An anonymous counter style written inline, no separate rule needed.

link-parameters, param()

Pass values such as a color into a linked SVG image.

Grid sizing fixes

Tracks spanned by several items now share extra space the way the spec says.

Vercel added MAI-Image-2.6 and MAI-Image-2.6-Flash to its AI Gateway on Tuesday, October 13. Both generate from text or edit an existing image with up to five reference images, at sizes up to 1536 by 1536 pixels.

Vercel positions Flash for quick variations and the full model for final assets, and says both handle text rendering and targeted edits to layouts. Those are vendor claims with no prices attached; test the lettering on a real comp before trusting it with a client headline.

This page's own programme band runs on the pattern. A root opt-in lets sizes interpolate to auto, and the details-content pseudo-element wraps everything inside a details element after its summary. Collapse that wrapper to zero, open it to auto, and the browser draws the frames in between.

/* 1. let sizes animate to and from auto */
:root { interpolate-size: allow-keywords; }

/* 2. collapse the content wrapper */
details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size .32s ease,
              content-visibility .32s allow-discrete;
}

/* 3. open to the real height */
details[open]::details-content { block-size: auto; }

A browser that does not understand a line skips it and opens the panel instantly, the way details always has, so nothing needs a polyfill. To keep the opt-in local instead of page-wide, set the open size with calc-size(auto, size) on one element.

An October 13 entry in the Lovable changelog adds WebMCP tools to apps that switch on agent integrations, a day after the image markup update we covered. A browser-based agent can then act on the open page, completing a task or filtering a list, inside the visitor's own tab and signed-in session.

Tools that delete, pay, send, publish, or share are added only when the builder asks for them. WebMCP is the page-as-tool proposal this publication followed when Claude started reading page structure in August; here a builder turns it into a setting.