Join Andy Clarke for an in-depth discussion in this video The evolution of CSS design, part of CSS for Designers.
- [Instructor] By the time it came to about the year 2003, the CSS Zen Garden had already been available, and people were submitting designs, and really starting to push the envelope and evolving CSS. One of the ongoing challenges for designers is the cross-browser issue. Internet Explorer stopped really developing after 6.0, until very recently. So that was about five years in between versions coming out, and if you think about that you know, in relation to how long the Web has been around, that's a huge chunk of time in Web years.
So IE6 did not have certain implementations. It had some flawed implementations of things and bugs. And other browsers including Zilla, and eventually Firefox, really kept evolving, and kept implementing aspects of the CSS specifications as time went on. So designers who were trying to be very clever, had to begin to work around this problem, and we began to see a time where CSS got used in very interesting ways.
We have terminology to describe this period. It was called Progressive enhancement, and another terminology was MOs Design, which stood for Mozilla Opera Safari design, so all the browsers that had been advancing, while IE6 was sort of stuck in this non-advancement, non-production. Of course IE7 changes that, and there has been implementation of almost all of these features that the other browsers had implemented. Here we're looking at a design called Pret a Porter, and it's from a German Designer named Mincemeyer.
And it's a very interesting design to me, because it, first of all, it's a horizontal design, which typically speaking, is something that we wouldn't be doing very often for our commercial websites. There are usability and accessibility issues involved with that so, you know it's hard enough for some people to scroll vertically, so we don't always want them to be scrolling horizontally. But of course the CSS Zen Garden is an experimental place where people can and should be looking at the types of things they could really do with CSS.
So as we move horizontally, you'll notice that the woman's face is fixed over to the left there, as information slides behind her, and there's a really nice effect here with this alpha-transparency, and you can kind of see through the transparency to what's happening before. You'll also note that she goes to the bottom of the browser Chrome right there. So this is a really, really nice design, but we're looking at it in Firefox. Fixed positioning was not supported until IE7 and, as a result, the designer had to do some things to make it look good in IE.
Let's flip on over to Internet Explorer, and we can see some differences here. Here in Internet Explorer you'll notice that the position of the woman is a little different. There's wide space here, and you'll note as I scroll horizontally, she moves off the page, because there is no fixed positioning in this. Now, as you can see, it's a bit of a compromise in the design, however, IE users are still getting a very nice experience. They're getting the beauty of the design, they're getting most of its functionality, but what they're not getting, as we can see in Firefox, is that very prominent and I think, dominant feature of the woman's face staying fixed throughout the experience, and that nice fade that's behind there.
So this sort of thing has really been one of the challenges for CSS designers as time has gone on. Let's take a look at the source code for Pret a Porter, and take a look at this and see how this is done. You know, there actually is, in the flaws in IE, to work around the issues. So for example, if IE doesn't have an implementation of a certain kind of feature, then they implement that feature for the advanced version. So as we look through the source code, we can see that here he says different behavior of the lady, it's just a compromise for IE, and as we move on down, you see some very complex selectors and rules here, which might look a little daunting at first, but I promise you you'll become a little more comfortable with these types of things.
But the bottom line is, is that these two designs are being generated by the same CSS document, and the way that's being done, is by separating out the things that IE can use, and the things that it can't, and giving the browser that can support things like fixed positioning, those elements, and those things that could not be supported, are then altered in some way for IE, to make the experience still good for the user, but perhaps not as progressive, which is where we get the term Progressive enhancement from.
Another really favorite example for me, of this Progressive enhancement concept, and how the Web began to evolve, is another CSS Zen Garden design called Gemination. You'll see this again in the exercise to come. There are a lot of fascinating things happening on this page that we would never ever see in a browser that was compliant with all of the things that the Firefox browser does support. You can see alpha-transparency for example, where this image is allowing us to look through to the image below it, and similarly here where we have text that scrolls over a background fixed image.
Another very nice feature of this particular design, is that as you mouse over these choices, you actually see that we have a changing menu. Interestingly enough, this is using CSS only, there is no script involved in that, and that is because it is using positioning, and the hover dynamic pseudo class in CSS, I know that sounds technical, don't worry you're going to learn how to use that to get this effect.
Unfortunately, none of these effects are supported in IE. Let's go see what happens when we look at this design in Internet Explorer, remembering that it is the same XHTML file, and it is the same CSS file that is driving the design. So we pop on over in IE, and go ahead and load Gemination. What? Is there some mistake? How is this possible? It is a completely different design. But is in fact, the same CSS file, using the same XHTML document to accomplish this layout and this design that has absolutely visually nothing in common with the other design.
And of course here we see our lovely box model. Well let's go ahead and flip back on over to Firefox, where I've bookmarked the source for Gemination, and I'm just going to show you how very cleanly the designer actually broke this out. As you can see, here's the Internet Explorer area, and it has all of the various rules and styles that Internet Explorer understands. But as we scroll down farther, you'll see the area where Mozilla, Safari and Opera are handled, and you'll see some funny-looking code here, like right here, which is using something that is known as an attribute selector, which Internet Explorer doesn't support.
So when browsers don't support something what do they do? Well, they ignore whatever that is, so everything that's created for Mozilla and Safari and Opera here, that all those browsers support, that IE6 and below do not, get delivered this more advanced code. And as a result, when you load this page up in Firefox, it is able to take the advanced code and apply that, overriding all the other rules that exist for Internet Explorer, where of course, you get a very different design.
So this was a very fascinating point in history, because design has certainly not only evolved, but people are beginning to play with the browsers and their flaws in order to be very creative. And through this process, we have learned a great deal that has led us toward what we now believe to be a better way of designing websites.