What's coming to Safari 17?

I already had view transitions on a list of HTML and CSS things I need to try out some more and now that list has grown huge after the various Safari announcements at WWDC last week.

The release notes for Safari 17 are long and there's a great video hosted by Jen Simmons on what's new in CSS.

So much goodness coming to CSS and although it will take time for adoption to be high enough that it's useable I'm tempted to give SkeletonCSS an upgrade and to start leveraging some of these features in the near future.

Safari 17 highlights

Here's a run down of my favourite items from the release notes:

• HTML:
  • <modal> element
  • popover attribute
• CSS:
  • Masonry layouts
  • 'margin-trim: block' to improve spacing in boxes where padding and margins might double up
  • LCF, OKLCH, LAB and OKLAB for improved colours in Safari
  • color-mix to, yes, mix colours in CSS
  • :user-invalid pseudo-class
  • :dir pseudo-class for targeting LTR or RTL preference
  • New line-height attributes for better typography
  • 'text-box: trim' to help line up elements without having to worry about text glyphs
• Updated developer tools
• Block known trackers and fingerprinting (private browsing)

Chrome's dev tools are the only reason I keep it active, I much prefer Safari overall but it's dev tools leave a lot to be desired. I don't think Safari will take the place of Chrome completely with Safari 17, but the gap is hopefully growing closer.

Typography is where SkeletonCSS might get the most benefit from all these changes. I'm tempted to go all in when Safari 17 ships for real and get it aligned with all the new trim features while creating solid building blocks for typography. This has been the area where I really struggle to work in an app like Sketch and then trying to recreate in the browser. These subtle differences can really throw me off.