Using as a polyfill with @supports

[notpushkin]

Hey, first of all thanks for your wonderful project!

I think usage example can be updated to something along the lines of:

// npm install --save text-security
@import "text-security/text-security.css";

.my-password-field {
  /* Use -webkit-text-security if the browser supports it */
  -webkit-text-security: disc;
}

@supports not (-webkit-text-security: disc) {
  .my-password-field {
    font-family: text-security-disc;
  }
}

This will allow skipping font download when browser supports -webkit-text-security: disc natively, and only use it for Firefox or older browsers.

Demo: https://jsfiddle.net/5wg3n7hu/

[noppa]

Interesting, I was under the impression that Chrome etc already wouldn't load the font if -webkit-text-security worked, since then the font would basically have no effect anyway. I'm pretty sure it did work like that at some point. But apparently not anymore anyway, so yeah that could be added to the readme.

Although I think it'd be better to flip the logic so that the supports condition will disable the font if the feature is supported. That way browsers that don't support the supports condition itself will still understand to load the font.

.password {
  width: 30ch;
  font-family: text-security-disc;
}

@supports (-webkit-text-security: disc) {
  .password {
    -webkit-text-security: disc;
    font-family: initial;
  }
}

Sidenote, I get that the fiddle is just a quick demo for this particular loading thing so it doesn't matter really, but perhaps worth mentioning here that the dist folder actually contains an old version of the font and should probably not be used in new stuff.