W3C home > Mailing lists > Public > public-respimg@w3.org > October 2014

Re: Element Query and Selector Media Query Types

From: Hall, Charles (DET-MRM) <Charles.Hall@mrm-mccann.com>
Date: Mon, 20 Oct 2014 15:25:44 +0000
To: Kevin Mack <kmack418@gmail.com>, "public-respimg@w3.org" <public-respimg@w3.org>
Message-ID: <D06A9A29.1A71A%charles.hall@mrm-mccann.com>
Hi Kevin,

Im 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



5D510C5C-1CCD-479C-A466-98D1FC580B9B[11].png
(image/png attachment: 5D510C5C-1CCD-479C-A466-98D1FC580B9B_11_.png)

Received on Monday, 20 October 2014 20:36:24 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 17:06:15 UTC