title: How do you change css only for safari on mobile
body: <p>I'm trying to use a class that will only be active for safari browsers on ios, but unfortunately it also works for firefox on ios.</p>
  <p>I've tried these solutions:</p>
  <pre><code>@media not all and (min-resolution:.001dpcm)
  { @supports (-webkit-appearance:none) and (stroke-color:transparent) {
      .safari-only {
         height: 85vh;
     }
  }}
  </code></pre>
  <pre><code>_::-webkit-full-page-media, _:future, :root .safari-only {
    height: 85vh;
  }
  </code></pre>
  <pre><code>@supports (-webkit-touch-callout: none) {
      .safari-only {
          height: 85vh;
      }
  }
  </code></pre>
  <p>but they all get applied in the firefox browser as well</p>