In Safari 27.2, a Grid Lanes tie keeps the next card next door

• Shipped October 26
• Source WebKit

Grid Lanes gets a new name for its tie rule, and WebKit wants it raised

CSS Grid Lanes, the masonry-style layout that shipped in Safari 26.4, places each new item in the lane whose content ends highest. The CSS Working Group renamed the property that loosens that rule from flow-tolerance to fit-tolerance, and Safari 27.2 ships the new name with the old one kept as a deprecated alias.

Lanes that end within the tolerance count as tied, and the browser takes the first. The default is 1em, so any real difference in card height sends the next item across the page, and keyboard focus jumps with it.

So most of the time, you should increase this number significantly.

Jen Simmons, WebKit

How far to raise it depends on how much your card heights vary. WebKit's Field Guide to Grid Lanes lets you drag the value and watch items settle.

.board {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.25rem;
  fit-tolerance: 6rem;  /* was flow-tolerance */
}

Default

1em

Old name

Still works as a deprecated alias; Web Inspector marks what to change

Tie rule

Lanes within the tolerance are equal, the first one wins

• Shipped October 26
• Source WebKit

The picked option in a select gets its own pseudo-element

Customizable Select landed in Safari 27.0, and the version this publication covered in September needed a selectedcontent element to style the chosen value. Safari 27.2 adds the ::field-content pseudo-element, which styles that text directly on a select set to the base-select appearance.

The default styles moved too. The button centres its contents more reliably, the picker icon stays visible because the button now spaces itself with flex, and a tall picker no longer renders partly off screen, because Safari applies safe alignment to keep it in view.

select, ::picker(select) { appearance: base-select; }
select { text-overflow: ellipsis; }  /* the picked text inherits it */
select::field-content { font-weight: 600; letter-spacing: .02em; }

• Beta October 15
• Stable November 3
• Source Chrome Status

Chrome 157 beta sets corner radius and shape in one line

The Chrome 157 release notes list a corner shorthand, per-corner versions such as corner-top-left, and edge versions such as corner-top and corner-block-start. Each sets border-radius and corner-shape together, the shaped-corner property an earlier issue walked through.

The same beta lets text-overflow take a string, so a clipped line can end in a word like "(more)" instead of an ellipsis. Test both in beta before stable lands, and keep a plain border-radius above the shorthand so browsers without it still round the box.

.ticket {
  border-radius: 1.5rem;            /* fallback */
  corner-top-right: 1.5rem scoop;   /* radius and shape at once */
}
.teaser {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: " (more)";       /* custom clip marker */
}

Build the blue ribbon comparison page

Build a single-page "X vs Y" comparison landing page for two competing products, styled as a county fair judging sheet. It must work as a real page a client would ship.

Structure, top to bottom:
1. Top nav on the page ground: brand wordmark left, three text links right.
2. Hero, two columns. Left: a round rubber-stamp masthead (128px circle, double navy ring, rotated -9deg) holding the page number, date and read time, beside a short kicker; then a condensed headline (max 14 characters per line, about 80px), a two-sentence deck, a solid navy button and an underlined text link. Right: a cream "exhibit board" card with three portrait images in a row as a step-by-step sequence, each with a "Step N" mono label and one plain caption line in HTML.
3. The scorecard, on a cream sheet: two entry tags (bordered cards with a small round pin, product name in condensed caps, a dt/dd list of status, date, notes), a segmented radio filter (All rows, Product A, Product B) with a live "Showing N of N" count, then a real table. Columns: Class, Product A, Product B, Ribbon. Each cell is a short plain sentence; missing features say "Not in this release" in muted italic, never a blank or a cross. The Ribbon column holds a rosette verdict badge (a CSS concentric circle with a notched tail, ribbon blue for a winner, white with navy for a tie) plus the winner's name or "Tie".
4. A navy art-direction band with the page's name, an italic one-liner, a short glossary paragraph and vocabulary tags.
5. Detail sections as cream cards stacked with 64px gaps so the ground shows between them. Each card has a pinned header tab hanging over its top edge (rosette plus a mono label), a mono meta line, a condensed h2, body text, a dark code block or a dt/dd facts table, and at most one italic pullquote under a 2px blue rule.
6. A design-move card with a 2px navy border, numbered rules and a code snippet; a prompt card with a copy button; sources list; three nav tiles; colophon.

Filtering: native radio inputs and :has() hide the other entry's rows with no script. On screens under 700px the table becomes stacked cards, each cell labelled with its column name from a data-label attribute.

Palette: tangerine #EE8A3C ground with a cream gingham check (two 50% stripe gradients at 20% opacity, 36px tile); cream #FBF3E2 sheets; navy #172452 ink; ribbon blue #1D47C2 kept for verdict badges, links and the pullquote rule; brown #6A5444 for muted labels.
Type: Mohave 500/700 for display and labels in caps (condensed wood-type gothic), Vollkorn 400/600 with italic for reading, Ubuntu Sans Mono 500 for small labels and code.

Guardrails: body text at least 18px with 1.65 line height and 60-75 character lines, never justified; every small label meets WCAG AA on the surface it sits on; no text on the gingham smaller than 18px; images carry no readable text, no logos, no watermarks; no neon, glow, gradient text or purple-blue gradients; radius 12-14px on sheets, 6-10px on controls, pill shapes nowhere; one shadow at most; hover and focus states on every link, button and filter label with 150ms easing and a prefers-reduced-motion guard.

Sources

• WebKit, October 26, 2026WebKit Features for Safari 27.2
• WebKitField Guide to Grid Lanes
• WebKitIntroducing CSS Grid Lanes
• Chrome for Developers, October 15, 2026Chrome 157 beta
• Chrome StatusChrome 157 release notes