Safari 16.5 – 17.2: CSS declarations incorrectly ignored when in a style block with nested @supports

[nilaallj]

Implementation bug in Safari 16.5 – 17.2:

div {
  color: blue;

  @supports (text-box: trim-both) {
    line-fit-edge: cap alphabetic;
  }
}

In the example above color: blue gets ignored by the browser, and so would any other declaration in a style block with a nested supports query. Authors should therefore avoid using nested supports queries if support for Safari 16.5 – 17.2 is important. I suggest adding this to the CSS Nesting page.

Webkit pull request fixing the issue: WebKit/WebKit#21726

The release notes for Safari 17.3 confirms the issue is resolved: https://developer.apple.com/documentation/safari-release-notes/safari-17_3-release-notes