Andrew Ozz 4:04 pm on April 27, 2011  

The big CSS overhaul in 3.3

Following the discussion at the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. irc meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. yesterday, I think it’s time to start planning for the CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. 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 HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. 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!