Re: Element Query and Selector Media Query Types

Hi Kevin,

I’m not entirely clear on your use cases.

My understanding of @media queries:
Conditionally check for media type (print, screen, all), then any number and/or type of expressions (height, orientation, color), then any explicit or range of value (60em, 25%, 50vw) and apply what follows when all produce a match.

So, in the case of Element queries, I believe that they would check for element type (<aside>, <input>, <blockquote>), then any number and/or type of attributes (dir=, target=, data-name=), then any explicit or partial value ("ltr", "#top", "mathBox"), then any other condition required, and apply what follows when all produce a match – simply now in CSS, and no longer limited to JS/jQuery.

A use case could be: “I have 2 dynamic aside elements that share multiple classes and attributes and I need a simple CSS selector that does not require source order or complex combinators.”

The structure and syntax in this case would be something like this:

@element aside and (data-name="mathBox") {
fieldset { border: 1px solid red; }
}

This of course can currently be written with an attribute selector (below), but I wanted to write a very simple syntax as a starting point.

fieldset [data-name="mathBox"] { border: 1px solid red; }

I hope this adds another perspective to the conversation.

Thanks,


Charles Hall
UX Architect, Technology

t / 248.203.8723  m / 248.225.8179
e / charles.hall@mrm-mccann.com
skype / charles.h.all
360 West Maple Road, Birmingham MI 48009
w / www.mrmworldwide.com

[cid:AE61867F-0797-445A-BFFF-BE8D67A69A1E]
Creativity. Technology. Performance.

From: Kevin Mack <kmack418@gmail.com<mailto:kmack418@gmail.com>>
Date: Monday, October 20, 2014 at 9:45 AM
To: "public-respimg@w3.org<mailto:public-respimg@w3.org>" <public-respimg@w3.org<mailto:public-respimg@w3.org>>
Subject: Re: Element Query and Selector Media Query Types
Resent-From: <public-respimg@w3.org<mailto:public-respimg@w3.org>>
Resent-Date: Monday, October 20, 2014 at 9:46 AM

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<mailto: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