Vue.js v-ifでCSSのサポート状況を条件に表示切替

Vue.jsでCSSのサポート状況を条件に表示を切り替えるために、CSS.supports()関数を使用しました。
但し、IEはこの関数自体をサポートしていないようです。

font-size-adjustは2022年6月現在、Firefoxでサポートされているようです。
ブラウザーが指定された CSS の対応状況を論理値で返します。

See the Pen Vue Switching the display depending on the CSS support status by blue moon (@blue-moon) on CodePen.

<template>
  <p v-if="adjustSupport">font-size-adjust: supported</p>
  <p v-else="!adjustSupport">font-size-adjust: not supported</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <p class="adjust">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </p>
</template>

<script>
export default {
  data() {
    return {
      adjustSupport: ""
    };
  },
  methods: {
    adjustSupportCheck($event) {
      this.adjustSupport = CSS.supports("font-size-adjust", "ex-height 0.5");
    }
  },
  mounted: function () {
    this.adjustSupportCheck();
  }
};
</script>

<style>
p {
  font-size: 1.4rem;
}
.adjust {
  font-size-adjust: ex-height 0.6;
}
</style>