Bite-sized CSS & HTML nuggets

Responsive containers & selector queries – an interesting proposal

Andy Hume of Clearleft has written about an interesting idea: a new CSS syntax that allows you to apply styles depending on the dimensions of the element itself. So rather than queries on the whole page – which media queries handle – you can add queries on elements themselves: selector queries.

.signup-form @selector(min-width: 300px) {
    .label {
        display: block;
        }
    }

Being able to adjust a single component based on its current layout is extremely powerful. It allows more re-usability of code, and it encourages designers to think about how an individual component adapts on its own, outside of any given layout.

To simulate the concept he wrote a JavaScript implementation using data-* attributes. More about the idea and the project on Andy’s blog.