Re: Element Query and Selector Media Query Types

Wanted to see if anyone else had any thoughts/opinions on *Element Query
and Selector Media Query Types*? I want to really start pushing these but I
want to make sure that I have support of the community and these have been
thought-through.

Let me know, it's very appreciated // Thank you!
*Kevin Mack*

On Sun, Oct 12, 2014 at 4:39 PM, Kevin Mack <kmack418@gmail.com> wrote:

> 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*
>
>