autofill not being prefixed

[alan-agius4]

 input {
   &::autofill {
       box-shadow: 0 0 0px 1000px #fff inset;
   }
}

autofill are not being autoprefixed.

browsers: "last 2 versions"

[ai]

Do we have any W3C spec about ::autofill? Seems like right not it is only a :-webkit-autofill.

[alan-agius4]

Seems like it's something in CSS4
https://wiki.csswg.org/spec/css4-ui#more-selectors
So I guess it's rightly so that it's not prefixed.

[ai]

Could you help me and make PR to Can I Use with ::autofill support data?

[yisibl]

This is not in the CSSWG draft.

https://drafts.csswg.org/css-ui/
https://drafts.csswg.org/css-ui-4/

[ai]

@alan-agius4 sorry, there is no ::autofill yet. Feel free to reopen issue when Firefox will implement :-moz--autofill.

[Aljullu]

It looks like :autofill has been standardized now:

• https://wiki.csswg.org/spec/css4-ui#more-selectors
• https://html.spec.whatwg.org/multipage/semantics-other.html#selector-autofill
• https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill

Should this issue be reopened @ai?

[ai]

Cool! Seems like we have a support chart on MDN (which we can use at Can I Use). Can somebody send PR?

[yisibl]

w3c/csswg-drafts#5775 (comment)

[yisibl]

https://bugs.chromium.org/p/chromium/issues/detail?id=1164311

[Semigradsky]

The same as for #1374. The data is available in mdn-data but not in caniuse-db.

[roypearce]

Is this sufficient to add support? https://caniuse.com/mdn-css_selectors_autofill

[ai]

@roypearce nope, this data is not available in caniuse-db npm package

[lukewarlow]

Potentially worth hardcoding data in like we did for file-selector-button and updating it as and when stable support is added.

In the meantime it could even be worth adding in a blanket prefix rule that automatically generates the WebKit prefixed version. That way you get the prefix, ensuring your code works in all modern browsers.

This will be supported in:

Chrome 96: https://www.chromestatus.com/feature/5592445322526720

And is already supported in:

Firefox 86: https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill

Safari TP 129: https://webkit.org/blog/11951/release-notes-for-safari-technology-preview-129/ - presumably will come in Safari 15.1 or 15.2

[ai]

@lukewarlow maybe we can improve caniuse-lite scripts and add custom files there?

Send PR to https://github.com/browserslist/caniuse-lite with a script (somewhere in check.js) which will use MDN data npm package and generate small JSON just for autofill support data.

[lukewarlow]

@ai made a start on it browserslist/caniuse-lite#86

[ai]

Fixed by #1430

[ai]

:autofill was released in 10.4.