luci-theme-material: change -webkit-appearance

[owlsy]

Notes

• Replace -webkit-appearance with appearance (or removed if appearance is already present), as it is a non-standard and has since been succeeded by 'appearance', accepted by all current browsers.

[systemcrash]

I think that for this change, we should retain the -webkit variant, since it is backwards compatible. The appearance property is available in current browsers, but 'current' is very recent.

In the worst case, let's say we accept this change and drop the -webkit variant - how does the layout look if you completely remove this property (i.e. a 'browser that doesn't understand appearance')?

Same comment to the other -webkit PRs

[owlsy]

This is true, appearance was only "baseline" supported as of March 2022. (source: notes)

If -webkit-appearance was replaced with appearance and someone was using an unsupported WebKit-based browser released prior to March 2022, the layout itself wouldn't change, but the appearance of form elements might be overlapped by the native element.

For luci-theme-material, I could not see anything visually different.

Noted though that this test is by removing all -webkit-appearance and appearance from the CSS entirely on Safari Version 26.4 (21624.1.16.11.4), and then on Chromium Version 103.0.5046.0 (Developer Build) (arm64), released 2022-05-06. I wasn't able to use LuCI on Chromium Version 69.0.3497.0 (Developer Build) (64-bit), released 2018-07-20 to test any older due to script issues loading content.

I'll check the other themes now and comment the results on those pull requests.

[systemcrash]

It seems ok - although we should still keep the older -webkit variant around for a while before relying exclusively on the appearance variant (for all of your -webkit PRs)