Improve admin-bar style tag with CSS variables

[TBschen]

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; }
	}
</style>

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; }
	}
</style>

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))

[sabernhardt]

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).

[sabernhardt]

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.

[letraceursnork]

@sabernhardt well, about fallback:

1. We can add smth like that:

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

2. CSS-variables usage is ​96.33%+ (by 01 August 2023)

[sabernhardt]

using wp_add_inline_style