I got married. :)
Tim Sears and I (otherwise known as Backabit) went out and saw the Portland screening of Indie Game: The Movie last evening.
I’m totally biased since I was a Kickstarter backer of the film (it was fun seeing my name in the credits) and because I qualify as an indie game designer… but I think it was the most creatively inspiring documentary I’ve ever seen. I even teared up during a few scenes, especially during Edmund’s reaction to the prospect that Super Meat Boy might be inspiring kids to draw and make games the same way Mario had inspired him. That feeling has some special significance to me.
Toward the beginning of the Q&A session, filmmakers James Swirsky and Lisanne Pajot told us that, during our screening, Phil Fish had announced a release date for Fez. Having just witnessed Phil’s passion and heartache laid bare on the silver screen, our audience couldn’t help but applaud.
Portland was the almost-halfway point for the film’s screening tour. I encourage you to see it if it’s coming your way.
Nobody likes writing CSS fallbacks. They’re a speed bump in your creative flow. Here’s how I use a couple different techniques to simplify the process
This assumes that you’re using conditional comments on the html tag to define classes for certain versions of IE. This technique was originally proposed by Paul Irish and refined in the HTML5 Boilerplate to something like this:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
You can omit the “no-js” class if you aren’t using Modernizr, and feel free to remove or tweak the conditional comments to suit the versions of IE that actually require fixes (I recommend referring to this Quirksmode post for examples).
With this markup is in place, you can conveniently target styles to specific versions of IE. For example, let’s say I’m running into a box model bug in IE7 that’s resulting in a div not having the correct amount of top margin. Thanks to the classes I’ve applied using conditional comments, I can apply extra margin only for that browser version and below.
.example { margin-top: 24px; }
.lt-ie8 .example { margin-top: 48px; }
Voila! .example will have extra margin to account for the bug in IE7 and below without impacting any other browsers.
Vanilla CSS works well for a simple, top-level item like that, but it can get a bit hairy when you try to apply similar fixes with particularly deep inheritance. An example:
.l-container.example.s-active .button {
background-color: #00ccff;
display: block;
line-height: 42px;
}
.lt-ie8 .l-container.example.s-active .button {
height: 42px;
}
Yeesh… that’s pretty verbose! Here’s where the beauty of LESS comes in handy, particularly its support for scoped variables, nested rules and the ampersand combinator:
.l-container.example.s-active .button {
@height: 42px;
background-color: #00ccff;
display: block;
line-height: @height;
.lt-ie8 & {
height: @height;
}
}
Occurrences of @height will be replaced with 42px in the compiled CSS. The ampersand in the nested selector will be replaced by the parent selector. This will compile to exactly the same as the previous example, but with a lot less redundant typing.
That’s all well and good for one-off bug fixes, but what about recurring fixes that need to be applied on a case-by-case basis? That’s where the power of parametric mixins comes in handy.
Here’s an example of a mixin we can use to support transparency in old IE syntax and standard syntax. Note that because IE’s filter property does not use standard CSS syntax, it can throw off the LESS parser, so we use a leading tilde (essentially the LESS equivalent of eval) and string interpolation to render the rule:
.opacity(@amount) {
opacity: @amount;
.lt-ie9 & {
@ieop: @amount * 100;
filter: ~"alpha(opacity=@{ieop})";
}
}
.example { .opacity(0.5); }
Which will compile to:
.example { opacity: 0.5; }
.lt-ie9 .example { filter: alpha(opacity=50); }
Here’s another example for supporting inline-block in IE7 and below:
.inline-block() {
display: inline-block;
.lt-ie8 & {
display: inline;
zoom: 1;
}
}
.example { .inline-block(); }
Compiled:
.example { display: inline-block; }
.lt-ie8 .example {
display: inline;
zoom: 1;
}
Like The Force, nested rules can be used for good or for evil. When working with this sort of shorthand it can get a little too easy to overuse mixins or forget to combine selectors to insure your compiled CSS is still fairly lean. Refer to this entry for more on that very topic.
Teachers used to scold me for littering the margins of my schoolwork with compulsive doodles.
Not all of my teachers did this. Most ignored it, some contributed commentary, others would look for creative ways to apply that energy to the coursework.
I’m not sure why it was important for some of them to discourage me (aside from the cultural precedent for doing so). I wonder what they’d think today if they saw how beneficial this habit became to my work.
Doodling is a great way to bond with other creative people. There’s an unspoken exchange of mutual experience regardless of how radically different your styles may be.
Sasquatch! Music Festival’s tenth anniversary may have come and gone, but somehow we managed to squeeze one more award out of last year’s adaptive website redesign. You’ll find a trifecta of sassy screenshots featured in this month’s HOW Magazine amidst oodles of other international and interactive design award winners. Far out!
In case you missed it, here’s a video of David Carroll, Erik Jung and I talking about the design approach early last year: