Yesterday’s CSS Summit featured some the best CSS minds presenting on cutting edge CSS issues. There was a ton of great information presented across the 8 sessions, but here’s a wrap up of the single best piece of information from each presenter:
- Denise Jacobs – Advanced CSS Troubleshooting
- Chris Eppstein – Authoring Stylesheets with Sass and Compass
- Jason Cranford Teague – 2010 The Year of Web Typography
- Zoe Gillenwater – Effective & Efficient Design with CSS3
- Estelle Weyl – CSS3 & iPhone
- Stephanie Rewis – CSS3 & Progressive Enhancement
- David McFarland – CSS3 Animations
- Nicole Sullivan – CSS Bloat!
Denise Jacobs – Advanced CSS Troubleshooting
The highlight of Denise’s talk was some specific coding tips about clearing floated content.
She started with the standard overflow: hidden method, which falls short with support for borders & margins and also doesn’t allow scrollbars if they’re needed. Denise suggested instead using overflow: auto; width: 100%; which avoids these issues. You don’t have to use the exact values above, you just have to set some type of overflow and width / height value.
Denise went on to discuss a .clearfix:after method, see the gist.
Denise likes this clearing method since it doesn’t include any extra, non-semantic markup (as opposed to <br class="clearfix" />). However the fact that the :after selector doesn’t work in IE6/7 makes this method unusable in my opinion. Ultimately I’m going to stick to the overflow: auto; method described above.
Read Denise’s blog or follow her on Twitter.
Chris Eppstein – Authoring Stylesheets with Sass and Compass
I’ve been hearing a lot about Sass, and to be honest I’ve been a bit skeptical. To a certain extent, Sass seems like another rabbit-hole for Rails fan-boys: sure it makes sense, but it’s so non-standard, complicated and may ultimately become obsolete. But after Chris Eppstein’s talk, I’m interested enough to give it a chance.
Sass offers a lot of advantages; allowing you to use variables in your CSS and define CSS3 attributes with a single line instead of 4 different browser prefixes. Both of these seem like big time savers. Additionally Sass allows for a variety of color manipulations: you can make colors lighter, darker, and modify a variety of color attributes on the fly such as saturation, opacity, etc. Finally Sass allows for math functions, such as width: $width1 + $width2;.
Sass basically turns static CSS into more of a scripting language. If the only downside was learning some new syntax I would start using Sass on all my projects. However Sass only runs in Ruby, so if you’re not running a Ruby / Rails site, you’ll need to compile Sass files locally and deploy the CSS to your website.
Follow Chris on Twitter or check out his Compass project.
Jason Cranford Teague – 2010 The Year of Web Typography
Jason gave a great talk on web typography, a topic which has changed greatly since I wrote about it here.
The highlights of Jason’s talk were his rules for selecting the fonts in your font-stacks. A font-stack consists of a primary font and understudy fonts that are used when the primary font is unavailable. For instance take this font stack:
font-family: rockwell, garamond, georgia, serif;
Here rockwell is the “primary” font and garamond, georgia and serif are the “understudy” fonts.
When considering candidates for a font stack, it is important to asses four attributes:
- Consistency: It is extremely important that any understudy font has similar width and kerning to the primary font. If not, text content can take up vastly different amounts of real estate on your page. While this may not be as big of a deal for long text passages, it can certainly create issues for shorter elements such as page navigation and buttons.
- Style Availability: All the fonts in your stack should have a variety of different styles available within the family: italic, bold, and even bold-italic are all very useful for styling. Not having any of these tools in your toolkit will limit the typography of your website.
- Legibility: It is important that all the fonts have a consistent weight and thickness. In general it’s a good idea to stay away from very light or thin fonts, since depending on the sizing they may not be legible.
- Readability: As opposed to legibility, readability refers to how easily users can read long sections of text. For more readable text, look for fonts that are well balanced between kerning, letter width and x-height.
Read Jason’s blog or check out his web safe fonts infographic.
Zoe Gillenwater – Effective & Efficient Design with CSS3
Zoe completely blew my mind when she discussed a technique for building fluid layouts using media queries. Before Zoe’s talk, I thought media queries were just for print vs. screen stylesheets, and ultimately not really a big deal. But it turns out that media queries are much more versatile than I had ever imagined.
In addition to print / screen constraints, media queries allow you to target styles based on the user’s window / screen size. For instance, let’s float our main navigation left if the window is more than 700px wide:
@media screen and (min-width: 700px) {
#main-nav {
float: left;
}
}
This is an extremely useful technique for making truly fluid layouts, and a great deal better than accomplishing the same result with Javascript.
Besides min-width, media queries allow you to target max-width, device-width, min-device-width, max-device-width and even orientation for mobile devices such as iPhone.
Read Zoe’s blog or follow her on Twitter.
Estelle Weyl – CSS3 & iPhone
The highlight of Estelle’s talk was a discussion of techniques for using markup to invoke various native functionality on the iPhone.
I’ve been interested in HTML5 input types across all platforms, but it turns out that they are even more important for iPhone. With iPhone, special input types such as tel and email not only trigger type-specific validation but additionally impact the iPhone keypad that pops up.
For instance, <input type="tel" /> triggers the 10 digit phone dialing keypad and <input type="email" /> triggers the normal qwerty keypad but with special email specific characters such as “@” and “.“.
In addition to HTML5 input types, Estelle also covered the technique of making phone numbers clickable on iPhone:
<a href="tel:15032084566">click here to call me</a>
See the slides from Estelle’s presentation
Read Estelle’s blog or follow her on Twitter
Stephanie Rewis – CSS3 & Progressive Enhancement
The highlight of Stephanie’s talk for me was the discussion of CSS3 selectors. Although I’ve used a lot of CSS3 selectors such as :enabled, :disabled, :first-child and :last-child, Stephanie taught me some useful techniques with the :nth-child and :nth-of-type. Previously I had only used these selectors in a pretty static way, for instance :nth-child(4) to target the 4th child.
But these selectors can be a lot more dynamic. Target all odd children with :nth-child(odd) or every third child using :nth-child(3n).
Follow Stephanie on Twitter or check out her web training programs.
David McFarland – CSS3 Animations
Fellow Portlander Dave McFarland gave a great presentation on the ultra-hip CSS3 transitions and transforms. Although I’ve been using transitions with the :hover and :focus pseudo-classes, Dave blew my mind when he informed me that CSS3 transitions could be invoked using Javascript.
Since the transition property is triggered on any style change, you can trigger a CSS3 transition by applying new styling with Javascript, in the exact same way you would with a :hover pseudo-class.
To use this technique, first apply the CSS3 transition property to any element, along with the base styles you want to use before any transition:
.foo {
-webkit-transition-property: padding;
-webkit-transition-duration: 250ms;
-moz-transition-property: padding;
-moz-transition-duration: 250ms;
-o-transition-property: padding;
-o-transition-duration: 250ms;
transition-property: padding;
transition-duration: 250ms;
padding: 5px;
}
Next apply a new style to your element using Javascript:
<div class="foo" onclick="this.style.padding='20px'">
This is just a simple example, but you could apply the style more dynamically using jQuery or accomplish the same by attaching a class to the element.
Furthermore, this Javascript method can be used whenever you want—for instance, the animation can be triggered automatically when the page loads using onload.
Follow Dave on Twitter or check out his web dev books.
Nicole Sullivan – CSS Bloat!
It was hard to pick a favorite part from Nicole Sullivan’s awesome talk on reducing CSS filesize, but her thoughts on simplifying specificity stood out the most. After pointing out that “specificity wars” tend to cause a great deal of CSS bloat, Nicole outlined a few techniques for simplifying the specificity in your stylesheets.
The first step is using object-oriented CSS that avoids targeting location-specific elements. This will allow all your styles to start at the same base level.
Next avoid using !important unless it’s either absolutely necessary or applied only to leaf nodes such as or . These leaf nodes generally don’t have any descendants to worry about.
Finally avoid using hacks that alter specificity, for instance .foo {} and .ie .foo {}. If we have another modifier .bar .foo {}, it may conflict with the more specific browser hack.
Follow Nicole on Twitter or read her blog.
Final Notes
The CSS Summit was a terrific conference with a ton of great presenters. It’s the second Environments for Humans conference I’ve attended, and I’d like to mention how happy I’ve been with their offerings. With online conferences that are less than $200 to attend, it’s a really convenient way to hear industry leaders discussing contemporary topics.
Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.
I’m so mad I missed this summit 🙁