New Safari developer tools provide insight into CSS Grid Lanes

Safari shows off slick grid layout tools — devs clap, snark, and side-eye JS

TLDR: Safari adds Order Numbers to its Grid Inspector to make new “Grid Lanes” layouts easier and more accessible. Comments praise the polished tools but throw shade at Safari’s JavaScript debugging, landing on cautious optimism: better layouts today, still waiting on stronger JS support tomorrow.

Safari’s latest sneak peek brings Grid Lanes into the spotlight and adds shiny Order Numbers to the Grid Inspector, and the comments wasted no time turning it into a mini soap opera. One camp is cheering that “Safari has the best dev tools,” while the other rolls eyes with a “yeah, until you touch JavaScript.” It’s equal parts applause and roast, a classic Apple moment where polish meets playful shade.

So what’s the big deal? Imagine a photo wall where pics of all shapes snap together neatly without awkward cropping. Grid Lanes lets content flow across columns like a zig-zag, and Order Numbers show the sequence people actually tab through—crucial for keyboard navigation and screen readers. Devs say this makes accessibility less guesswork and more visible. Overlays, color tweaks, and smooth performance round it out, with fans calling Safari’s inspector “buttery” compared to the competition. Skeptics fire back with “participation trophy” jokes and remind everyone JavaScript debugging still feels like the boss fight Safari hasn’t beaten. Still, the vibe is cautious optimism: steady progress, fewer layout headaches, and cleaner galleries. Try it in the Safari Technology Preview, if you’re ready for neat grids and messy comments.

Key Points

  • Safari Technology Preview 234 implements CSS Grid Lanes, enabling masonry-style layouts aligned by columns or rows.
  • Grid Lanes flows content perpendicular to the defined layout shape, unlike Multicolumn or Flexbox sequential column filling.
  • Safari’s Grid Inspector adds “Order Numbers” to visualize item sequence for Grid, Subgrid, and Grid Lanes.
  • Order Numbers help assess accessibility and interaction patterns, informing flow-tolerance adjustments in Grid Lanes.
  • Safari’s Grid and Flexbox Inspectors include multiple polished features, support multiple overlays, and improve layout debugging clarity.

Hottest takes

“best developer tools” — etchalon
“steady progress on being a decent browser” — gabeidx
“pat on the head, Safari” — dekoidal
Made with <3 by @siedrix and @shesho from CDMX. Powered by Forge&Hive.