The big CSS overhaul in 3.3

Following the discussion at the UI irc meetup yesterday, I think it’s time to start planning for the CSS overhaul for 3.3. I’ve been dreaming to do that since before 2.7 came out and finally we seem to have the opportunity to accomplish it (no more IE6!). Some quick points:

  • The overhaul should be on the coding side, no changes (or only minimal changes) to the look and feel of the admin theme.
  • Don’t think we need to change the structural CSS. Yes, it’s overly complicated, that was needed to support IE6 and still have nice liquid layout and proper footer placement but it still works well.
  • I think we should start by redefining and perhaps abstracting as many CSS classes as possible and make them global, i.e. apply styling directly to the HTML elements using CSS 2.1 and CSS 3.0 selectors rather than using classes and IDs everywhere (as long as this doesn’t affect rendering speed in the browsers). We should also move these to global.css.
  • Don’t think we will need the CSS reset/normalization any more, perhaps only for IE7, so it can be moved to ie.css.
  • As IE7 seems to be the problematic browser now (from CSS point of view), I think we should concentrate on writing nice standard CSS and then adding any fixes for IE7 in ie.css.
  • We can add second conditionally loaded stylesheet for IE8 if necessary.
  • We can change the HTML as much as needed in order to apply the new styling.
  • We can change/adapt the JS too since in many cases it uses the same CSS classes and IDs that currently are used for styling.

Ideally we will end up with much shorter stylesheets (faster rendering in the browser) that will give any HTML loaded in the admin the look and feel of the theme without the need of any classes. Most importantly we should end up with nicely structured CSS that will be easy to change or extend in the future and would require minimal tweaks/additions when adding new components to the admin.

Browsers we will need to test in: Firefox 3.6? and 4.0; IE 7, 8, 9, 10 (eventually); latest Chrome and Safari, Opera 10? 11.

I know this will be a lot of work so the sooner we have a working plan, the better. Comments, suggestions, thoughts are welcome!