How to target Safari with a CSS @supports media query

For the full reading experience, visit https://wojtek.im/journal/targeting-safari-with-css-media-query. Yes, this also works with Safari on macOS 27, iOS 27, iPadOS 27, and visionOS 27. I just spent over 30 minutes looking for a way to only target Safari with CSS media queries and could not find a reliable way that works with Safari without also targeting Chrome. Looking through the compatibility table on caniuse.com you can spot that Safari 16 and above has a unique property which is not supported by Chrome or Firefox called hanging-punctuation. Using that property and -webkit-appearance we can target Safari specifically until any other browser decides to support it. @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) { .safari-only { background-color: red; } } ✦ 2024 Update: You can also chain it with font: -apple-system-body to make this more bulletproof. Thanks to Saber Hayati for the tip. Demo If you open this page in Safari, the…