an ordinary blog — andr3.net

rss feed

my lifestream rss feed

pages

Clever lists with CSS3 selectors

Last week, a guy from work who can afford to only support webkit browsers—hey Luis, I'm looking at you!—, had hit kind of a brick wall and was asking for help on the company design mailing list... my spidey sense kicked in. I hope this doesn't sound too cocky, but I love the smell of a challenge in the morning.

The problem

He wanted to have the <li>s from an <ul> to occupy the entire width regardless of how many they were. If there was only one list item, it would have a width of 100%. Two would have 50% each and three of them, 33.33%.

Also, he wanted to accomplish this using CSS only, without having to figure out the number either using javascript or a server-side language and apply a class accordingly (a natural and understandable cop-out if you have to support all browsers). But this is 2009 and he was looking at webkit. There has to be a way, I thought.

So after scratching my head for a bit, I put together a test page and started throwing selectors together and attempting to figure it out.

The Solution

With the pseudo-class :nth-child you can easily select elements based on their position in the list of children. This allows you to select one element at a time.

But you need an extra something to take into account how many siblings it has. That was the whole point.

In comes :nth-last-child. The difference between the two is that nth-child applies to the nth child counting from the top (ie, the child that has n-1 elements before it) while the nth-last-child applies to the nth child counting from the bottom (ie, the child that has n-1 elements after it!).

That said, we could use both of this pseudo-classes together to create sets of rules that would only apply when there are one, two or three items in the list!

A screenshot of the solution

Code

Here's the code.

/* one item */
li:nth-child(1):nth-last-child(1) {
width: 100%;
}

/* two items */
li:nth-child(1):nth-last-child(2),
li:nth-child(2):nth-last-child(1) {
width: 50%;
}

/* three items */
li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
width: 33.3333%;
}

I wish I could find one rule that would automatically figure out the width regardless of the number, instead of enumerating them all. Or even find an expression of the type an+b that would collapse all those selectors into one... But for now, this'll do.

You can test it if you have either Safari or Firefox 3.5 (beta) on this demo page.

Why am I telling you this?

What made CSS2 so successful or powerful wasn't just what was written in the spec. It was also the myriad of articles that popped up all over the web that showed how to combine little aspects of the spec to amount to pretty amazing things.

In conclusion, the sliding doors, the faux columns or the running with sprites articles of CSS3 are still waiting to be written.

So, what are you waiting for? Push the envelope and try to discover new ways of using the properties, selectors and media queries to achieve something otherwise impossible.

Just let us know when you do.

SAPO Sessions #2: Javascript Done Right (video)

As some of you might have heard already, SAPO is doing a series of talks on interesting subjects and have dubbed such events as SAPO Sessions. As part of my newly acquired job functions, I gave a talk a few weeks ago entitled Javascript Done Right. Although the title is a bit cocky, I did try to share a few concepts that, if taken seriously, can make the web a little better for all of us, the users.

I talked about progressive enhancement [alistapart.com] and how writing unobtrusive javascript can help you enhance your websites without creating barriers for your users, in terms of both usability and acessibility.

If the previous paragraph spiked your interest, then go ahead and watch the video. I do apologize for sounding so arrogant at times, but I hope you bear with me 'til the end.

I know I should have written this post in Portuguese, but I'm not mixing up languages until I have setup a proper language filter on the blog. Either that or a separate blog written in Portuguese... Anyway, moving on.


Video

Slides


If you have any questions, suggestions or criticism, don't hesitate to send them my way either on the comments, via email or twitter.

It's back on!!

After a year and a half in the making, Streeter made his move!!

The great part of this is that the Prank War is back on!


Watch Prank War 7: The Half Million Dollar Shot on CollegeHumor


BTW, if you haven't seen these guys' original videos, you're so missing out. Best comedy show I've seen online. I recommend the Hardly Working series. ;)

81st Academy Awards

The Oscars posterIt's that time of the year again. The Oscars are here.

For the past few weeks, I've been making my usual effort to watch the most of the movies that have been nominated this year. Yeah, I know, I'm a sheep. But gladly so.

For reference, I've watched the following movies (in no particular order): Doubt, The Dark Knight, Changeling, The Reader, Revolutionary Road, The Wrestler, Milk, Benjamin Button, Slumdog Millionaire, Tropic Thunder, WALL-E, Kung-Fu Panda, Happy-Go-Lucky and, of course, a few others non-nominated movies.

So, without further ado, here are my predictions:

  • Actor in a Leading Role

    My hunch: Mickey Rourke FAIL

    Winner: Sean Penn

  • Actor in a Supporting Role

    My hunch: Heath Ledger EPIC WIN!! (see my review of the Black Knight)

    Winner: Heath Ledger

  • Actress in a Leading Role

    My hunch: Kate Winslet FTW! (best acceptance speech of the evening)

    Winner: Kate Winslet

  • Actress in a Supporting Role

    My hunch: Viola Davis FAIL

    Winner: Penélope Cruz

  • Animated Feature Filme

    My hunch: WALL-E FTW!

    Winner: WALL-E

  • Art Direction

    My hunch: Changeling FAIL

    Winner: Donald Graham Burt, Victor J. Zolfo (Benjamin Button)

  • Cinematography

    My hunch: The Curious Case of Benjamin Button FAIL

    Winner: Slumdog Millionaire

  • Directing

    My hunch: The Curious Case of Benjamin Button FAIL

    Winner: Danny Boyle (Slumdog Millionaire)

  • Writing (adapted)

    My hunch: Slumdog Millionaire FTW!

    Winner: Simon Beaufoy (Slumdog Millionaire)

  • Writing (original)

    My hunch: WALL-E FAIL

    Winner: Dustin Lance Black (Milk)

  • Best Picture

    My hunch: Slumdog Millionaire FTW!

    Winner: Slumdog Millionaire

MY WINNER

I couldn't leave out the best movie I've watched in recent years, which, IMHO, deserved the Best Picture award this year: SEVEN POUNDS!!!



What do you think? Any comments? :)

Happy Geek Festivities!!

It's right around the corner! A once in a lifetime event! Actually, it won't happen again!!! The UNIX timestamp is approaching yet another landmark. It will be 1234567890 seconds counting from midnight 1st January 1970 aka UNIX Epoch!!

And check this out... our good friend Gamboa threw us a webparty! Let's all open our browsers during this historical event and party on!

He has built a countdown timer that will throw a bunch of fireworks when the time comes... and it will log everyone who's viewing any page that includes his tiny javascript counter! He'll publish the list of websites who hosted this timer & respective count of atendees! :)

So here's mine. But there are plenty other websites joining the party!
(if you're reading this in an rss reader, jump on over to the website!)



To participate, just add this tiny script to your page:
<script type="text/javascript" src="http://pdvel.com/happy1234567890/happy1234567890.js"></script>

May this turn-of-page event bring you good fortune on your geeky endeavours!

Cheers!

↑ top