March 6, 2015
It’s a situation we all know too good: You have that beautiful design turned up into a living prototype, media queries take care of all those different viewports and everything works just perfectly together. And then the client realizes that he needs two more items in the main navigation and suddenly your nice navigation starts to break apart and you start tweaking everything again and again. At least thats how i did it before. Not very flexible.
Heydon Pickering just wrote a great article on A List Apart about Quantity Queries for CSS which will make all of the above a thing of the past.
The @media query is the darling of responsive web design because it allows us to insert “breakpoints” wherever one layout strategy ceases to be viable and another should succeed it. However, it’s not just viewport dimensions, but the quantity of content that can put pressure on space.
Just as your end users are liable to operate devices with a multitude of different screen sizes, your content editors are liable to add and remove content. That’s what content management systems are for. This makes Photoshop mockups of web pages doubly obsolete: they are snapshots of just one viewport, with content in just one state.
With a clever combination of of nth-child() and first-child() pseudo-selectors he achieves to count elements in CSS. This makes it possible to apply different styling to navigation elements, when there are equal to or more than what you specify. If you haven’t read this article yet, you seriously should do that right now!
A List Apart – Quantity Queries for CSS
