CSS Wizardry

Zebra-striping rows and columns

Harry Roberts — Tue, 31 Aug 2010 20:54:01 +0000

Zebra-striping tables is certainly not a new thing; it has been done and discussed for years. They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one another. I say allegedly, there has been research into their effectiveness, conducted by Jessica Enders over at A List Apart which proved pretty inconclusive.

Striping a table’s alternate rows couldn’t be simpler. By programatically adding a class of odd or suchlike to every other you can then apply styles to this row (usually a pale background colour) and create zebra-stripes. An even better method would be to ditch the extraneous class and use the nth-of-type selector, thus:

tbody tr:nth-of-type(odd){
  background:rgba(255,255,136,0.5); /* Pale yellow with 50% opacity */
}

What the nth-of-type selector is doing here is looking for every odd in the , that is to say the 1st, 3rd, 5th, 7th and so on.

By understanding this, we can apply that logic to create zebra-striped columns, too. Thus:

tbody td:nth-of-type(odd),
thead th:nth-of-type(odd){
  background:rgba(255,255,136,0.5);
}

Above: Here we target every other in the , and in the .

We can also combine the two, to create a table where every other row and every other column is striped simultaneously, and by using the rgba() colour declaration we can effectively layer the stripes, therefore showing where they cross over. The code for this simply combines the two:

tbody td:nth-of-type(odd),
tbody tr:nth-of-type(odd),
thead th:nth-of-type(odd){
  background:rgba(255,255,136,0.5);
}

You wanna see a demo?

Sure thing, here you go…

Addendum

After questions about browser support, I have decided to add a little onto the article…

The selectors involved here are only supported in CSS3 capable browser, that is to say pretty much anything but Internet Explorer. However, due to zebra-striping’s negligible benefits and inherently progressive nature, I don’t feel that it is a feature that is important enough to warrant full cross-browser support. Research shows that tables are just as usable without zebra-striping as with, therefore in IE et al, the user is not receiving a sub-par experience.

Of course if you do want to support Internet Explorer, you can always revert to programmatically adding an odd class to , and elements.

Semantics and sensibility

Harry Roberts — Mon, 09 Aug 2010 16:34:46 +0000

For a while now, sensible naming conventions and semantics have been confused. Things such as class="left" or class="clear" have been deemed insemantic, whereas in reality, semantics really doesn’t stretch that far… Let me illustrate with some code examples:

Insemantic code

The following code is just plain wrong, it’s insemantic, using the wrong elements for the wrong job:

Home
About
About
This is some page text about some stuff...

Insensible code

This code is perfectly semantic, it just uses some silly classes:


  This is a heading

Semantics concerns itself with elements…

…and not the names assigned to them. Using the correct element for the correct job is as far as semantics goes. Standards concerning naming of those elements is all about sensibility.

Semantics sets a standard from which it is very difficult to stray. Headings are marked up with a , a list with

and

all bear different names, but are all equally as semantic. All three are examples of semantic and sensible code.

However, take the following examples:

and

. These examples exhibit semantic code, but with insensible namings.

Be sensible, for our sake

Semantics should be adhered no matter what—web standards are good. Naming however is totally down to you, you can call your elements whatever you wish.

and

are all possible, but not sensible.

“Always code like you’re working in a team, even when you’re not.”

I have actually seen markup like this, and the developer’s reasoning was ‘I like to keep my markup as lean as possible, and I know what a, b and c do’.

While this is all correct, and passable, it’s not really very sensible. He might know what a, b and c do, but what about the person who inherits the project? For all his justification of code bloat was somewhat advanced (really decreasing markup size), the impression the next guy to see his code will have will be ‘WTF was this guy thinking?!’ Always code like you’re working in a team, even when you’re not.

Final word

“An ID/class should be as short as possible but as long as necessary.—Jens Meiert

Semantics and sensibility are not the same. Anyone who tells you that class="left" is insemantic is wrong. Be semantic and be sensible. Pick names which are descriptive. An ID/class should be as short as possible but as long as necessary.

Thoughts on Dribbble

Harry Roberts — Tue, 11 May 2010 10:56:59 +0000

For a while I was really gutted I didn’t have a Dribbble invite, I posted a tweet requesting one, and Drew McLellan gave me one. From the off I was kind of disappointed with it. It’s just Twitter with screenshots. Anyway, I wrote these thoughts down the other day elsewhere, and I thought I’d do a mini-post to share them more publicly. They are totally unrehearsed, unedited and completely off the cuff:

