Make WordPress Core

Opened 5 months ago

Last modified 5 months ago

#54032 new enhancement

Improve admin-bar style tag with CSS variables

Reported by: TBschen Owned by:
Milestone: Future Release Priority: low
Severity: normal Version:
Component: Toolbar Keywords: needs-patch 2nd-opinion
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))

Change History (1)

#1 @sabernhardt
5 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 5 months ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.