Improve toolbar CSS

[swissspidy]

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.

[afercia]

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)

[swissspidy]

Sounds good to me! Spring cleaning ahoy :)