Simplest yet powerful Safari-only CSS hack

Table of contents

CSS hacks

Please keep in mind that this may not work in the future. Nothing is perfect, but it only gets better over time.

This is by no means the only way to apply browser-specific hacks via CSS, but just one simple trick I've found out that works on most of the browsers I've tested for my use case, which, in this case, is Safari. This tiny little trick should work on all Safari browsers, be it on macOS or iOS, with a minimum version of 9.

Show me the code, please?

/** Safari 9+. Even supported in Safari 13+! */
@supports (background: -webkit-canvas(squares)) {
  .selector {
    /** some styling applied */
  }
}

That's basically it. The crux of this hack is understanding the differences of CSS features supported in many different browsers. The simple way to get such information is by performing a comparison of supported features at caniuse.com. Simply select two or more browsers and find out their differences.

As you might already know, the Chromium browser was once a fork of WebKit before having its own rendering engine. So there are a couple of things you need to understand: certain CSS features do have prefixes, e.g. -webkit-*, -moz-*, -ms-*, and last but not least -o-*. Those were the days when each browser vendor had its own implementation of something and it was not standardized or adopted by the masses, which to some degree led to fragmentation. Not to mention, it has become the nightmare of many web developers these days.

As your mileage may vary, based on my use case, I just wanted to know what CSS features are widely adopted by Safari 9+ browsers while not by others, especially Chrome. By looking at the comparison table, there are indeed a couple of supported features we can make use of. Just to list a few: CSS filter() function for image values, CSS Canvas Drawings, and CSS Initial letter.

Initially, I was planning to use CSS Initial letter. However, I later learned that it is still under active development in Firefox. So, I had to turn away and look for something that works only on Safari. That's when CSS Canvas Drawings caught my attention, purely because of its name. I never knew that such a thing even existed in a browser. It seems like a perfect fit for several reasons:

  1. It is not part of any specification.
  2. It was removed in Chrome v47, which was around five years ago.
  3. No other browser has adopted this feature.
  4. I believe it was introduced in WebKit and has had great support for years.
  5. It can be feature-detected with pure CSS using the @supports at-rule, even in older versions of Safari.

With these valid points, I believe that it has undoubtedly become the first choice for feature detection in CSS when targeting only Safari browsers.

Demo time

Feel free to play with this Demo to verify the CSS hack. Happy hacking! 😜

Wrap-up

As more browser vendors work together to improve the web, many browser-specific hacks are going to fade away over time. In other words, many features are going to become more standardized, and old ones, including those that used to require browser-specific prefixes, will also go away. Expect more and more feature removals in web platforms, making it more challenging to remember CSS hacks. There's a saying I'd like to emphasize here: Feature detection instead of browser detection. I hope this helps you go even further in your journey of web development.

That's it. Have a wonderful day ahead, and I'll see you in the upcoming blog post. Peace! ✌️