[wp-trac] [WordPress Trac] #54032: Improve admin-bar style tag with CSS variables

[WordPress Trac]

#54032: Improve admin-bar style tag with CSS variables
-------------------------+-----------------------------
 Reporter:  TBschen      |      Owner:  (none)
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  General      |    Version:  5.8
 Severity:  normal       |   Keywords:  needs-patch
  Focuses:  css          |
-------------------------+-----------------------------
 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))

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