As I've now started to look at how some of my sites work in IE7, I discover that the main thing that has gone wrong is that the hack where you prepend CSS selectors with
* html is now disabled. Of course I could have found this out six months ago but frankly, learning the particular quirks of an as-yet-unreleased and sickeningly broken user agent is not something I am going to invest time in.
Obviously, this means that for any site that IE7 breaks, it is failing on the standards-compliant CSS. But equally, as I noted before, not as many sites break as was expected. So that's pretty good news.
But for the sites that do break, and future sites in general, the situation is a mess. It's now necessary to split IE7 styles into different, conditionally included files, either by selecting on UA (which is unreliable) or use a gut-wrenchingly sickening IE misfeature called "conditional comments". IE6 rules need to be moved too, as IE7 will have significant common ground with IE6 and you don't want to have to maintain two copied of any rule that is shared.
Having rules split between different files makes it harder to work with, because in CSS you need to literally compare selectors to work out the precedence.
* html is much easier to work with because you can place your IE rule right next to your real browser rule, and easily cross-reference the differences. Or if you change the real-browser rule, you can also amend the IE rule at the same time. More annoyingly, if you already have a tidy collection of CSS stylesheets importing one another with the
@import statement, you have to either collect your IE styles in one file, or duplicate the tree for IE. Neither is very maintainable. The
@import statement is not very useful anyway though, because CSS's precedence rules don't allow CSS to be modularised in an elegant way.
In Microsoft's defence, they are looking for a painless route to standards compliance that in all honestly does not exist. But I apportion the blame entirely to them, for two reasons. First, it was they who let the situation regarding standards compliance get so out of hand first; in effect, they are five years too late in starting to take this course of action. Secondly, bundling IE with Windows is one of the most devastatingly damaging things they have ever done. The cost to businesses worldwide could run into hundreds of millions, if not billions of dollars, and this money is not even paying Microsoft shareholders: it's being flushed down the toilet. Web designers to some extent profit from it at the expense of other businesses, but even so, we would rather not have to do it because we would then simply be able to achieve more. We would probably charge more or less the same, but all sites would be stunningly beautiful with rich interactivity.
CSS, has its own problems, of course, but these would have been very hard to predict all that time ago when it was drawn up:
- Selector-based stylesheets cannot be refactored without reference to a schema for the source document.
- CSS cannot deal with varying capabilities across implementations.
- CSS cannot be modularised, because selectors can very easily collide and supercede each other, dependent on the way the selector is described rather than the structure of the module. For modularised HTML/CSS 'components', you really need to prevent styles being overriden unless explicitly requested.
- CSS units cannot be specified as an arithmetic operation on unknowns, such as '(1em-3px)'. This means dimensions measured in ems (useful for text) are incompatible with lengths measured in pixels (useful for images).
- CSS has insufficient control of vertical positioning. The basic operations available are "the vertical order is the same as the document order", "x is at this vertical position", and with a bit of creativity with floating blocks, "x follows all of these", plus one modifier, "all my descendants lay out relative to me".
- CSS doesn't allow constants. This means that you have to repeat constants, say colour codes or border styles, and change them in more than one place.
- CSS has some bizarre quirks. For example, it doesn't include padding in the width and height dimensions, so if you increase the padding, you have to decrease the width correspondingly. IE for years did the opposite, which is totally wrong but much more intuitive.
- CSS selectors are lacking tidy disjunctions and assertions, things that exist nicely in XPath. It's possible to work around these, but not necessarily succinctly.