-webkit-appearance rule should be removed from the CSS

[laurent22777]

The -webkit-appearance rule used in customize-control.css is not supported properly on all browsers and in some cases might make certain layouts impossible. Please see the MDN article about it:

​https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

As mentioned there, even the "none" value will have different behavior on different browsers. In my case, it forces the element to wrap to the next line on Chrome, and the only way to go around this is to delete the rule directly in the WordPress CSS.

[desrosj]

Hi @laurent22777!

Welcome to Trac! My apologies that it took so long to receive a response.

Are you still experiencing this issue? Can you provide some screenshots and code to help others reproduce the issue?

Ticket this was introduced in: #31336

[laurent22777]

Well unless you lend me your time machine I can't provide screenshots of something I was working on three years ago :-)

All I know is that for sure the rule "-webkit-appearance" should be removed from the CSS because it doesn't work well, and once it's set it cannot be overridden by the user. As the post said, my fix was to remove it directly from the WordPress CSS.

[celloexpressions]

Does anyone regularly working with core CSS have input on the use of webkit-appearance? Can/should it be removed from any uses in core?

[desrosj]

Given the data shown on ​Can I Use, I'm inclined to say these should not be removed. On this page, it's noted that all versions of Safari on desktop and on iOS require the -webkit- prefix for the appearance property to allow for partial support.

Edge, Chrome (-webkit- prefix), and Firefox (-moz- prefix) are no longer required for the appearance property in the versions supported by today's versions of WordPress.

The linked developer documentation above now includes the following clarification:

The differences are smaller in the newest browsers.

Browsers seem to have made the behavior of this property more consistent. So I'm not sure this is really an issue worth addressing anymore. I'm suggesting this one is a close, but would still like someone with more experience using the property to weigh in.

[desrosj]

I'm also going to move this to the General component. The property is used throughout Core, and a coordinated effort would be needed if it should be removed from Core's CSS.