Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 12 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:

Description

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

Attachments (1)

54032.diff (597 bytes) - added by sabernhardt 2 years ago.

Download all attachments as: .zip

Change History (4)

#1 @sabernhardt
3 years 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 3 years ago by sabernhardt (previous) (diff)

@sabernhardt
2 years ago

#2 @sabernhardt
2 years 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 2 years ago by sabernhardt (previous) (diff)

#3 @letraceursnork
12 months ago

@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>
  1. CSS-variables usage is 96.33%+ (by 01 August 2023)
Last edited 12 months ago by letraceursnork (previous) (diff)
Note: See TracTickets for help on using tickets.