Matthew Andrews
Product Manager ・ Software Engineer ・ Executive MBA Graduate ・ Tokyo Resident
Snippet: CSS Tabs without JavaScript or Hashtag URLs

Lately in the lab we’ve been experimenting with using <form> elements to shift the burden handling basic functionality from JavaScript to CSS and HTML to keep our apps as responsive and our JavaScript code as clean as possible, especially whilst the JavaScript engine (which, of course, with few exceptions is only able to do one thing at a time) is busy processing.

Check out the result.

Here’s the CSS that does the heavy lifting:-

1
2
3
4
5
6
7
8
9
10
11
12
13
input:nth-child(1):checked ~ .tabs li:nth-child(1) label,
input:nth-child(2):checked ~ .tabs li:nth-child(2) label,
input:nth-child(3):checked ~ .tabs li:nth-child(3) label,
input:nth-child(4):checked ~ .tabs li:nth-child(4) label {
/* Put the CSS to show the tab button is active here */
}

input:nth-child(1):checked ~ .sections li:nth-child(1),
input:nth-child(2):checked ~ .sections li:nth-child(2),
input:nth-child(3):checked ~ .sections li:nth-child(3),
input:nth-child(4):checked ~ .sections li:nth-child(4) {
/* Put the CSS to show the tab content is active here */
}

For the following HTML markup:-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<input type="radio" id="s1" name="s" checked />
<input type="radio" id="s2" name="s" />
<input type="radio" id="s3" name="s" />
<input type="radio" id="s4" name="s" />
<ul class="tabs">
<li><label for="s1">One</label></li>
<li><label for="s2">Two</label></li>
<li><label for="s3">Three</label></li>
<li><label for="s4">Four</label></li>
</ul>
<ul class="sections">
<li>Section one</li>
<li>Section two</li>
<li>Section three</li>
<li>Section four</li>
</ul>

If you don’t mind using hash tag URLs a potentially better alternative is on CSS Tricks.

What I wish I could have read before starting at the FT

Tutorial: How to make an offline HTML5 web app, FT style
There are plenty of great resources already written for offline HTML5 websites, but just getting a website to work offline is not enough.
In this tutorial we will build two versions of an offline website in order to demonstrate how to add functionality to an existing offline website in such a way that existing users won’t get left behind using an old version.
Read the full tutorial on the FT Labs website…

Earlier this month I wrote that – my first contribution to the Financial Times’ (my employer) technical web development blog.

I’d been at the FT for 6 months – and it really was the article I wish I could have read when I started – getting my head around the FT Web App‘s source code wasn’t easy as there were so few resources available on the internet to help. It seemed not many people had made client side database powered, responsively designed, touch enhanced fully featured offline web apps, even less written tutorials or books about it.

The feedback within the company and on Twitter as well as the analytics data to the post have been awesome – and it has inspired me to finally get around to starting this blog and write more.

I’m working on the follow up “Tutorial 2: Going cross platform with an FT style web app” – where I add full compatibility with IE10 (including Windows Metro) and Firefox as well as gracefully degrading partial support right down to IE6 – with a bit of luck part 2 of the tutorial will be online from the 1st September 2012.