Be Good Not Bad by Brian Warren

Recent pages from the journal

2 August 2010

Backslider: A workaround for background positioning PNGs with IE6

How many times have you run into this problem?

You have a translucent PNG for which you had to run the AlphImageLoader trick to get IE6 to render properly. Everything is great, except this PNG is a sprite, and you also need to change the background-position, such as for a hover or focus state. Cue the sad clown kazoo. Oh well, I guess IE6 doesn’t get a hover state, right?

That’s what I thought too, till I thought of this handy little trick.

Setting the stage

Usually with this sort of situation, I am using an image that is a sprite which contains three states of the same image: The default, hover, and active state. Then I use background-position to move that sprite to where I needed it.

Take the following example:

image of a new post link

This is a navigation element with the following code:


<li><a href="/new">New Post</a></li>

Normally, we’d do something like this to show a nice pretty title for this link:

#new a { 
    width: 99px; 
    height: 39px; 
    display: block; 
    text-indent: -9999em;  
    background-image: url(/m/titles/new-post.png); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    }

Of course this is a sprite, so the actual image for it is (Note: For this example I gave it a dark background so you can see it):

image of a new post sprite

And for hover & focus classes we’d do something like this to expose the hover version of the image:

#new a:hover, #new a:focus { background-position: 0 -39px }

And we would do something similar for the active version and the on-state:

new a:active, #new a.on  { background-position: 0 -79px }

This all well and good, but as you may know, since this is a translucent PNG, none of these hover, focus, active or on states are an option with background-position for IE6, since background-position does not work with the AlphaImageLoader filter fix. The only alternatives are to just do without these states, or to cut separate image for each state and write separate lines in CSS to pull said images in under each condition. That’s a messy solution that, despite being pretty sub-optimal, is a heck of a lot of extra work.

What if there were a better way? I think there is, and this is my solution: I named it ‘Backslider’. I know, it’s silly.

Backslider

When you think about what background-position really is doing, it’s moving an image around a mask, based on specific events or situations. The trick is, that you don’t need background-position to do this, and often we don’t need any more markup than what is already available to solve this problem.

Remember, what we’re dealing with is a link inside of an #new element. Let’s use that #new element to provide the mask, and then move around the #new element using absolute positioning. CRAZY, RIGHT?!

#new { 
    position: relative; 
    width: 99px; 
    height: 39px; 
    overflow: hidden; 
    }
#new a { 
    display: block; 
    width: 99px; 
    height: 117px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    text-indent: -9999em; 
    background-image: url(button-sprite.png); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    }
#new a:hover, #new a:focus { top: -39px; left:0; }
#new a:active, #new a.on {top: -78px; left:0; }

In the IE stylesheet you can still apply the filter fix for the new-post.png. But because you’re not using any sort of background-position changes, it works like a dream.

One little caveat for our good friend IE7: You still need to do that left:0 property. Every single time. Otherwise, it pretends you didn’t really mean to position that element at all. You were only joking, right? Oh, IE7, you do seem to have an extra special sense of humor.

Really, though, it is that easy. It involves very minimal IE6-specific styling and works great for everybody else. This can be used for navigation elements, headings, logos, and more.

When I discovered this little trick, I just assumed people had done it before, and I was just late to the game. However after asking around, apparently this isn’t a widely used idea, so I humbly submit Backslider to the internet.

Have a better idea, hate the name “Backslider”, or just want to set me straight? Send me a note. Thanks!

1 July 2010

SimpleBits: Welcome to the bitstream 

My good friend Dan switched to Tumblr, did a handsome, responsive redesign, and explains his thinking in this post. His reasons for switching to Tumblr and his thoughts on his current in-process redesign/rejiggering mirror mine and what’s going on here to a T.

30 June 2010

It’s Trash Day

Delicious Latte

It’s trash day. Which means I’m locked out of the office.

You see, on most mornings, I eat breakfast, gather my things together, get my iPhone and headphones, and then kiss my family goodbye before leaving the house. Today, it’s trash day. So I do all of those things, but I leave out the back door so I can take the trash to the curb. All of that is well and good; however, I always keep my keys on a cabinet by the front door, and pick them up on the way out. So, today, leaving out the back door, I left my keys at home.

I take the trolley to work, so this isn’t a mistake I realize when I get to my car or scooter. It’s a mistake I realize after getting to our office building, grabbing the three packages that were delivered last night, toting said packages upstairs to the office, and finding I’m the first one there and can’t unlock the door.

I headed downstairs to pick up a latte and get to work at a table there. Delicious. Bonus: Our office wifi reaches down to the cafe.