“I think it’s just another place where the more famous designers just pat each other on the back, regardless of what they actually produce.
It’s too elitist and the more known designers only follow each other, leaving less known people following them but their own work barely been seen. This in turn fuels the cycle—the famous get more so, while the more humble designers go unnoticed. I am seriously unimpressed with Dribbble”

So, if you’re really really wanting a Dribbble invite, don’t worry; you’re not missing much.

On a more personal note…

Harry Roberts — Wed, 14 Apr 2010 09:50:23 +0000

Lately, I’ll admit, I’ve not been too hot on replying to emails and suchlike. If you have emailed me recently I do apologise, however I’ve not turned my home PC on in almost two weeks now, and it feels great. I spend eight hours a day in front of my computer at work, and usually the first thing I do when I get home is turn the computer on there. I could sometimes spend over half of my day sat at a PC.

While I have written several resources in my spare time, and thoroughly enjoyed each, they are very time consuming. The exposure and nice comments they bring are great, but sometimes it’s hard to keep on putting in hours and hours of work in exchange for a pat on the back—that’s why so few people actually take the time to do it.

Photo by @suzehaworth

So, having gotten back into trials lately, combined with improving weather, I’m devoting more spare time to that at the moment. Evenings not spent with Suze will most likely be spent riding. Not at my PC.

This is not to say I won’t be writing articles any more, far from it. I love writing articles, and as CSS Wizardry’s exposure has rocketed recently (thanks to people like yourself) writing articles is even more rewarding than ever, and the quality of the comments and feedback is increasing too. I have article ideas all the time, and will post whenever I have the chance. All that’s happening at the moment is I’m stepping back from the PC for a bit, for my health and sanity more than anything. Too much time at the PC can’t be doing me much good. A result of which is that I haven’t been on email for a couple of weeks now…

If you have emailed and it is urgent, I apologise. Please tweet at me as I’m always on Twitter. I’ve also had emails regarding permission to translate Web Design+—if you’d like to translate it that’d be great, you have my permission to do so (provided you don’t pass it off as your own, of course).

Also, regarding freelance work; I shan’t be undertaking any form of freelance for the foreseeable future, sorry…

Keep following me on Twitter though, as I’ll still be posting links and things as ever, and add the CSS Wizardry RSS feed so any articles I do write, you’ll hear about first.

I’m not going, just relaxing. And I think you should too. Move away from your computer, get outside and have fun!

Cheers,
Harry

Building sites without using IDs or classes

Harry Roberts — Wed, 07 Apr 2010 12:17:09 +0000

This morning, for one reason or another, I decided to have a go at coding up a page without using any IDs or classes in my markup, and therefore none in my CSS. I’m not sure why I tried it, I guess I just did… In order to make it a fairly painless job I dove straight into the browser and coded up a simple header, footer, two column layout. View the demo and be sure to view the source.

Using a combination of more advanced selectors such as sibling and nth-of-type you can target elements based on their position in the markup rather than a given name. The practical upshot of this is that your markup is much leaner and cleaner, removing class and ID names has a notable impact.

Using advanced selectors

For a complete list please see http://www.w3.org/TR/css3-selectors/

The more advanced selectors take information about an element to determine whether it matches a certain criteria, for example body>div will target a div that is a direct and immediate descendant of the body; p+p will target a paragraph immediately preceded by a paragraph.

On this basis, you could select (for example) your main content div by knowing that it’s the second div in your content wrapper: body>div div:nth-of-type(2). Broken down we have:

body—sets the root
>div—the first div inside the body (the wrapper div)
div:nth-of-type(2)—the second div in the wrapper (just after the header div).

Why I think this won’t catch on

For the time being, let’s completely disregard that Internet Explorer completely disregards these selectors…

As you can see from the above example, targeting the single, lone, unique content div has taken two advanced selectors and 27 bytes. The selectors are fixed, the content div will always have to be the second div in the div that is an immediate child of the body. This is incredibly restrictive. Surely #content{…} is far better than body>div div:nth-of-type(2){…}…?

For the sake of ease, instead of rambling about pros and cons, I’ve simply drawn up a list of advantages and disadvantages:

Advantages:

Leaner markup.
Promotes more sensible structuring of code.
Promotes semantics.

Disadvantages:

