Join Andy Clarke for an in-depth discussion in this video Into the future, part of CSS for Designers.
- View Offline
- [Male Instructor] So in the last movie of this chapter, I want to talk about the future of CSS and the direction that Designing with CSS is beginning to take. Now, in the last movie, Molly looked at the term progressive enhancement and how designers have begun to understand how they could exploit the capabilities of browsers to provide different presentations or more enhanced presentations for browsers which support more of the CSS specs. Now, designers originally began to use this progressive enhancement, or Moe's enhancement, really as a type of a playground, and this was something which I did on my own personal site which we can see here being viewed in Safari.
Now, if I flip back over into Firefox, which is one of the most up to date browsers, in terms of supporting specifications, we can see that both Safari and Firefox display the site as I intended with the full color layout and design. Both Internet Explorer for Windows and for Macintosh don't yet support the type of CSS selectors which I needed to use to achieve this design. So rather than add additional markup into the document and to use a more simple type of CSS, I decided that I would use a two level approach where I would provide a style sheet for modern browsers, but then an alternative style sheet for Internet Explorer, but rather than just provide a cut down version of the full color design, I decided to have a little bit of fun and hide an Easter egg for Internet Explorer users.
So if we flip over now into Internet Explorer for the Mac, we can see that Internet Explorer now gets what I call the two-tone design, and on Windows I'm also using a piece of proprietary Microsoft CSS which also turns the images black and white as well. So really this was just a bit of fun and when I launched the design, I didn't actually talk about or announce the fact that there was a separate IE version. I just sat back and waited for people to be surprised and the comments were very, very interesting.
What's been happening is that designers have been using a lot more progressive techniques in personal sites and ,perhaps, in portfolio sites, but we're now starting to see this whole approach taken much, much more into the main stream. So I'm going to flick back now into Firefox. - [Female Instructor] One of the interesting things is that the CSS 2 specification is the current recommendation. 2.1 is a minor editorial update that has not yet been passed as a recommendation, largely due to logistic problems of the W3C, there are no real reasons that it shouldn't be out.
A lot of browsers are very well implemented with CSS 2.1 features, although some of those features are not completely there, and we'll see an example of that in a little bit. CSS 3 is under development and has been for quite a few years, and in CSS 3 there's a very different approach to how things are organized. CSS 3 is what's known as modularized, and this is actually a very good thing because by breaking things down into text modules, link modules, modules based on grouped like styles that you're going to want to apply.
What this means is that those parts of the specs that are most needed, those modules can be developed, evolved, and implemented by browsers who wish to implement them far sooner than the specification actually becomes made into a recommendation. - [Male Instructor] And this is happening with Firefox right now. I mean, Firefox is a very progressive browser, and implements a lot of CSS 3 or some of the CSS 3 modules, but it doesn't implement them natively. It uses some proprietary CSS, which we can see in a moment when we have a look at an example, which is always prefixed by a dash mos dash extension.
So the syntax is the same as CSS 3, but it's been prefixed with a little extension which makes it only visible to the Firefox browser. One of the things that we can see, if we look over now at the design of the WorrySome.com homepage that we've been working towards in this title, we can see that the paragraph of text underneath the pictures of the three worriers is divided into two columns. Now if I compare this to another modern browser, Apple Safari, if I scroll down, we can now see that that paragraph of text is just in one line, rather than split into the two columns.
So Firefox is supporting what's called the CSS column module, and if we have a look back in Firefox and use the web developer extension to view the CSS that we're using, we can see that down the bottom of the style sheet, I've added ... The small line and a comment, which is now using the dash mos column syntax.
So there's two parts of this that we're using for this particular design. The first is the mos column count, which tells the browser how many columns to divide the text into, and then also mos column gap which I've now set to one EM, which is going to be the gap between the two columns. Now Firefox doesn't support yet all of the column layout module, but more and more is being implemented all the time, so it's very, very worthwhile keeping up with the latest builds of Firefox and also reading about the CSS 3 techniques that we're going to be able to use in the future that are being implemented now by Firefox and it's a great way of getting used to and learning about what's going to be possible in the future.
- [Female Instructor] Absolutely. It's not only Firefox. The most recent build of Safari now supports multiple background images and so it's really interesting to see how different browsers are adopting aspects of the CSS 3 specifications, even though the CSS 3 specifications is, you know, perhaps a year or more away from adoption. - [Male Instructor] Now we're going to give you a little bit of a sneak preview now into a design which is not live yet, and this is the new design for the Web Standards Project website and one of the things that we have done with this particular design is to use what's known as text shadow, which is part of the CSS 2.1 or 2 point ...
- [Female Instructor] It's within the CSS 2 or 2.1 specification. - [Male Instructor] But it's not yet fully supported, even by browsers such as Firefox. So here we can see that we've just got some plainer navigation on this navigation rail here, but if I switch over into Safari, which is a browser which supports text shadow, we can now see that we've got some shadow underneath the text. - [Female Instructor] What's so great about this is that it makes it look like a graphic.
You would think that is a graphical element, and in fact it's text with CSS to create the offset of the shadow, and it's just amazing to me what a beautiful, beautiful thing that is and wow, when we have more features like this available to us, I think designers are just going to be very happy. - [Male Instructor] Well what we can do if we flick back over into Firefox again, and we have a look at the CSS that's been used for this particular site. I'm going to scroll down and look for the anchors for the navigation.
So ... Let me have a look, see where we can find this. Here we go. So here we've got one discreet rule, which is the text shadow, and here I'm setting the text shadow to a gray and then controlling the offset and the amount of blur of the shadow detail. The interesting thing with this is that the site looks perfectly well in Firefox, even though it doesn't support text shadow, whereas in Safari we just get this extra little touch which makes the thing all the more interesting.
So it's important that whenever we're using these types of techniques now, particularly on commercial projects, that we understand that we have to provide a very good baseline for modern browsers, and, you know, sometimes depending on your browser matrix for older browsers as well, but it's really about making sure that everybody gets a pleasant and satisfactory looking design, but users of more modern browsers or browsers which support more of the newer specifications get a more enhanced view.
- [Female Instructor] And it's pretty terrific to see this progress. I really, really hope that this chapter has been inspirational and has encouraged you to be excited about getting started because in the next chapter we will begin by building documents that we will eventually start to style and end up with the WorrySome.com homepage, all of which you can find in your chapter files and exercise files so these are essentially, what we're looking at right now, is the design that we're going to be using to demonstrate most of the techniques that we are teaching in the title.
- [Male Instructor] And a lot of these techniques are going to be what we call progressive techniques, so we hope that it's going to be interesting and exciting, and on to the next chapter.