Element Queries: Prollyfilled

Smashing Magazine recently tweeted about two Blog articles: Responsive Containers by Andy Hume  and Media Queries Are A Hack by Ian Storm Taylor  basically arguing that media queries are not enough, we need “element queries”.  Fortunately, our friend François REMY had proposed something like this to the CSS Working Group and based on some work with Mozilla’s Daniel Buchner has created a prollyfill with HitchJS to let you use them now, fork it, provide feedback and help make the Web a better place for us all.

Download the latest version of HitchJS, mark one of your stylesheets with the data-hitch-interpret flag, require it and get rolling:

For a quick look at the basic proposal, see the draft in the HitchJS Repo – for a more in-depth look, check out his article on Element Query prollyfilling/concepts.

About :time – Taming the standards process

Have you ever had an idea for something that you think would make the Web better?  A new feature in CSS Perhaps?  Lots of people do.  The W3C has an open process and for the average Jane (or Joe) the first step is posting it to the official W3C list – in the case of CSS that is www-style.  A lot of ideas are shot down pretty quickly and that’s that.  Things that do eventually get picked up quite often take a long time to get through any kind of process and become something usable.  This past week, we got something new added to the official W3C candidates for consideration in Selectors Level 5 – and the whole process took only a couple of weeks.  What’s more – we have an implementation too : I’ve posted a silly, but followable demo/example..

A Case Study… 

A few weeks ago, a first time poster to the www-style list named Julien Dorra sent in an idea for how we might use CSS to sync the appearance of HTML based subtitles using a new microformat he is developing called MetaFragments (note, that is the original inspiration, not the final proposal) that came out of his participation in the Mozilla No-JS Dev Derby.  The immediate response wasn’t overwhelmingly positive – there are already technologies and proposals for how we do subtitles, but there was a little constructive criticism and conversation.

I began an offline discussion with Julien proposing that perhaps Hitch could help him out.  If he would be willing to write the draft, I would develop a Hitch for him.  I explained the concept – writing a draft forces you to really think about it.  Having an implementation lets people play with it and see what they might really do with it.  With a little iteration, the idea tends to either get much better or prove to be problematic.  Another upshot is that not everyone needs to find it as useful as you do with Hitch – if it solves your problems well – good for you.

Julien was immediately responsive and started up a Google Doc explainer and draft and very quickly (within an evening or two) we solidified an API and had an implementation.  Suddenly lots of interesting ideas and use-cases came out of it… Think of all of the rich things you could do with the ability to sync media with simple DOM/CSS that other (more complicated) solutions do not easily provide:

  • Multi-media slide shows
  • Provide optional commentary on media – in sync
  • Show reference/related links based on the content – in sync
  • Apply superimposed images or filter effects on video itself  – in sync
  • Show related images, charts, graphs – in sync
  • Provide UI to allow users to skip a video after seconds of play
  • Show or change the UI at the end of a video
  • etc..

Really, when you get down to it – there are a lot of possibilities! With some renewed confidence and new examples he posted additional use cases, was able to respond to “we already do this” kinds of objections, etc. pointing to a document and having a working implementation in his pocket that he could use now and share with others.  Very quickly it turned around and actually expanded and further improved by Tab Atkins (W3C member and author of several important drafts):  Instead of just “media” elements – why not make it for anything with the concept of a timeline?  Shouldn’t be a problem – and we can just call it :time().  Additional interesting discussion ensued…

A week later, W3C added a wiki page for things being considered for inclusion and the first new thing added (there are carry overs from Level 4) was :time()

Now – how cool is that?

This is a win for both Hitch and CSS at large…

I discussed this later with Julien and he said that without Hitch, this idea would likely have just died off like so many others. That same week, Adobe put forward their own pseudo-element proposal and, in manner similar to Hitch, they created a scripted implementation/shim and provided a working draft so that people can try it out.   Since then, we’ve discussed with some of the guys responsible for that the possibility of growing tools (like Hitch) and common code to help this kind of approach be used more – it has the possibility to streamline the processes, give people something that works now, upgrades easily and is truly future proof.

Hitch 0.6.1 Released.

We have been a little remiss in announcing updates via the blog because most of them have been pretty minor updates. This week, however, we released 0.6.1 fast on the heels of 0.6 and it is probably worth mentioning as it includes quite a few updates, some code rework and bug fixes thanks to feedback and some interesting new hitches and use cases people have discussed with us.

We hope to share some new articles, hitches and links soon…In the meantime, we love the feedback…

Content based CSS: -link-*

This is the 3rd in a series of posts about writing CSS for HTML based on the content of selectors and not just the selectors themselves. As in our first article, we will be discussing how Hitch lets you use ideas currently drafted in CSS Selectors Level 4, right now.

It is frequently the case that we want to style the links in our site according to the level that they correspond to in the URL path – the information architecture.

For example the URL path /2012/05 is important because it represents a month and /2012/05/05 is important because it represents a day. The markup for these is very simple:

<a href="/2012">View 2012</a> 
<a href="/2012/05">View May</a> 
<a href="/2012/05/05">View May 5th</a>

With the current CSS standards there is no way to apply a style based on the path nesting. Today, we attempt to achieve something like this by attaching related classes or impose additional structures. CSS Selectors Level 4 addresses this and once again, Hitch lets you realize the benefit today…

Simply require the hitch and then use it:

 /* add some support for link selectors */ 
@-hitch-requires http://www.hitchjs.com/use/bkardell.links/1.js; 

/* links with /-- should be black */ 
a:-links-local(0) { color: #000000; } 

/* links with /--/-- should be blue */ 
a:-links-local(1) { color: #336699; } 

/* links with /--/--/-- should be gray */ 
a:-links-local(2){ color: #333333; }

With the Link Pseudo Class filters you can specify a style for any number of nested paths and even base the style on fragment identifiers in the URL of the link.

Selectors Level 4 also allows us to select an anchor if it is currently the target in the browser (matches the #hash). Hitch can give you similar capabilities now using the same hitch we already required. To illustrate, given the following markup:

<a name="Summary">View 2012 Summary</a>

You can style it like this:

/* the current target's background should be yellow. */ 
a:-links-target(){ background-color : yellow; }

If the page URL is http://example.com/index.html#Summary then that link’s background would be colored yellow.

The CSS rules are subtly different (but still very standard) while the functionality is extremely new and currently not doable without Hitch.

Doesn’t that feel better? Take a look at Hitch for more expressive CSS!

Note: Hitch is a rather new project. It has amazing potential and also a few things yet to be built. It’s open sourced and available on Github: https://github.com/bkardell/Hitch/. Fork it. Change how CSS works!

Introducing Hitch… Expressive CSS Power and HTML Widgetry

Since this is our maiden blog post, it probably makes sense to explain just what in the name of Almighty Bob Hitch is.

The easiest way to understand it is to watch this handy video…


In a nutshell though, Hitch is a library which, once included into a page allows amazing new things to be expressed in your otherwise ordinary CSS and HTML…

If you are the author of CSS and HTML – it allows you to express wildly complex and amazing new things without writing a line of JavaScript…

If you are a JavaScript ninja, it provides a plugin model just like jQuery which allows you to expand the capabilities and provide even more amazing things for those authors to use.

Read more about it over at our hitchjs.com where you can also find a browsable repository of all of the plugins (we call them “hitches”) that you can use and information about writing and submitting your own.