Difficult syntaxes to remember.
Extremely restrictive—elements are styled based on their location meaning that any moving/restructuring means all styles tied to an element are lost. This leads me on to…
The CSS is no longer just describing style, it also describes structure. CSS is a styling language, not a markup one.
Arbitrary elements such as images and divs that change depending on page content (blog posts for example) aren’t fixed enough to be styled based on their structure. This means that any variable content will require IDs and classes anyway, so you might as well us them across the board as opposed to a mix of with and without.
Difficult to understand. I wrote the CSS for the demo page and I’m having a hard enough time doing the calculations to work out what does what. Imagine inheriting that!
Jenga. As soon as you alter your markup, the structure dependent CSS will come falling down too, what might be the first child might become the second, making the second child the third and so on, creating a domino effect.

Final word

While the more advanced CSS(3) selectors are impressive, and incredibly powerful, they aren’t flexible enough to allow any large dependency upon them. That, and they’re more awkward to understand than the tried and tested ID/class ‘hooks’ we know and use. There are far too many downsides to make cleaner markup a big enough plus-side in my opinion… Oh, and Internet Explorer doesn’t seem to honour any of them, but that can’t have come as much of a surprise.

I rode through Leeds on a bike with no seat

Harry Roberts — Sun, 14 Mar 2010 17:13:26 +0000

As well as being a web developer and type geek, I like to bounce around on a bike with no seat… Trials is something I’ve been doing for a couple of years now, but I always did it on a smaller mod trials bike, with 20″ wheels. This was okay for a period, but after a while it became painfully clear that a 6′4″ guy on a bike with small wheels looked remarkably like a clown. So, after six months out of the sport, this week I went to town and forked out £1200+ on a stock, a type of trials bike with 26″ wheels.

Oh, and the post title is a reference to this song.

Today, Suze and I decided to head out for a few hours so I could ride, and she could take some pictures with her iPhone (yes, the following were all taken and edited on her iPhone!).

Apologies for poor video quality.

Drop gap

Small drop

Stoppie

To back wheel

Gap

On top

I’d been trying this one for ages. We’re talking months…

Going down

…gotta get back down after though.

Wait, no seat?

I know, I know; there’s no seat. It’s meant to be like that for a few reasons:

The shape of the frame means that the pedals come up to higher than any seat would.
You spend so little time sat down when riding trials that a seat is almost entirely redundant.
The place where a seat would be means it could cause (males in particular) some serious damage.

30 days without an iPhone

Harry Roberts — Mon, 08 Mar 2010 12:15:17 +0000

As of 6 February, 2010, I have been without my iPhone. It’s been
unbelievably difficult for me, as a web developer and geek, to
properly function without it. You do not realise how reliant
everyone is upon technology until you lose it. Unsurprisingly it is
really quite hard going from having the whole internet at your
call and fingertips, to going to a big, archaic pre-iPhone piece
of rubbish. If this experience taught me one thing though, I am
very dependent on technology, simply just to wile away the time;
even sat in bed, my iPhone was a major part of me seeing what
revelations the web had in store.

Do I need an iPhone?

Of course I don’t, but I do have one, and that’s what I’m used to. However, after a few days I kind of got used to, and almost enjoyed (almost) not being connected to the internet, the internet that I spend 8+ hours a day sat connected to.

The problem

Sure, the first few days were okay. And I had bought into a policy whereby the damaged item is replaced in 48 hours. I rang up and was told the it would in fact take 10–12 days. It took 30. Anyone who owns an iPhone surely knows that that just isn’t easy.

The insurers name? Read the opening paragraph again, closely ;) Shh…

Anyway, anyone following me on Twitter will know that this whole farce has really wound me up, with error after error on the insurers part. You will also know that I have refused to name them. This was for the sake of professionalism, while ever they were messing around, and I was keeping it amicable, they were 100% in the wrong, nothing could come back to me, nor could my actions influence theirs (i.e. me being rude making them even slower etc.). It didn’t really work to my advantage, but still, better that than be a rude shouty b*stard to them, eh?

Thai-po-graph-e

Harry Roberts — Thu, 04 Mar 2010 09:22:15 +0000

This is just a silly little something I threw together yesterday. A small pictogram using a map of Thailand, children’s TV character Po, a graph and the letter e to represent, well, Typography.

Too much time on my hands!

Thai • Po • graph • e

Moving forward is holding us back

Harry Roberts — Tue, 02 Mar 2010 22:03:28 +0000

For years, web developers have been looking forward to that next feature, that new and monumental shift which has allowed them to break away from the shackles of obsolescence and adopt new and forward thinking technologies. But it is beginning to come full circle—that thirst for new technology has slowly brought us back to square one, reimposing the constraints that we have, for years, tried to rid ourselves of. Moving forward is holding us back.

Okay, okay. That was a very alarmist intro. There is no web developers’ apocalypse around the corner (not that I know of anyway, please don’t take anything I say about the apocalypse as read. I don’t want that responsibility.), nor are we going to have to regress to using tables and spacer GIFs again. The real issue here is that with all this new technology that keeps emerging and exciting web developers is unwittingly reimposing the restrictions of yesteryear…

Screen resolutions

Remember trying to break away from 800×600px?

With the movement toward a more mobile web, screen resolutions are in fact getting smaller. The iPhone’s maximum resolution is 480px, increasingly popular netbooks are set at about 1024px wide. Such a shift toward mobile and portable devices mean that screen sizes are actually getting smaller.

In my opinion, iPhones and other mobile devices should be handled separately, serving them device specific CSS. Netbooks on the other hand are still ‘desktop’ machines like any other. Their smallness is their key feature, and at 1024px horizontal resolution, they aren’t that small anyway…

With the 960 Grid System, and an optimum line length of 52–78 characters, sticking to 1024px shouldn’t be that difficult anyway. I believe that although desktop monitor sizes are generally getting larger, other equally important technologies are creeping up, and as responsible developers you should cater for them. Sure you may want to start adopting the 1080 grid, which is all well and good if you know your audience, but to cater for the majority, we’re not ready to burst 1024 yet.

Connection speeds

Remember building for 56k dial up connections? (I don’t)

Where permanent and fixed connections are getting much faster, connections to mobile devices through means such as 3G are much slower. The ability to optimise sites to be fast loading over such connections is getting more important. As edge-case resolutions are getting smaller, edge-case connections are getting slower. Much slower.

A word on Flash

Remember 2Advanced? A site of yesteryear…

Flash seems to be dying a death anyway these days, slowly being superseded by Javascript and Canvas et al. However, what was once a fantastically powerful technology has been ousted completely from Apple’s i products, making in an inviable option for content which needs to be universally accessible.

A real life example?

Anyone with an iPhone will know what I mean—spending any amount of time on an iPhone loading poorly optimised sites is a real grind, and via some sensible optimisation these problems can be easily alleviated.

However, a more interesting example might be the one that happened to myself… When we first started at Venturelab we really were building the company from the ground up. For the first few weeks we were without desktop machines and internet. I was working on a 10.1″ netbook with a screen resolution of 1024×600px, and over a poor 3G connection via a dongle.

“Accessibility isn’t just about disabilities, it’s about varying degrees of ability to access content.”

Working in this manner really made me wonder whether enough people are delivering content in a manner which is accessible on numerous levels. Accessibility isn’t just about disabilities, it’s about varying degrees of ability to access content. As responsible developers your content should be accessible through a full spectrum of means and in an acceptable manner.

All it takes is some decent optimisation (which is also set to reap SEO benefits) and a reasonable page layout and you’re already halfway there.

A quick note on border radius

Harry Roberts — Tue, 02 Mar 2010 10:34:55 +0000

This is a quick post concerning the border-radius CSS3 property, and the syntax behind it. After coming across this site earlier today via Twitter I remembered my initial frustrations with lack of uniformity across user agents and their required syntax in order to create round corners; Firefox requiring a different format to Webkit and the CSS3 spec was pretty annoying.

However, it’s not all that bad. As border-radius.com would have you believe, the syntax to create an element with top–left and bottom–right corners with a 50px round, and top–right and bottom–left corners with 10px rounds would be:

-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 50px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-radius: 50px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;

Wrong, you can actually use the border-radius shorthand to nail this in three lines:

-moz-border-radius:50px 10px 50px 10px;
-webkit-border-radius:50px 10px 50px 10px;
border-radius:50px 10px 50px 10px;

The sytanx follows the following rule: border-radius:top–left top–right bottom–right bottom–left;. I’ve tested this in Firefox (-moz-border-radius), Webkit (-webkit-border-radius) and Opera (border-radius) and it works just fine.

Addendum

You’d think Webkit would just be Webkit, right? Wrong. This works in Chrome but not Safari. I’ve had reports that Safari 4.0.4 (I guess it’s not found it, get it? Oh never mind.) doesn’t work. Useful…

Still, this version will work, and is still considerably shorter:

-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius:50px 10px 50px 10px;
border-radius:50px 10px 50px 10px;