Make WordPress Core

Opened 23 months ago

Last modified 9 months ago

#46003 new enhancement

Improve toolbar CSS

Reported by: swissspidy Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: needs-patch
Focuses: css Cc:


The admin toolbar has been around for years and has been iterated on many times. Its CSS file is now over 1000 lines long and weighs 24 KB. Even minified it's still over 20 KB, which I think is way too much. Given that the admin bar is loaded most of the time for many users, this just slows things down unnecessarily.

I believe there's an opportunity to clean up the CSS file, get rid of legacy selectors targeting things like IE 7 and IE 8, and perhaps even make it DRY by leveraging Sass.

It should be possible to reduce the size of the admin bar CSS without reducing functionality or usability.

Change History (5)

#1 @swissspidy
23 months ago

  • Summary changed from Improve toobar CSS to Improve toolbar CSS

#2 @afercia
23 months ago

I'll miss some of the most delicious CSS selectors in that file, e.g.:

#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus

Jokes apart, I was considering to open a ticket to get rid of all the CSS targeting IE 6 – IE 10, get rid of ie.css and the conditional comment. Thoughts?

(Yes, WordPress is still targeting IE 6 and IE 7, see the "asterisk hack" * html in ie.css)

#3 @swissspidy
23 months ago

Sounds good to me! Spring cleaning ahoy :)

#4 @desrosj
22 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

#5 @isabel_brison
9 months ago

  • Focuses css added
Note: See TracTickets for help on using tickets.