The second day of An Event Apart began with Jeffrey Zeldman introducing Eric Meyer. Jeffrey pointed out that there was much one could say of Eric, but perhaps the simplest is to say that he has been documenting CSS since 1996, and browser makers have come to him to ask how to implement CSS in their browsers.
I’m not sure anyone understands CSS in quite the same level of detail that Eric does. Countless people have learned how to master CSS due to his work, and I would certainly count myself among them. Last year, Eric was the keynote speaker at the National Association of Government Webmasters conference I attended: I had the opportunity to both learn from him and hang out with him, and I think it safe to say he is probably one of the most brilliant people I have ever met. An opportunity to learn from him about the new wonders he has discovered in CSS3? Priceless. He did not disappoint.
The title of Eric’s talk was “Everything Old is New Again,” and it focused on how old CSS tricks could now be accomplished much more easily with CSS3.
Eric began by pointing out that despite the developments in typography within CSS, he would not be talking about this, because his experience with design is the same as his experience with child birth: he knows of it.
To start off, Eric spoke about the box model, which is confusing because engineers came up with the styling language known as CSS rather than designers. That those engineering decisions sometimes make designers head spin should not be surprising.
Much has been made of the fact that Internet Explorer, prior to version 6, got the box model “wrong” in their CSS interpretation. The reality, however, is that their interpretation actually made a lot more sense. If you are trying to set the width of a box, what do you care about? The actual width of the box, including the content, the padding inside it, and the borders? Or the width of the content? The “correct” box model considers only the width of the content.
Want to use the more logical “incorrect” box model? Now you can, using the -moz-box-sizing- property. This will not work with all browsers, but you can use Javascript libraries to help older browsers implement newer CSS features. Eric did not want to specify which library to use, in order to avoid the beginning of a holy war, and I think I shall acquiesce to his wisdom.
Layout in CSS has been a hot topic since time immemorial. Flexible designs have had a lot of techniques with different names, such as Switchy McLayout, Resolution Dependent Layouts and now Responsive Web Design. These are all similar techniques, where the layout changes based on the window size.
The most recent method depends on using media queries in CSS to create rules to provide layout based on certain factors, such as window sizes.
For example, you could set up the following:
@media all and (min-width:500px) and (max-width:799px) {
.col {
float: left; width: 20%;
}
#two {
float: right; width: 68%;
}
}
All browsers windows between a width of 500 pixels and 799 pixels would have columns with the .col class float to the left with a width of 20%, but columns with an id of #two floating to the right with a width of 68%.
You could create a separate set of rules to target browser windows smaller than 500 pixels or wider than 799 pixels and simply write separate rules for each.
The point is that you can now write various media query rules that target various browser and device sizes and provide different layouts, or whatever other CSS rules you want, for each. Media queries can also be based on resoluliton, such as dpi (dots per inch) and dpcm (dots per centimter). You could use color depth to target the Mac SE if you really wanted to do so. You could provide different rules for grayscale devices versus color devices or vary layouts based on device orientation.
The likeliest use for this, at least initially, will probably be to create adaptive, responsive layouts, as Ethan Marcottte described, particularly to target iPhones and iPads, etc.
Next up: rounded corners!
Eric started by pointing out how hard rounded corners have been. This has taken more “hackitude,” as he puts it, than what seems imaginable. Extra divs, images, background images, negative margins. And yet, as Eric said, “If the corners aren’t rounded, how are you supposed to know this is web 2.0?”
Instead, wouldn’t it be nice if we just had one div and could just do this? .outer { border-radius: 20px; } Well, now you can. As long as you still add browser prefixes.
Browser prefixes may seem annoying, but they allow vendors to support a CSS property while the standard is still in flux. For more on this, see Eric’s great article on A List Apart, Prefix or Posthack.
As Eric pointed out, “We have DOCTYPE switching to solve a marketing problem.” Essentially, if prefixes had been used earlier on in the development of CSS, then as the standards were settling down on the box model, the standards makers have looked at the implementations in the wild using prefixes, and made any necessary changes to the standard, or browser makers could have corrected their implementation of a standard. Instead, the usage of a particular interpretation became stuck, and rather than “break” the layout of a ton of sites around the web, DOCTYPE switching was used to determine how to correct the problem in CSS interpretation.
Bringing this back to rounded corners: right now, having different border radii on different corners of an element will result in different renderings in different browsers. (Shocking, but IE’s method looks the best by far.) However, this is okay, since browser prefixes are being used. Once the correct method of displaying different border radii on different corners is settled, browser makers change their rendering and all will be well.
Moving on with tabs, the Sliding Doors technique was a great “hack” for doing tabs. Eric took care to explain that a hack is just a workaround for a problem. Also, he took great pains to point out the correct pronunciation of GIF. Jiff is a peanut butter, folks. GIF has a hard “G.”
The good news is that border-radius allows you to create tabs without using background images and multiple elements, as Sliding Doors does. No extraneous elements, no extra images, and it’s also easier to tweak rounded corners after the fact. No need to dive back into Photoshop or Fireworks to change things. Need different versions of a tab when it’s hovered over? Or to highlight a special tab? No problem: all you need is a few lines of CSS rather than new images.
The trouble is that this all goes to pieces when you want to create “lickable” tabs (in Eric’s parlance) that look rounded because of the gradients involved.
Eric: “Not only are the gradient CSS rules different for every browser, but each in their own special way makes me want to gouge out my eyes.”
His “lickable” solution? Create three gradient PNGs with alpha channels, in grayscale, one vertical and for each side of the tab, then apply them to the tab using multiple background images. (You could of course reduce the number of images with sprites.) Point being? “Now your tabs are delicious.”
If you really want to, Eric pointed out you could even add little lens flare images and position them wherever you want to on a tab. However, you have to judge how many images you want to use before performance problems creep in.
An important note regarding multiple backgrounds is that logically, if you have a list of multiple backgrounds in a CSS file, the first background would be overlapped by each subsequent background. However, it’s the opposite. One effect of this is that if you try to assign a background-color at the same time you are assigning multiple background images, the background-color will apply to that whole “level,” and only the top background-image will show.
You may remember one of Eric’s demos, the Complex Spiral semi-transparent menus. I always throught that was pretty visually stunning. However, the CSS is complex and involves four different background images. Instead, you can create opacity with something like {background: rgba {0, 0, 0, 0.5); }. However, make sure to keep in mind that opacity may change the underlying colors. To get the correct colors, Eric said, “It turns out I had to do math and stuff, which is not what I got into computers to do.” Ha!
Another neat item in CSS3 is that you can do colors using HSL and HSLa. If I am working on a color scheme, I almost always switch to HSL in Photoshop or Illustrator, because it is so much easier to keep the hue the same and play around with the saturation and lightness to get variations. Being able to do this directly in CSS? Pretty awesome. Pick a H, then just change the S and L levels directly in the CSS to vary colors in link hover states and varying levels of headers. Woot!
Another neat trick from Eric: If you have a horizontal list, you can use #nav a:after { content: “·” } to put dots between each link. However, that leaves an extra dot at the end of the list. So, add this line: #nav a:last-child:after { content: “” }; This will remove the last dot. No extra IDs necessary to identify the last item.
A similar trick can easily add zebra stripes to tables: tbody tr:nth-child(2n-1) { background: #DDE; }. If you wanted to put a different style every fourth column, starting with the second column, you could do: nth-child(4n-2). The important thing to keep in mind that when using nth-child for elements, there is no element zero. Make sure your formula results in positive numbers.
Eric then created a grid of photos that changed layout based on the browser width using nth-child and media queries. Color me bemazed!
So, to summarize, Eric demonstrated a lot of really cool CSS3 techniques that simplify things from how they would have been accomplished previously. Again, another push to convince me that these techniques are worth implementing today. You just need to make sure to use a Javascript library to backport CSS capabilities to older browsers.