CSS @supports

Nowadays when we implement web service, we need to consider the browser compatibility including desktop and mobile devices'.

Among the mordern major browsers, Safari is a bit different than other browsers. If something is not working, most of the time it's because Safari doesn't support it. Safari in mobile device is another story. It's different from the desktop Safari browser. It's not just about CSS style, but Web APIs as well.
In this article, we want to introduce CSS function called @supports so that we can handle the browser compatibility issue.

The way of using it is simple enough. For example, The mobile Safari browser version 14 doesn't support the unit svh and svw. Thus, we can check if the browser supports these units and if not, we can let the browsers use alternative that we define in the style.

.container {
  width: 100svw;
  height: 100svh;
}
@supports not(width: 100svw) {
  width: 100%;
  height: 100%
}

In my case, I used gap in style, but it is not supported from the old Safari browser, so I used SCSS's mixin to create a function using @supports to use in the style sheet instead of using gap.

@mixin row-gap($num) {
  row-gap: $num;
  // translate and gap seems to have the same level of
  // support so instead of using gap, I used translate since
  // it's working properly.
  @supports (not (translate: none)) {
    & > :not(:last-child) {
      margin-right: $num;
    }
  }
}

Please note that & > :not(:last-child) should be defined to replace the gap function. > sign allows to apply the gap only to the direct descendants, and :not(:last-child) allows to apply the margin between elements.

To use the above mixin, we should import it from the style file and use it instead of using row-gap.

.container {
  @includes column-gap(16px);
}