How to target Safari 16+ with a CSS @supports media query

Easiest method for targeting Safari with CSS in 2024.

• Updated Mar 4, 2024

Loading...

I just spent over 30 minutes looking for a way to target Safari with CSS media queries and could not find a reliable way that works with Safari 17 without also targeting Chrome.

Looking through the compatibility table on caniuse.com you can spot that Safari 16+ 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.

styles.css
1@supports (hanging-punctuation: first) and (-webkit-appearance: none) {
2 .safari-only {
3 background-color: red;
4 }
5}

Demo

If you open this page in Safari, the right column will be red.

All Browsers

Safari only

Nice, but why does it also target Arc, Chrome, Firefox, Brave, Internet Explorer, etc. on my iPhone or iPad?

Because iOS and iPadOS use the Mobile Safari rendering engine for all webviews. This means if you are using Chrome or any other “browser” on your iPhone it is still Safari under the hood.

That’s the case until these apps ship with their own rendering engines which will start being possible with iOS 17.4 for the EU.

get notified when i write something new or launch a new project right into your inbox.

or

subscribe on telegram

Thanks for your time & attention.