Incorporating CSS3 into your designs allows you to create innovative designs with less code and reliance on images. The level of compatibility with many of the browser options out there is already impressive and it continues to grow. Taking advantage of the new CSS3 features helps to shift heavier visual elements to the browser itself. Dan discusses examples and tips in this podcast.
Adam Churchill: Welcome everyone to another episode of the SpoolCast. Just a couple of weeks ago, Dan Rubin joined us for another great virtual seminar, "CSS3 For Everyone."
In this particular seminar, Dan offered up practical examples and exercises and showed examples of how today's leading sites are using advanced CSS to move some of the visual heavy lifting to the browsers. He explored some live sites. It was really cool. He actually took them apart and showed us how their designers are using CSS to implement the visual design.
He showed a bit of how they degrade in the less than modern browsers that some of us are forced to use. He also built a design for the audience just to see how easy and practical it is to incorporate advanced CSS in his design is.
The audience was very engaged. We had lots of questions that we just couldn't get to. Thankfully, Dan's offered to come back and tackle some of those questions for us.
Now folks who didn't get to listen to this particular seminar can get at it in UIE's user experience training library. That's now got over 70 recorded seminars from experts just like Dan Rubin. Dan joins us today from the U.K. Hi, Dan. Welcome back.
Dan Rubin: Hi, Adam. Thanks for having me.
Adam: So Dan, for those who weren't with us for your live presentation, can you dive a little deeper on the overview I offered?
Dan: Well sure. The exciting thing about CSS3 is that, well if you're familiar with CSS, it's a natural progression. It doesn't require any kind of crazy learning curve to incorporate it into your workflow. It's just more of the same, more of what you're used to with CSS.
But even more exciting is if you're new to the idea and the concept of CSS and of building sites in the absolute best, modern way that we're capable of building them right now. It makes things so much easier than they've been in the past. We really have a list of tools. Some of them are visual. Some of them are structural, but they both affect the way that we approach taking a site from the design or concept into code.
There's all sorts of benefits involved with that, both flexibility, forward compatibility, which is a fantastic one, really easy backward compatibility to a great extent. Even in a lot of cases with the structural styles and tools that are available to us now back to IE6.
There's a range of understanding that's involved with it, but overall CSS3 kind of makes designing and building front ends for the web much less painful than it's ever been.
Adam: All right. Great. Let's get to some of those questions.
Let's talk about the pseudo-elements. There were a lot of questions that rolled in there. Can images, HTML, and other characters be inserted through the before and after pseudo-elements that you discussed?
Dan: It's a fantastic question, and the answer is... it's kind of a yes and no. Pseudo-elements, you might have seen them if you've been messing around in code before. You know, we have two elements that are free elements that are generated by CSS or by the browser because they're included in the CSS.
And they're basically inserted before or after the content that's contained within the element that you apply them to. So, for instance, if you have a div and you set the before or after pseudo-elements, whatever content is in that div, the before element will insert itself right before any of that content but inside the div and the after right after the content but still inside the div.
The deal with them is that, for the most part, I think people have been using pseudo-elements to inject content and you can. For instance, you can put an image that you place a reference to in the CSS. You can vent this new container for it, and insert it, and do other things with it.
You can use certain special characters but there's basically a trick to it. Like you can use plain text, which is great, but we can't insert HTML and you can't insert, even encoded entities. If you want special characters placed inside your generated content, you basically need to use the ASCII code for them, which isn't the most straightforward thing to do. It's not impossible, so if you need a particular special character you could actually insert it as part of that generated content.
And really, what we want to be thinking about, still, is that idea of the separation of content from presentation. So if you're going to insert a lot of complex stuff, it's probably content of some sort.
When we say generated content for the pseudo-elements in CSS, I don't think people should actually think of it as generated content. They should be thinking of it as "generated elements that contribute to the presentation", which is a lot more long winded, but it allows us to keep that straight. I think understanding that, the constraints on generated content make more sense.
And so, one of the most exciting things for me about generated content is what you can do with it. You can generate a pseudo-element that has no content that basically either has a space or just is empty. And by applying position to it, say position absolute, for instance, or display block, you can start to do things with it that give you these two free, essentially free elements that don't take up any space in your HTML, don't take up much space in your CSS.
And if you imagine the ability to have two extra visual elements that you can do whatever you want with on almost every element. You don't have them on HRs and images and BRs, but pretty much any container element. Something that has an opening and a closing tag. You have these two free elements on.
You can apply background images to them. You can give them size. You can give them position. You can float them. You can give them border radius and box shadow. And in compatible browsers you can do all sorts of transforms and animations to them.
And the magical thing is that as long as these are additions to the visual design, when they're not there, it shouldn't break the functionality. And because of the way that before and after works in browsers, the pseudoelements either be there or they will just not be there at all.
You don't have to worry about incompatible browsers breaking your design. A browser that doesn't understand pseudoelements will just not display them. So with that knowledge in mind, you can add in all sorts of extra stuff and you know ahead of time, as you're adding it in, before you test in noncompatible browsers, exactly what they're going to do. Those elements you're adding in will just disappear. Which is, for me, the best possible scenario when using new technologies, is backwards compatibility by way of just invisibility.
If it was something that you have to create all sorts of extra code for and test for feature compatibility, it would cause us more work and it wouldn't necessarily be worth doing this in the first place.
But that's one of the great things about all of these new visual tools that we have in CSS3, is that with almost no exceptions, when they aren't supported they just don't register to the browser. So we know the minute that we use them exactly how they're going to behave when they're supported and exactly how they're going to behave when they're not supported.
Adam: So a lot of folks were wondering can you use CSS3 when designing for mobile? I know there's lots to talk about there. Jane, one of the people that asked the question, she specifically was curious about what we'll call the big three, the iPhone, the iPad, and the Android. What do you have to share with us about that?
Dan: [laughs] Well another fantastic question.
Obviously, mobile is really exciting these days. It's nothing new, but what's new is the capabilities that these devices have, and also the fact that they are actually connected to the Internet not some mobile-only subset of the Internet like we've had with feature phones for years.
Since the iPhone, we've now seen people using their mobile devices in some cases much more than using the desktop. And so, it makes sense to be focusing on designing, not just for the small screen, which is only one aspect of it, but also for the mobile context.
And we could do a whole hour's podcast on just designing for mobile, but folks here on the CSS3 in particular... there are a couple of things that can be used very effectively. They're in two different categories.
As long as you're doing that, you can start to flex your muscles a little bit with CSS3. So a lot of these visual elements, as well as the structural elements for positioning and targeting elements with specific selectors, we can do that with most of the current mobile browsers. The popular ones on smartphones. And by popular, I mean looking at iPhones, iOS in general. iPhones, iPads, and iPod Touch. We've got Android devices, both the tablets and the phones.
Android and iOS both use variations of WebKit, the browser engine that also runs Safari and Chrome on the desktop. So because of that, they kind of all share this common rendering engine and we can pretty much anticipate broad support for CSS3 in those browsers.
Beyond that, though, we also have new devices coming out from RIM under the Blackberry label that their new devices are actually also using WebKit as the engine for the browser. So that broadens that market, as well. Opera is used on a lot of mobile devices and has been for a while. And Opera Mobile actually supports a ton of CSS in all sorts of ways.
It will depend on your device a little bit more, because they have a lot of different versions of their mobile browser, but again, there is a ton of support there.
And even Windows Phone 7, it's getting better and better. I think this fall the browser in the Windows Phone 7 devices is supposed to get a major update and essentially have the same core engine as IE9. When that happens, because IE9 has fantastic support. It's not perfect, but nothing's perfect.
We'll have all of these new devices that will be flooding the market, especially next year that will be from Nokia and you know, running Windows Phone 7. And they're all going to be CSS3 compatible.
And again, for the devices that don't support that stuff, if you're using... especially the visual selectors, when multiple backgrounds, or border radius, or gradients, or RGBA, or box shadow aren't supported, they'll just disappear.
So as long as you're designing with that in mind and you're designing your CSS based on the kind of progressive layering of design elements, so basic design elements, then the fancier design elements that may or may not be there all the time. You're not going to break anyone's experience.
So yeah, we're in a fantastic time now. I'd be remiss if I forgot HP and what was the Palm OS, or I think it still is the Palm OS that's powering Palm phones and also the HP Touchpad. That's also WebKit based. That entire operating system pretty much runs on a variation of WebKit.
So really, really broad support everywhere on the new devices. And the older devices, as long as you're writing good HTML and clean CSS, what can be supported will be. And you know, someone might not get the prettiest experience, but they're still going to get a functional experience. That's what most people will care about if they're using an older phone anyway. If it works at all, it's probably a really big positive for someone using an older feature phone.
So yeah, the mobile landscape is great from that point of view. The one other thing that I mentioned earlier, that there were two kind of categories. The one is CSS3 and what we can do with the visual and structural elements. And then there's this other side that has been really, really popular in the last year and you probably heard of responsive web design. We won't dive into it, I encourage you to read... Start with Ethan Marcotte's fantastic "A List Apart" article that started the whole craze.
Then dig into the concepts he covers there like fluid images and fluid grids and that will lead you directly to CSS media inquiries. Which is this other part of CSS3 that's fantastic for not just mobile, but basically allowing you to adapt your design or saying it the other way, allowing your design in your site to respond to its viewing context. Whether that's a small screen, a large screen, a medium screen, a portrait or landscape tablet, whatever it happens to be, devices that you have no idea about even that might not be out yet, at all sorts of different screen resolutions, as well as use contexts.
And it's a capability that we should have had on the web 10 or 15 years ago. It makes so much sense to how you build sites once you dig into it and I highly recommend spending your next weekend or available long evening with a glass of wine and a couple of these articles and really absorbing what it means to the future of how you will design and build for the web. It's really, really fantastic and exciting stuff.
Adam: So let's talk examples. Do you have a list of live websites that people can take a peek at that currently leverage CSS3 well?
But a lot of that stuff you don't see. You can look at a site and you wouldn't know, unless you dig into their style sheet, whether they were using this stuff or not, because typically it just works. On the visual side though, we're starting to see more sites start to adopt the visual CSS3 and hopefully all in subtle ways. So, one of my favorites, and it makes sense because it's a tech related company in a way.
It's a very modern Internet based company. If you look at twitter.com and actually inspect ...if you have Firebug installed on Firefox or the web kit Web Inspector on Chrome or Safari, or apps like CSS Edit, to be able to actually dig into the styles of a live site. You'll see that they're using CSS3, anything from border radius to box shadow, to even gradients in some cases and a lot of RGBA to create the interface.
It's a fairly minimal interface but it's an interface that has a quality to it that's more like a desktop application than it is a website or a web application. And they do that not through a lot of complicated java script or nested divs or crappy mark up, they do that because they're leveraging CSS3 which makes it easy to do that stuff.
Because really if it all disappears for a browser that doesn't support it or doesn't support part of it, what's the worst thing that'll happen? You get instead of a rounded corner input field you get a square cornered input field and it's still on brand, it still feels right and the same goes for all of these visual effects.
So, twitter.com, if you dig through it you'll start to notice how many places they're using things. And even if it's just, again, using RGBA which is one of the new color modes which adds alpha, which is what the A is for. So basically it allows you to set the level of opacity for a solid color and then you add that to gradients and you get CSS3 gradients that can go from a semi transparent color to another semi transparent color and you layer that with background images or other colors and you start to see how companies like Twitter and why companies like Twitter are deciding to use this.
Another fantastic example that still impresses me is lostworldsfairs.com. It was an example site or is an example site that was funded by Microsoft of all companies and really I say that because we all know the trouble we've had with Internet Explorer for years.
And the fact is that the IE team with IE9 has completely turned it around and it's a fantastic browser and IE10 there's no reason to think that it's not going to be an even more fantastic browser. So what they're trying to do is fund things like lostworldsfairs.com where they hire fantastic designers like Frank Chimero, Jason Santa Maria and Naz Hamid to create these heavily visual examples.
In this case they're kind of like interactive posters in a way and they've hired them to do that solely to show off the capabilities of IE9, but what they're doing is showing off what CSS3 can do. And it also includes a ton of great web font usage. So if you view that in a browser that can see web fonts and RGBA and take advantage of all that CSS3 has to offer, you'll see a fantastically rich visual experience that's all done in the browser.
Obviously there are images involved but scroll through it, play around with it, realize that all of the text there is using web fonts and I think your mind will start to expand just by exploring it. There are other sites as well, especially if you want to explore good examples of more of the subtle applications of things behind the scenes and stuff like web fonts and CSS media queries. I recommend checking out the site for do lectures, that's D-O lectures.
It's a great example of a site that you could look at and not really think that it was doing a lot of stuff special. And that's really the point here. The point isn't to use CSS3 to throw these bells and whistles around everywhere in plain sight. For it to be useful to us it has to save us time. It has to improve our work flow and improve our output.
And that's why it's exciting to me and to everyone else who's actively using it now is that it saves time, it makes testing easier, it makes things like responsive web design possible in the first place. And it allows us more flexibility, especially if you're a designer, to kind of have this one to one or closer to one to one relationship between what you're doing in a visual design app like Photoshop or Fireworks where you can use opacity.
And you can you know use one of my favorite tricks is to use lots of layers of either black or white and to layer on top of either images or other colors that I've set in the design, and just use opacity to vary the level of detail and the level of mixture of that color. Well, you can do that in Photoshop and you can transfer that directly to RGBA colors and do the exact same thing without having to do any weird conversions or use your color picker.
Once you start actually doing that and experiencing how that changes your work flow, you realize that it's not about making things flashy and adding all sorts of animations and transitions and hovers and drop shadows and making everything have a rounded corner and all that. That's not what it's about. It's about how it changes the way and improves the way that you build and you design.
Adam: And as always our audience begs the experts we bring into the program for the resources, the tools that you use. You got some stuff you can share?
Dan: I certainly can. So very quickly if you're building sites, basically starting from whatever day you're listening to this, if you're building sites without including "Modernizr" and "Selectivizr" and I'll spell both of these to you just in case you haven't come across them yet. Modernizr is M-O-D-E-R-N-I-Z-R, or zed-R for the English listeners. And Selectivizr is spelled with the same pattern, S-E-L-E-C-T-I-V-I-Z-R. These are two freely available tool kits basically that Modernizr allows you to easily feature detect for any feature in a browser or a device. I could spend an hour talking about just Modernizr.
Just go check it out, check out modernizr.com and you'll realize pretty quickly why it's an amazing tool and should be included by default in pretty much every project you build. Selectivzr, pretty much runs in the background automatically when IE6 through 8 solely targets Internet Explorer, doesn't load for other browsers. And it will essentially make all of the structural CSS, so all of the ways of targeting elements using these new selectors, the Nth selectors, the attribute selectors, first and last of type, stuff like that.
It will make it work in IE6 through 8 without you having to do anything. So, there goes the compatibility question. And Modernizr because it feature detects and allows you to build use cases based on the results of those tests and a lot of the time you can design around some feature being there or not. So a browser supporting RGBA versus a browser that doesn't support RGBA, you can do all of that in your style sheet as long as you have Modernizr loading. Between those two tools those libraries just take care of most of the problems you might run into using CSS3 right now. So it pretty much gets rid of the reason to not use it.
As far as tools to make generating and writing your CSS easier, there are tons but two that I love, one is border-radius.com. So if you're confused about the exact syntax of using the border radius or you don't want to type -web kit and then -moz and then all of these browser specific and kind of vendor prefixes which we have to do right now for compatibility. Border-radius.com just allows you to enter your border radius either for all four corners of a box or different settings for each corner and it just outputs it and you copy and paste it into your CSS. There is no shame in using that.
We want to use this stuff right now and if it's tedious we won't use it. So use a tool to make it easier. Another fantastic one is a gradient editor by colorzilla.com, so if you go to colorzilla, spelled the American way C-O-L-O-R-Z-I-L-L-A.com/gradient-editor. It's a pretty brilliant tool to help you create CSS gradients which are admittedly a pain in the butt to create manually and remember the syntax.
Because the syntax actually differs from browser to browser with certain versions because it hadn't settled down yet when browsers started to support it. So if you want to use CSS gradients right now, use that generator. It's absolutely fantastic. There are plenty of other ones out there but this is my favorite.
It also allows you to save and bookmark specific gradients you've created. Including not just A to B gradient but loads of color stops and you can adjust opacity easily and it even will include, if you wish, it'll include a little block of code for IE that will try with a basic gradient to include IE compatibility. So, there are loads and loads of other tools like this.
One more to check out, just to look is css3.me. If you just spend a little bit of time on Google searching for CSS3 generators, you'll find an amazing long list of them. And basically I just encourage you to find the tools that make it easier for you to adopt this stuff now that take the tedium out of writing the extra lines that you need in order to be compatible with all the different browsers and different browser engine versions and variations. There's no reason to not copy and paste if that allows you to do it on your site tomorrow.
Adam: Dan, that was fantastic. Thanks so much for circling back with us.
Dan: Hey thank you for having me again it was a pleasure.
Adam: To our audience thanks for joining us and for your support of the UIE Virtual Seminar Program.