CSS Summit Review

We spent a full three days this week with the CSS Summit and learned a lot. There were some good sessions, some underwhelming sessions, and some missed sessions (Jeff Croft sadly didn’t present).

The hardest part about putting a conference together has to be identifying your target market, and in this particular case, I feel that it was too broad. The talks jumped all over the gamut between beginner and advanced and many concepts were introduced in detail after other speakers had already shown them.

The top sessions for me were:

Trent Walton‘s Web Typography presentation

Trent showed off some of the power of lettering.js and fittext.js as well as various CSS3 techniques. Advanced typesetting is still a bit of a hit-or-miss proposition when it comes to browser support, but it’s getting better. I’m looking forward to the day that I have as much control in the browser as I do in InDesign.

CSS3 Polyfills by Jason Johnston

Jason is the creator of CSS3Pie, which I’ve used before in projects. This was a really informative session to me on how different browsers use polyfills and how we can use them to target certain things that we can’t simply degrade gracefully.

SMACSS talk by Jonathan Snook

I’ve read the book, so it wasn’t earth shattering, but it was nice to get the refresher. Modularity in CSS is paramount, especially when you move into really large sites or style guides.

Essential Tools for UI Performance by Nicole Sullivan

I had never had a good walk through of how to debug slow-rendering web pages before. Nicole showed her workflow as well as numerous tools to debug. I had never learned about frame view in the debugger until this talk. I’ll be watching this one again for more gems.

CoffeeScript, Linguistics and Cockney Rhyming Slang by Brandon Satrom

I’ve been on the border of learning JavaScript for years and this helped me realize that everyone goes through a similar process of frustration in the initial phases. He also showed a lot of great examples. I feel many people in the chat room didn’t quite get it, as they were having random side convos the whole time, but this talk is really about the future. CoffeeScript will affect the syntax of ECMAscript in the long run, and knowing both will make you a better front-end developer. Also, want job security? It’s almost impossible to find good JavaScripters right now.

In review

All in all it was a good conference. There we lots of other small “OOO COOL” moments in various talks. I thought the third day would be the most exciting, but in hindsight, the second day was far more invigorating. I think I would have enjoyed a more advanced Sass track, as we’ve been pushing the limits of it with our internal tools development at LivingSocial.

I need to spend a week with Chris Eppstein‘s interactive slides to go through more of his hardcore examples from Sass and Compass, but I think that may end up being one of my top talks as well.

As I said at the beginning, it’s hard to plan a conference, especially a remote one, but this was pretty good. If you’re relatively new to or needing a refresher in CSS, this was a perfect mix of basics and complex. For advanced people, we picked up a lot of tips and tricks that we’ll be implementing soon, but I wish the Sass workflow stuff was a bit more case-study or advanced.

Modernizr: Why We Do The Config We Do

In The Rails View (page 23 for those of you following along at home) we cover how to roll your own version of the Modernizr library, but we don’t really dive into which items you want to use in that library. The list of potential items keeps growing and can be somewhat overwhelming at times. We can’t possibly cover every piece of this framework, so if there’s something you’re curious about, we suggest that you deep dive on the Modernizr documentation.

How does Modernizr do the things it does? Well, in the documentation it’s explained as:

For a lot of the tests, Modernizr does its “magic” by creating an element, setting a specific style instruction on that element and then immediately retrieving it. Browsers that understand the instruction will return something sensible; browsers that don’t understand it will return nothing or “undefined”.

Let’s look at the options on the custom build page and see what we may need.

The Core

The core pieces that we absolutely need are actually listed under the “Extra” heading on the right side of the grey area. The html5shiv is a tool that allows “the use of HTML5 sectioning elements in legacy Internet Explorer, as well as default HTML5 styling in Internet Exporer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.” The end point of the shiv is that it allows us to use HTML5 elements in almost any production site by telling the DOM that they exist and letting us print and style those HTML5 elements. If you need printing, you need to select the “w/printshiv” option.

The other part of the Modenizr core is YepNopeJS, which is a simple javascript that detects for a condition (if something can be handled by the browser) and applys one class if yes and another if no. It can be used in its native form to serve certain files based on that condition. This loader is optional and around 3k in size. It gives you access to the Modenrizr.load() function, so if you want that, you need to have this checked.

We also use Media Queries in many of our sites, so we want to turn that on as well. That covers the “Extra” section (which I would call the “core” section) and from there, it’s not too complex. This is effectively Respond.js, so if you want to use that outside of Modernizr, you can do so.

The last is “Add CSS classes” and it will add CSS classes to your HTML tag for the page. If you want to do support detection for CSS3 features, you need to check this.

CSS & HTML

The CSS3 section contains detection and support for various CSS3 elements. If you plan to use them, you should include them. For the book, you really only need @font-face, CSSGradients, box-shadow, and rgba(). The rest are fun to play with, and as your view skills grow you will find yourself using many of these.

The HTML5 area is actually not the HTML5 tags, as those were activated with the HTML5Shiv discussed in “The Core” above. This area includes those elements that are more part of the extended family of technologies that make up “HTML5”. The only things we discuss in the book are the Input Attribtutes and Input Types (both discussed in the Forms chapter).

Remember that each item you add increases the size of this file and is another test that is running on each page load.

Misc. & Add-ons

At this point, if you’re diving into these items, you’re probably pretty familiar with polyfills, modernizr, and the like. This gives you access to some of the more complex (or just fun) items available in some browsers. If you’re interested in switching to box-sizing: border-box then you probably want to check that polyfill off.

For almost anything that can be detected, someone has created a polyfill for it. Remember, if you don’t need to support older browsers, then many of these things are simply noise.

Finally for further reading, The 2010 article by Faruk Ateş entitled “Taking Advantage of HTML5 and CSS3 with Modernizr” at A List Apart is an excellent resource on pragmatically approaching the use of this tool.

Good luck!