[wp-trac] [WordPress Trac] #52623: Proposal: Add CSS variable for admin-bar height to core.

[WordPress Trac]

#52623: Proposal: Add CSS variable for admin-bar height to core.
-------------------------+-----------------------------
 Reporter:  nico23       |      Owner:  (none)
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Themes       |    Version:  trunk
 Severity:  minor        |   Keywords:
  Focuses:  ui, css      |
-------------------------+-----------------------------
 I saw this is the 2021 theme. Thought it a great use of a CSS variable.
 Found out it did not work as expected and fixed it in: #52564

 Could file this under Plugins/Themes/Toolbar not sure.

 I initially thought it was already from core as I stumbled upon it in the
 devtools. I think it would be great for all plugin and theme developers to
 establish a variable in core we can use.

 The patch I will be adding through GitHub will just add the variables in
 the admin-bar.css file. However, this will **require** the use of a `,
 0px` like default when using the variable for CSS to work when the admin
 bar is not active.
 {{{
 .example-fixed-element {
         position: fixed;
         top: calc(.5rem + var(--wp-admin-bar-height, 0px));
 }
 }}}

 It could be made universally usable without a default fallback value with

 {{{
 :root {
    --wp-admin-bar-height: 0px;
 }
 }}}

 But because the `admin-bar.css` only loads when logged in it would make no
 sense to add it in that file.

 Also in theory the variable could actually be used for the admin bar.css.
 Not sure it that makes sense, there is much more happening than just
 increasing the height in the media query. In theory the negation of the
 value and calculating other values in the file could be based on this
 variable.

 There are 7 occurrences of the 32px/64px in the file. And it seems some
 other values would have to change with it. If it was a changeable value.
 The value could be like a base to dynamically control all elements sizes
 in the navbar.

 I also do not know if WP has some aggressive backwards combat rules. CSS
 vars are supported by 95% of used browsers according to can-i-use
 https://caniuse.com/?search=variables.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/52623>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform