How to target Safari with a CSS @supports media query

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.

1@supports (hanging-punctuation: first) and (font: -apple-system-body) 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.

Using this method with Tailwind CSS v3

You don't have to be limited to just CSS. Extending your Tailwind config with a custom plugin that adds a safari-only: variant to your Tailwind config is pretty easy:

1module.exports = {
2  theme: {
3    // ...
4  },
5  plugins: [
6    function({ addVariant }) {
7      addVariant('safari-only', '@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)');
8    },
9  ],
10};
11

Using this method with Tailwind CSS v4

Tailwind v4 uses a CSS-native @custom-variant directive instead of JavaScript plugins. Add this to your main CSS file (e.g., app.css or globals.css):

1@custom-variant safari-only {
2  @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
3    @slot;
4  }
5}

The @slot marker indicates where the utility styles get inserted. Usage is the same as in v3:

1<div class="safari-only:bg-red-500">Safari only</div>

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

Because iOS and iPadOS (and visionOS) 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.

Apple is finally allowing full versions of Chrome and Firefox to run on the iPhoneThe EU browser wars are about to take off in a big way.www.theverge.com/2024/1/25/24050478/apple-ios-17-4-browser-engines-eu