Make WordPress Core

Opened 22 months ago

Closed 11 months ago

Last modified 11 months ago

#54032 closed enhancement (maybelater)

Improve admin-bar style tag with CSS variables

Reported by: tbschen's profile TBschen Owned by:
Milestone: Priority: low
Severity: normal Version:
Component: Toolbar Keywords: has-patch
Focuses: css Cc:


Working with the frontend admin-bar can be annoying in some layouts, at least knowing its height can be beneficial though.

What currently looks like this:

<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
	html { margin-top: 32px !important; }
	* html body { margin-top: 32px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 46px !important; }
		* html body { margin-top: 46px !important; }

can be turned into something like this (now that IE 11 support has been ditched with 5.8)

<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
	:root { --wpadminbar-height: 32px; }
	html { margin-top: var(--wpadminbar-height) !important; }
	* html body { margin-top: var(--wpadminbar-height) !important; }
	@media screen and ( max-width: 782px ) {
		:root { --wpadminbar-height: 46px; }

The benefit is that the height can now be directly accessed by stylesheets like this:

.example {
	height: 100% - var(--wpadminbar-height, 0px);

0px is the fallback in case the variable is not defined (i. e. there is no admin-bar))

Attachments (1)

54032.diff (597 bytes) - added by sabernhardt 11 months ago.

Download all attachments as: .zip

Change History (3)

#1 @sabernhardt
22 months ago

  • Component changed from General to Toolbar
  • Keywords 2nd-opinion added
  • Milestone changed from Awaiting Review to Future Release
  • Priority changed from normal to low
  • Version 5.8 deleted

Thanks for the ticket!

The --wp-admin--admin-bar--height custom property was just added for (newer) themes with ticket:52623, to be available with WordPress 5.9.

On that ticket, I discouraged putting the variable in the core style tag now because it affects the front end (IE support was dropped for the admin). Browser support is not quite as much of a concern if a core change would render the toolbar itself more difficult to use in certain old browsers. However, if the toolbar height variable defines that top margin, the top 32-46 pixels of a site could be unusable for some visitors when they log in.

I'll leave this ticket open to consider that change later (unless closing as "maybe later" makes more sense).

Last edited 22 months ago by sabernhardt (previous) (diff)

11 months ago

#2 @sabernhardt
11 months ago

  • Keywords has-patch added; needs-patch 2nd-opinion removed
  • Milestone Future Release deleted
  • Resolution set to maybelater
  • Status changed from new to closed

I added a patch in case it's a good idea to use it later, but I still do not feel comfortable recommending this change anytime soon. The decision was made for WordPress 5.9, so I'm closing the ticket for now.

Last edited 11 months ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.