Make WordPress Core

Opened 5 years ago

Last modified 4 years ago

#46003 new enhancement

Improve toolbar CSS

Reported by: swissspidy's profile 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
5 years ago

  • Summary changed from Improve toobar CSS to Improve toolbar CSS

#2 @afercia
5 years 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
5 years ago

Sounds good to me! Spring cleaning ahoy :)

#4 @desrosj
5 years ago

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

#5 @isabel_brison
4 years ago

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