There was a repeated rallying cry at the Responsive Day Out. It was the call for more sharing—more sharing of data, more sharing of case studies, more sharing of success stories, but also more sharing of failures.
In that spirit, I thought I’d share a pattern I’ve been working on. It didn’t work, but I’m not going to let that stop me putting it out there.
Here’s what I wanted to do…
Let’s say you’ve got a list of items; modular chunks of markup like an image and a caption, for example. By default these will display linearly on a small screen: a vertical list. I quite like the way that the Flickr iPhone app takes those lists and makes them horizontal—they go off-canvas (to the right), with a little bit of the next item peaking out to give some affordance. It’s like an off-canvas carousel.
I’d quite like to use that interaction in responsive designs. But I don’t want to do it by throwing a lot of JavaScript at the problem. So I thought I’d attempt to achieve it with a little bit of CSS.
So, let’s say I’ve got a list of six items like this:
<div class="items">
<ul class="item-list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul><!-- /.item-list -->
</div><!-- /.items -->
Please pay no mind to the qualities of the class names: this is just a quick proof of concept.
Here’s how that looks. At larger screen sizes, I display the list items in groups of two or three, side by side. At smaller sizes, the items simply linearise vertically.
Okay, now within a small-screen media query I’m going to constrain the width of the container:
.items {
width: 100%;
}
I’m going to make the list within that element stretch off-canvas for six screens wide (this depends on me knowing that there will be exactly six items in the list):
.items .item-list {
width: 600%;
}
Now I’ll make each item one sixth of that size, which should be one screen’s worth. Actually, I’m going to make it a bit less than exactly one sixth (which would be 16.6666%) so that a bit of the next item peaks out:
.item-list .item {
width: 15%;
}
My hope was that to make this crawlable/swipable, all I had to do was apply overflow: scroll to the containing element:
.items {
width: 100%;
overflow: scroll;
}
All of that is wrapped up in a small-viewport media query:
@media all and (max-width: 30em) {
.items {
width: 100%;
overflow: scroll;
}
.items .item-list {
width: 600%;
}
.items .item {
width: 15%;
}
}
It actually works …in some browsers. Alas, support for overflow: scroll doesn’t extend back as far as Android 2, still a very popular flavour of that operating system. That’s quite a showstopper.
There is a polyfill called Overthrow from those mad geniuses at Filament Group. But, as I said, I’d rather not throw more code at the problem. While I can imagine shovelling a polyfill at a desktop browser, I have a lot of qualms about trying to “support” an older mobile browser by giving it a chunk of JavaScript to chew on.
What I really need is a way to detect support for overflow: scroll. Alas, looking at the code for Overthrow, that isn’t so easy. Modernizr cannot help me here. We are in the realm of the undetectables.
My pattern is, alas, a failure.
Or, at least, it’s a failure for now. The @supports rule in CSS is tailor-made for this kind of situation. Basically, I don’t want any those small-screen rules to apply unless the browser supports overflow: scroll. Here’s how I will be able to do that:
@media all and (max-width: 30em) {
@supports (overflow: scroll) {
.items {
width: 100%;
overflow: scroll;
}
.items .item-list {
width: 600%;
}
.items .item {
width: 15%;
}
}
}
This is really, really useful. It means that I can start implementing this pattern now even though very few browsers currently understand @supports. That’s okay. Browsers that don’t understand it will simply ignore the whole block of CSS, leaving the list items to display vertically. But as @support gets more …um, support …then the pattern will kick in for those more capable browsers.
I can see myself adding this pre-emptive pattern for a few different use cases:
- On the home page of Huffduffer, there’s the list of popular items and the list of new tunes.
- On the tunes page of The Session, there’s the list of newest tune settings, newest comments, etc.
- On the Clearleft blog, there’s the list of recent blog entries.
Feel free to poke at the example code. Perhaps you can find a way to succeed where I have failed.