Element Query and Selector Media Query Types

Hello hello!

With the success of Picture Element/@srcset, I feel we should continue the
momentum. I have a suggestion for two new media-query types, they are:
*content* and "*selector*" (including pseudo selectors) queries.  Both
would utilize the same media-query features that already exist and extend
the use of media-queries to create more modular, portable, reusable code.

The idea is have a solutions for the "Element Query" and "Content Query",
which has been handled frequently by JavaScript.


The* Element Query* would work similar to how an iframe works within a
container – the container has the constraints of width and the content
inside the iframe has a client width of the container.

Here's one use-case of what I imagine the Element Query working like:

*<style>*
* .container {*
* max-width: 1000px;*
* margin-right: auto;*
* margin-left: auto;*
* }*

* .nav {*
* display: block;*
* margin-top: 0;*
* margin-bottom: 0;*
* padding-left: 0;*
* list-style: none;*
* }*

* @media .nav and (max-width: 800px) {*
* .nav__item {*
* display: block;*
* }*
* }*

* @media .nav and (min-width: 801px) {*
* .nav__item {*
* display: inline-block;*
* }*
* }*
*</style>*

*<div class="container">*
* <ul class="nav">*
* <li class="nav__item">*
* <a href="#">*
* Lorem ipsum dolor*
* </a>*
* </li>*
* <li class="nav__item">*
* <a href="#">*
* Consectetur adipisicing elit*
* </a>*
* </li>*
* <li class="nav__item">*
* <a href="#">*
* Impedit ut accusamus*
* </a>*
* </li>*
* <li class="nav__item">*
* <a href="#">*
* Lorem ipsum dolor*
* </a>*
* </li>*
* </ul>*
*</div>*


Second is the *Content Query* that's best described in this example: if I
have two headlines, "This Is My Title" and "This Is A REALLY Long Title for
a Section". If the content has a max-width of 30em, then apply a fixed
max-width to make the title look "more presentable" at a larger viewport.

*<style>*
* @media content and (min-width: 30em) {*
* .section-title {*
* max-width: 16em;*
* }*
* }*
*</style>*


*<h1>*
* This Is A Title*
*</h1>*

*<h1 class="section-title">*
* This Is A REALLY Long Title*
* for a Section*
*</h1>*


I am eager to see solutions like these in place, it would dramatically
reduce development time and promote best practices for developing CSS/HTML
in a responsive experience.



Thoughts?
- *Kevin Mack*