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.


3 thoughts on “Element Queries: Prollyfilled

  1. Hi!
    This is an awesome hitch, we actually started to use it in production last week, and it works really well!
    One thing though, it would be nice if the docs where changed to include the required css from Francois’ example on github:
    .resize-sensor, .resize-sensor > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;

    Without that piece of css, you’ll end up with a huge gap at the bottom of any element with -js-min-width or -js-max-width ..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s