I'm working on a couple of (unofficial) specs I hope see some traction, or at least inspire activity and discussion!
I think it would be cool if CSS could do element queries, and container queries, with a syntax like:
@element 'div' and (min-width: 200px) {
$this {
font-size: 14pt;
}
}
My WIP spec is currently located here: tomhodgins.github.io/element-queries-spec/element-queries.html
Also, I've love to see more responsive aspect-ratio solutions in CSS - I think it would be great if we had a property called aspect-ratio in CSS that suggested an aspect ratio to elements, though if both a width and a height are declared they would overpower it. Here's the syntax idea I had for that:
div {
width: 500px;
aspect-ratio: 16/9;
}
And the WIP of that spec here: tomhodgins.github.io/aspect-ratio-spec/aspect-rat…
As for Sara's wish - it's not that different than doing this:
<div></div>
<style>
@element 'div' {
$this {
width: 50px;
background: lime;
min-height: eval('Math.min(innerHeight,800)')px;
}
}
</style>
<script src=http://elementqueries.com/EQCSS.js></script>
In this case the div will be either 100vh or 800px tall, whichever is shorter :D