Simplest Yet Powerful Safari Only Css Hack

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

This is by no means the only way to apply browser specific hack 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, Safari. This tiny little trick here 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 by understanding the differences of CSS features supported in many different browsers. The simple way of getting 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 have already known that 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 that certain CSS features do have prefixes, e.g. -webkit-*, -moz-*, -ms-*, and last but not least -o-*. Those are the days where each browser vendor has its own implementation of something and it is not standardized nor adopted by the masses which at some degree led to fragmentation, not to mention, it becomes the nightmares of many web developers these days.

As your mileage might vary, based on my use case, I just wanted to know what are the CSS features that are widely adopted by Safari 9+ browsers while not 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 going to use CSS Initial letter but later learnt that it is actually under active development in Firefox. I have to turn away and look for something that is Safari-only! CSS Canvas Drawings is what caught my attention, just because of its name. I never knew that was even a thing in a browser. It seems like a very good fit due to several reasons:

  1. It is not part of any specification.
  2. It has been removed as of Chrome v47, which was around 5 years ago.
  3. No other browsers adopts such feature.
  4. Which I believe it was introduced in WebKit back then and has great support for years.
  5. It can also be feature-detected with pure CSS with the help of @supports at rule even in older Safari.

With these valid points, I guess it has undoubtedly become the first choice when comes to feature detection in CSS to target only the Safari browsers.

Demo time

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

Wrap Up

Many browser-specific hacks are going to fade away over time as more browser vendors are working together to improve the web. In other words, many features are going to be more standardized and the old ones including those used to require browser-specific prefixes are too going away. Expect more and more feature removals in the web platforms so that is not easy anymore to just remember the CSS hacks. There is always one saying I'd love to emphasize here: Feature detection instead of browser detection. Hope this helps you to go even further in your journey of web development.

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