You can't hide an inner element, or completely change the way it acts just by making something "fluid". Making things fluid and using that to make bulletproof modules is a good first step, but it doesn't do everything we need it to do.
You can with LESS. I use LESS on all responsive projects and have done this many times. Obviously it is not vanilla CSS you write in but it is compiled into standard CSS. I really recommend trying it out before you reinvent the wheel.
you still have to base it off either the parent (.signup-page .testimonial) or a conditional that's only used on a particular page (.testimonial.compact). The media queries are sub-optimal but it's contained within .testimonial. Here's how it can look:
.testimonial {
media screen and (max-width: 900px) {
font-size: 0.8em;
}
&.compact {
media screen and (max-width: 1200px) {
font-size: 0.8em;
}
}
}
What if this thing shows up in 18 places, some of those change sizes on mobile, some of them in turn being reused in several places and then somebody changes something that affects the size (and therefore desired styles) of some but not other of those contexts, and adds 6 more contexts in which the size matters?
I want to say "When displaying a user profile, If there's more than X units of horizontal space, use the large profile image. If there's more than Y units of vertical space show their bio, trimmed to length but avoiding widow sentences and followed by ellipsis. If there's very little room at all, just show their user name."
I know what I want and I can describe it simply and in a way that a machine could implement, but using today's tools it will take significant developer (human) effort (which typically isn't within my client's priorities and ultimately gets neglected).
By all means, I would love to have element queries. They would definitely help in many cases. You would have to limit their use to just those areas of markup where container widths are explicit.
If it shows up in 18 places I bet you there will be two different contexts with the same container size, but different looks, and element queries won't help you at this point. You'll still need to tailor your CSS classes for different contexts.
Obviously if I want styles to vary by context of their container, I'll need to create those rules. The desire for and utility of being able to do that is not at all in question. I don't see how having such rules is in any way mutually exclusive with element queries.
lol, I'm losing all my valuable karma points!! I'm melting. No, really; I am sorry for being rude. I was being short sighted. I understand the issues encountered in responsive layout are new and evolving. I am sure you will create a great tool that fits your vision. I happen to think that LESS combined with media queries can accomplish any responsive layout I have yet to fathom. I hope that I can post more meaningful comments in the future.
