A big one for me... I would love to have CSS variables fully implemented and supported natively.

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

• Grid
• :host
• Intrinsic & Extrinsic Sizing (fill, max-content, min-content and fit-content)

• initial-letter - it specifies styling for dropped, raised, and sunken initial letters.
• :has - represents an element if any of the selectors, relative to the:scope of the given element, passed as parameters, matches at least one element.
• :not - a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector.
• :any-link - represents an element that acts as the source anchor of a hyperlink independent of whether it has been visited, that is, it matches every <a>, <area>or <link> elements with an href attribute. So, it matches all elements that match :link or :visited.
• Case-insensitive CSS attribute selectors (i) - a CSS attribute selector causes the attribute value to be matched in an ASCII-case-insensitive manner.
• CSS Grid Layout!

Also, support for some excellent pseudo classes like :

• :has
• :drag, :drop
• Descendant Combinator p >> img
• :blank

CSS Grid Layout looks promising. Looking for much better support than this in 2017.