WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 12 days ago

#41580 assigned enhancement

Review the usage of the `::-moz-focus-inner` CSS fix for the buttons extra padding in Firefox

Reported by: afercia Owned by: viktorfroberg
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots good-first-bug has-patch needs-refresh
Focuses: ui Cc:

Description

For a number of years, Firefox used to set some extra padding on the buttons (or inputs of type button/submit/reset). To address this, WordPress uses a known fix targeting the proprietary Firefox pseudo element ::-moz-focus-inner.

Seems something has changed recently and starting with Firefox 53, FF doesn't apply the extra padding any longer. I think the relevant Bugzilla ticket Firefox 53 release notes, though.

Testing a bit on Windows, in the screenshot below:

  • on the left, Firefox 48: buttons without and with the CSS fix: there's a clear size difference
  • on the right: Firefox 54: buttons without and with the CSS fix: no size difference

https://cldup.com/7AkzV22mi3.png

Codepen available here: https://codepen.io/afercia/full/Gvrzwz/

Seems these rules used across the admin stylesheets could be simplified a bit. The only part that needs to stay is border-width: 0; or, maybe better, border: 0; which is necessary on Windows to remove the dotted line on :focus:

https://cldup.com/aynypgSW6Y.png

This could be also a good opportunity for some clean-up. For example, seems to me in press-this.css there are two identical rules.

Attachments (1)

41580.patch (1.9 KB) - added by ViktorFroberg 7 months ago.
Remove duplicate css rule in press-this.css, remove padding: 0, change border-style: none and border-width: 0 to border: 0 in all ::-moz-focus-inner rules.

Download all attachments as: .zip

Change History (4)

@ViktorFroberg
7 months ago

Remove duplicate css rule in press-this.css, remove padding: 0, change border-style: none and border-width: 0 to border: 0 in all ::-moz-focus-inner rules.

#1 @jaredcobb
6 months ago

  • Keywords has-patch added

#2 @DrewAPicture
2 weeks ago

  • Owner set to viktorfroberg
  • Status changed from new to assigned

Assigning to mark the good-first-bug as "claimed".

@afercia Could you please review the patch? :-)

#3 @afercia
12 days ago

  • Keywords needs-refresh added

The patch should be refreshed as Press This is now a plugin and not part of core any longer. Also, files from external libraries such as jquery-ui-dialog.css shouldn't be modified.

Note: See TracTickets for help on using tickets.