miekd

After that awkward disco adventure a short while back, I needed another run through CSS3. Whilst in a car, I asked my fellow passengers: “What the hell should I make?” The game of memory quickly popped up in the conversation, and that is where the evening went. (I wasn’t the most social person for the rest of the evening, although I did leave my laptop in my bag during the BBQ.)

I must say I absolutely loved making this. The sheer ease of prototyping, combined with the ability to keep the game logic easily separated from the presentation was baffling. So after putting up the first version last friday, an amazing article by Ethan Marcotte on media queries came along. Why not play around with that too, then?

The goal was to get CSS3 Memory effectively usable on the iPhone and on the iPad in portrait and landscape mode, which worked out amazingly well.

Before this post ends up being a novel, here are a few quick lessons learnt:

1. Even with the power of WebKit, mixing rgba, background-size, box-shadow and border-radius with CSS3 transitions, will impact performance.
2. Watch the cascade when working with media-queries. I tried to re-use as much CSS across different devices and this bit me in the ass a few times. More on that soon. (the media-queries, not my ass, of course)
3. Mind yourself when mixing CSS3 animations with CSS3 transitions. The animation will halt as soon as the transition becomes active. Luckily this was not vital to the game, I just bumped into it when creating the end-game view.

Now, have at it!