I think I’ll forget my keys more often, at least on trash days.

10 June 2010

James

Bridget and Baby James

On May 28th, my son, James Baden Warren, was born. We are so thrilled to start getting to know this guy. It was a crazy fast labor, and he was a couple weeks early, so all of this came as a pretty fast surprise! We’re not complaining. He’s awesome.

25 May 2010

My Article for EE Insider: Simplifying How Content Works 

My first ever article on EE Insider was published today. It goes in depth on how to use one seemingly simple technique using Pages to simplify how content works on a website. I’m excited to write for EE Insider and I hope I can do a bit more of that in the future. I say that knowing full well I have other writing projects on my plate and a baby due in three weeks (!), so we’ll see how much of that I can do in the short term. In the meantime, enjoy this article.

29 April 2010

Thoughts on Flash 

“If developers need to rewrite their Flash websites, why not use modern technologies like HTML5, CSS and JavaScript? … Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.”
—_Thoughts on Flash_, Steve Jobs

13 April 2010

SXSW 2010 Recap

In March, I traveled to Austin for SXSW. For whatever reason my experience at SXSW felt a lot more low key than in years past. This is a bit strange because this year was the biggest SXSW ever, and I had far more stuff to do than ever before.

Cogaoke

Greg Hoy Killing it at Cogaoke

In what is undoubtedly now a yearly tradition, Happy Cog threw an enormous karaoke party entitled “Cogaoke”. We pulled out all the stops this year with more contestants, more judges, more sponsors and a longer open bar.

It’s funny because I don’t really get into karaoke at all. It’s not something I seek out or make time for. Nonetheless, it’s downright impossible to not enjoy the spectacle that is Cogaoke.

We don’t just put on a party though. It’s a competition for which people are preparing months in advance. We started back in January by putting up a teaser site and in February we debuted the full site with contestant registration. Meanwhile we were making training videos, teaching people how to put on the most amazing performance they can.

It was a huge deal that entailed lots of extra work for the whole office. I enjoyed working on the whole project, getting to do design as well as front-end and back-end development. Fun stuff.

The event itself went off without a hitch. I didn’t do a ton during the event, except for fire a confetti canon and run drinks to judges. Check out photos from the event at the Cogaoke 2010 Flickr photo pool.

ExpressionEngine Panel

The other enormous undertaking of SXSW for me was getting to give at talk at our “ExpressionEngine 2.0: Total Domination!” panel. Kenny Meyers led the panel, which was comprised of Ryan Irelan, Jenn Lukas, Mark Huot, and of course, me. Quite the crew!

We spent a decent amount of time before SXSW planning our talk, but nothing was a substitute for meeting and going through it in person, which we did a few times while at SXSW, before the main event.

I somehow found time before leaving for Austin to rehearse the crap out of my little talk, and if there’s any little bit of advice I can give to a budding speaker, it’s to do just that. Get extremely comfortable with both your routine and your slides. I’m not trying to toot my own horn here, but the one bit of feedback people gave me the most was that everything seemed really polished and I seemed nice and comfortable talking. The only thing I can attribute that to is the extra time I spent going over everything. The last thing you want to do is get stuck reading your slides.

Our talk was about ExpressionEngine 2.0, an app we use as the content management system for lots of our sites. It wasn’t a commercial for the app itself, it was more a talk for people who make sites, like we do, with ExpressionEngine. I was a little surprised, but a lot of people in attendance hadn’t used it yet, and were just finding out about ExpressionEngine.

My portion of the talk was about Accessories, a new feature in ExpressionEngine 2.0. I posted the slides from my talk to my site for download here

How did it go? It went really, really well. The ballroom was packed, the Q&A went great, and Kenny did a fantastic job of getting some good laughs from the crowd. After our talk, folks from EllisLab (the makers of ExpressionEngine) took us out for lunch, which was a super nice treat.

Everything Else

There's so much to love about this.

SXSW was really fun this year. I’m tempted to say it was the most fun year yet for me. As usual, I didn’t get a chance to see everybody I wanted to, but that’s just how it goes. I’m very glad Mr. Balmer finally made it out. And of course, lots of quality time was spent getting coffee in the morning, and pints in the evening, with such fine chaps as Mr. Boms, Mr. Dorny, and Mr. Van Damme and somewhere in the middle spending some time at my new favorite place in Austin, Frank.

23 March 2010

SXSW Photoset

I posted some photos from SXSW to Flickr. I might have averaged more shots this year than last, but that’s not saying much.