Autoprefixer: HTML5 Input range styling

[jasonkuhrt]

It seems that autoprefixer could help here.

When styling HTML5 range input we have various pseudo selectors:

::-webkit-slider-thumb
::-moz-range-thumb
::-moz-range-track

I haven't done the careful research about how to maximize compatibility etc. and other possible selectors, but just wanted to first get this out and see if there's something to be done or not.

[jasonkuhrt]

Also one reason this might not be supported is if there is no spec for it but rather just vendor proprietary selectors etc.

[ai]

Main problem here, that we absolutly didn’t know unprefixed version of this selectors. Autoprefixer is developed to be able to remove Autoprefixer and future and your CSS will be worked.

There is only ony exception, ::placeholder. But we use most likely variant.

[ai]

Try PostCSS and create polyfill.

[fabb]

postcss-input-range does the trick.

[ai]

Are we sure about unprefixed version?

[Dan503]

It looks like the plugin fabb linked doesn't output any unprefixed code in the final CSS.

It seems to introduce it's own syntax and split it into the various browser specific prefixes. It removes it's proprietary CSS from the output.

FYI, this is a good thing. It means that the pseudo selectors fabb used could still be turned into a real W3C spec one day.