Update CSS for ::-moz-placeholder
#69311
Labels
Browser Issues
Issues or PRs that are related to browser specific problems
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
[Status] In Progress
Tracking issues with work in progress
[Type] Enhancement
A suggestion for improvement.
Description
Discovered while working on #60275
On Sep 26, 2024 Firefox iup[updated the built-in CSS ruleset for ::-moz-placeholder in this commit:
mozilla/gecko-dev@2af3322
Related Bugzilla ticket:
https://bugzilla.mozilla.org/show_bug.cgi?id=1470025
Firefox was the only browser that used to set an
opacity: 0.54;
to the native placeholder attribute text. For this reason, the editor and Core stylesheets override the built-in value withopacity: 1;
.Firefox now uses only a
color
property:color: color-mix(in srgb, currentColor 54%, transparent);
While the visual styling is equivalent, the new Firefox implementation makes the WordPress opacity override no longer necessary.
Setting just the
color
property overrides the Firefox native transparency implemented viacolor-mix
.While it's a minor change, this allows to remove a few no longer necessary CSS properties from the editor and Core.
Cc @joedolson to consider a Trac ticket for Core.
Cc @carolinan to consider an audit of the bundled themes stylesheets.
Note:
You can directly access the built-in Firefox
forms.css
stylesheet by entering this resource URL in the Firefox address bar:resource://gre-resources/forms.css
Step-by-step reproduction instructions
The editor CSS to normalize the placeholder attribute text color is used in a dew places e.g. input controls. The easiest way to test is by switching the editor to 'Code editor'.
about:config
in the address bar and hit the Enter key)devtools.inspector.showAllAnonymousContent
and set it totrue
.opacity: 1;
set by the editor on the placeholder text and unset it.Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.
The text was updated successfully, but these errors were encountered: