1 Thing A Week 1 Thing
A Week

What's coming to Safari 17?

Week 294.0 — 12th June '23

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.

More from 1 Thing A Week
« WWDC 23: Apple Vision Pro, Mac Pro, macOS, iPadOS, iOS, tvOS, visionOS and watchOS Thoughts on Apple's plans for the 3rd Generation of CarPlay Spider-Man: Across the Spider-Verse »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 294.1 – Monday
    1. 20th Anniversary BBC talk recap bbcicecream.com
  2. 294.3 – Wednesday
    1. "They Cloned Tyrone" trailer Netflix on youtube.com
  3. 294.5 – Friday
    1. APIs for content sites must be free somebits.com
    2. Babyface Tiny Desk Concert NPR Music on youtube.com

Jump to notable items for Week #293, Week #295 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit