Will there ever be “media queries” for individual elements

[Historical Forums User]

This might sound like a strange question, so I’ll try my best to explain.

Responsive design is all about adapting layout and CSS depending on the device being used to view it (primarily by using media queries to detect viewport size). Sometimes though, I would like to adapt the layout or design of an element based on the width/height of that element, rather than the viewport size.

Let me give a better example. I have the following markup….

.....


.....






.........

At some screen widths the nav is to the right hand side of the content, but on smaller devices it goes above the content, so the size of the main content div both shrinks and grows as you shrink the viewport.

I’d like to use a 2 column layout on the main content when space allows but go to a 1 column layout when it doesn’t. Trouble is, all I’ve got to go on is the view port size. What I’d like to do is this…. (in pseudo-code which looks a bit like SASS)

.mainContent .firstContent{float:left;  width:50%}

.mainContent .secondtContent{float:left;  width:50%}



.mainContent @respond( max-width: 600px) {

.firstContent{float:none;  width:100%}

.secondContent{float:none;  width:100%}

}

OK, so the syntax I’ve chosen is probably unworkable, but can you see what I’d like to be able to do?

I’m not asking how to do this, I know it can’t be done without JS right now, but do you guys think it’ll be possible to do this in the future – respond to element sizes instead of just the viewport size?

[Paulie_D]

The size of an element is decided by

1. the content or
2. a specified width which constrains the content.
3. a specified width for elements with no content.

So I can’t see what you’re expecting to happen any differently.

[Historical Forums User]

Yeah, but you’re not always in control of those things. Either because there’s user generated content of unknown size or because you’re working with a fluid grid.

Let’s say for example that I have a fixed width sidebar and a fluid content area which fills the rest of the screen. I don’t know how big the content area is, all I know is that it is the width of the viewport minus 200px or so. Right now I have to do the math and style the layout of the content area around the viewport size, but it would be much easier for me to style it dependent on the size of the content area itself.

I’m prepared to admit, I may be the only one that thinks this…..

[Paulie_D]

As a designer I AM in control of those things or at least my design should cater for the various sizes that might be presented.

What you call ‘user generated’ content had better fit into my design the way I want it…otherwise what am I designing for?

[Historical Forums User]

Yeah, I see your point, but there must be a need for this otherwise people wouldn’t have come up with elaborate Javascript solutions for it.

If you look at something like ExtjS/Sencha then every element which is a widget has an observable event on it when it changes size so that layout changes can be made. It’s a common requirement for example to make a menu collapse when it doesn’t have enough room and this is solved by constantly listening to size change events on it’s container.

It just seems to me that the same could be achieved using conditional CSS, based on the size of an element. Personally I can think of a number of times when this would have been useful for me.

[Paulie_D]

@64Digital Ahhh…you see now you’re talking about widgets which leads me to believe that you are now on the CMS kick rather than basic HTML/CSS

That’s a whole other ballgame….not that I think it’s something that’s going to gain a lot of traction.

[Author]

Posts