search

WICG / cq-usecases

Use cases and requirements for standardizing element queries.
Other
184 stars 24 forks source link

Move to WICG to get more traction? #44

Closed tantek closed 6 years ago

tantek commented 6 years ago

As suggested by https://twitter.com/elrond25/status/941743760773283840 do people think it would help, make no difference, or hurt to move Container Queries to the WICG to restart/retry discussions to get more traction and momentum? @Wilto @beep @adactio @jensimmons @keithjgrant @rachelandrew @innovati @dbaron and please @-more folks who have contributed / shown interest in helping make Container Queries happen.

Some recent-ish blog posts for background/context:

Draft proposal being updated:

Wilto commented 6 years ago

+1 from me; 100% in favor of moving to the WICG.

beep commented 6 years ago

A massive +1 from me, especially if this gets some momentum going.

scottjehl commented 6 years ago

+1 if we think it might help get traction.

keithjgrant commented 6 years ago

+1 from me if it will help break through the current logjam

tomhodgins commented 6 years ago

+1 please

I wrote the CSS element queries spec about a year ago, and I've done so much research and writing about element/container queries since then that was just thinking recently that I really need to go through this spec again to reword and clarify some of the terminology I used. Now I have some excellent motivation! 😁

Since then I've also found a simple way to describe element/container query behaviour as a JavaScript function.

Here's a demo showing how this function can be used to implement container queries with client-side JS in the browser.

And I've written down the most useful tests for this kind of technique.

Hopefully that sheds light on how the core of this idea works and which properties in the browser element queries rely on. If you were to expose an interface for this kind of functionality from CSS, it makes the most sense to do that as a new CSS at-rule that supplies:

If you want a great summary of where things are at now in the element/container queries scene, this article is fresh from last month: https://webdesign.tutsplus.com/articles/the-current-state-of-element-queries--cms-29690

ZeeCoder commented 6 years ago

Yeah, let's start the discussion!

@ausi @marcj @davatron5000 @filamentgroup @BoomTownROI @Snugug @tysonmatanich @d6u @walmartlabs @VinSpee @lemonmade Feel free to join.

(☝️ All people who made a plugin / polyfill at one point.)

davatron5000 commented 6 years ago

+1 from me. Keeping momentum on this has been difficult since we keep getting deferred by other specs. "Wait for CSS Containment. Wait for ResizeObserver. Don't waste time speculating on syntax."

eeeps commented 6 years ago

+1 WICG, sounds good to me.

Step zero is to figure out what we're actually blocked on.

@tabatkins has a vision for how we move forward here. My conception of it is: ResizeObserver (✔️) + (✖️) → ergonomic, performant prolyfills (which, I mean, we kiiiiiind of have even now? even without custom MQs?) → widespread prolyfill adoption (we're at thousands of pages with prolyfills deployed, what counts as widespread?) → a spec and native implementations (✖️)

The twin blockers, in this plan/worldview, are custom media queries (which, like Dave says — waiting for stuff like this for years is super frustrating), and maybe (better?) prolyfills that more authors will feel comfortable using in production... or that implementors take more seriously as templates for future native implementations.

Something that might help push this forward: implementors and spec folks studying and giving feedback to the current prolyfills. How do those prollyfills succeed or fail at being platform compatible? Conversations like this one between @dbaron and @ausi feel invaluable and all too rare.

marcj commented 6 years ago

Since I got mentioned here 🙌: What is exactly the goal here and how do you expect me to contribute? Did you guys look actually on real implementations first out there with hundred of thousands of installations before you start to create something own? Maybe compare usage-stats of current available implementation to understand what developers out there really want before creating a spec/product nobody needs.✌️

ZeeCoder commented 6 years ago

@marcj ☝️ In my mind that would be the exact reason of this discussion: look at what we have already, and decide on a syntax based on that, that's polyfillable and addresses concerns that stopped native approaches so far.

ausi commented 6 years ago

+1 for moving to WICG.

Regarding a vision to move forward, I strongly believe that CSS Conditions with Variables would be a great step forward for polyfills towards being performant and stable.

d6u commented 6 years ago

+1 yeah, why not 😆

jehoshua02 commented 6 years ago

I'm new here. But if I had a time machine, I'd stop media queries from being invented.

💯

On Dec 15, 2017 1:41 PM, "Tantek Çelik" notifications@github.com wrote:

As suggested by https://twitter.com/elrond25/status/941743760773283840 do people think it would help, make no difference, or hurt to move Container Queries to the WICG to restart/retry discussions to get more traction and momentum? @Wilto https://github.com/wilto @beep https://github.com/beep @adactio https://github.com/adactio @jensimmons https://github.com/jensimmons @keithjgrant https://github.com/keithjgrant @rachelandrew https://github.com/rachelandrew @innovati https://github.com/innovati @dbaron https://github.com/dbaron and please @-more folks who have contributed / shown interest in helping make Container Queries happen.

Some recent-ish blog posts for background/context:

Draft proposal being updated:

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ResponsiveImagesCG/cq-usecases/issues/44, or mute the thread https://github.com/notifications/unsubscribe-auth/AAmMlndhVX-KpURH4XtjIbPSVkiEv12zks5tAtmSgaJpZM4RD-iE .

ZeeCoder commented 6 years ago

@tantek @Wilto So are we moving there? Is there a link we could start the discussion at?

How is this gonna happen exactly? 🤔

tantek commented 6 years ago

Awesome, I'm not seeing any objections from anyone so let's do this.

@marcoscaceres (co-chair WICG) can you help us out with how to steps to transition an existing effort to WICG?

marcoscaceres commented 6 years ago

Happy to help. I can move it over. Once there, we will still need to lobby the right folks at various browser companies to get this moving.

@tantek and I can help ping the right folks on the Moz side. However, let’s time this right so it doesn’t vanish during xmas.

ZeeCoder commented 6 years ago

Good point 👍

On 23 Dec 2017 09:25, "Marcos Cáceres" notifications@github.com wrote:

Happy to help. I can move it over. Once there, we will still need to lobby the right folks at various browser companies to get this moving.

@tantek https://github.com/tantek and I can help ping the right folks on the Moz side. However, let’s time this right so it doesn’t vanish during xmas.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ResponsiveImagesCG/cq-usecases/issues/44#issuecomment-353713922, or mute the thread https://github.com/notifications/unsubscribe-auth/ADglEjXTxPcmX9VavTFAUQjyhhhL4BcJks5tDLkSgaJpZM4RD-iE .

tomhodgins commented 6 years ago

This is great news, thanks @marcoscaceres! :D

matchboxhero commented 6 years ago

I'm a little late to the party but I'm onboard, thanks for the invite. Let me know what I can do to help!

VinSpee commented 6 years ago

I am also late to the party but excited about this notion. I’d love to help in any way I can, code, docs, cat-herding, etc.

djlotus commented 6 years ago

Before I start trying to research who has implemented what polyfills and why, does anyone know if anyone has done this or begun doing this?

ZeeCoder commented 6 years ago

If you need a list of GitHub links, I have one.

ZeeCoder commented 6 years ago

I've also been talking a lot with @tomhodgins too, since we couldn't stop ourselves. I was waiting for the new forum to open before I presented that syntax we came up with.

I think we should probably wait until the new forum opens to share our thoughts.

djlotus commented 6 years ago

That would be great. Is this a list of available polyfills or a list of site authors who have implemented polyfills? I would be much more interested in the latter to get a feel for exactly what problems authors are solving in practice (not just in theory) and what made them choose the polyfills they chose.

From my discussions with @tomhodgins and my lurking around other discussions it seems syntax is the main sticking point for most people and the main reason this discussion gets sidelined. I''ll let others fight over that since I personally don't care (for the most part) what the syntax looks like. I'm more interested in making sure we can justify the underlying principal as to get solid buy-in from vendors.

ZeeCoder commented 6 years ago

Unfortunately I only have the former:

I'm sure polyfill authors can post some sites that use their solutions.

For example, mine is used by EventsTag for on-site products and some not-yet-public microsites. (The on-site products use web-based tech, running Chrome.)

☝️ That syntax is also very close to what we discussed with @tomhodgins

tomhodgins commented 6 years ago

There is currently no shortage of element query plugins or syntaxes that can be used. I've also been maintaining a list of plugin authors over at: http://whoisworkingoncontainerqueries.com

Here are some of the syntaxes and plugins I've created (all listed below except EQCSS were built in 2017) to help me use the idea of element queries as different project needs arose. Much of the functionality is similar between them, the biggest differences here are the location of the styles and how the selector, conditions, test, and styles are encoded into a syntax and read back by a plugin. Whatever syntax we create for CSS to handle this concept should have the power and flexibility to capture the functionality that these examples all have in common.

Hopefully sharing these solutions sparks some creativity 😍

HTML-based Syntaxes

Querious

<div data-width=500></div>

css:

div.data-width {
  background: lime;
}

Skopein

<link rel="scoped" href="example.css" data-selector="div" data-test="this.offsetWidth >= 500">

css:

:self {
  background: lime;
}

reproCSS

<style process=auto>
  ${demo.offsetWidth >= 500 ? `

    #demo {
      background: lime;
    }

  ` : ''}
</style>

CSS-based syntaxes

QSS

div if width >= 500 {
  background: lime;
}

and other variations:

div @min 500 width { background: lime; }
div @ >= 500 width { background: lime; }
div if width min 500 { background: lime; }

CSSplus/Selectory

div[test="this.offsetWidth >= 500"] {
  background: lime;
}

EQCSS

@element div and (min-width: 500px) {
  :self {
    background: lime;
  }
}

JS-based Syntaxes

Container Query Mixin (Rule edition)

container('div', 'this.offsetWidth >= 500', '', `
  background: lime;
`)

Container Query Mixin (Stylesheet edition)

containerQuery('div', el => el.offsetWidth >= 500, `
  :self {
    background: lime;
  }
`)

Element Query JS-in-CSS Helper Function

element('div', {minWidth: 500}, `
  :self {
    background: lime;
  }
`)

JSON-based Syntaxes

Robserv

robserv.load([
  {
    selector: 'div',
    test: el => el.offsetWidth > 500,
    stylesheet: ':self { background: lime; }'
  }
])

Parsed EQCSS

EQCSS.register([
  {
    selector: "div",
    conditions: [{ measure: "min-width", value: "500", unit: "px" }],
    style: " :self { background: lime; } "
  }
])
ZeeCoder commented 6 years ago

So who's in charge for starting the discussion at the WICG? 🤔 I'm eager to discuss what functionality should even be considered for implementation, syntaxes and potential barriers for browser vendors, as well as experiences of plugin authors.

I do think that such a discussion would have to be very focused though, so I'm resisting the urge to spam my thoughts until we're set on how it's gonna actually go down.

ping @tantek @marcoscaceres

marcoscaceres commented 6 years ago

Ok, back from vacation... let's start by moving this over :)

Now, we need to figure out who will edit and participate in the work.

Can folks here me know who is going to be involved? I need a list of collaborators. Should we set up a Hangout session do discuss the state of things and find a "champion" to drive this work?

tomhodgins commented 6 years ago

Welcome back @marcoscaceres! You can count me in for sure :D

ZeeCoder commented 6 years ago

Ah sorry didn't mean to bug you during your vacation. 😅 I'm in ofc!

djlotus commented 6 years ago

I would love to participate.

marcoscaceres commented 6 years ago

Ok, transferred:

Did I miss anything? There are probably a few broken links now, so might be worth checking those.

Thanks folks who already said they are willing to collaborate. I'll wait for a few more folks to chime in and we can divide up roles and responsibilities.

marcoscaceres commented 6 years ago

Folks who volunteered thus far, please join the WICG if you've not already done so:

That will help us with any IPR concerns.

beep commented 6 years ago

@marcoscaceres: I think I need to sign up for a WICG account, but I’d love to join.

ZeeCoder commented 6 years ago

🙌 🎉

eeeps commented 6 years ago

Count me in

ausi commented 6 years ago

Can folks here me know who is going to be involved? I need a list of collaborators.

@marcoscaceres I’m happy to collaborate.

ZeeCoder commented 6 years ago

@marcoscaceres what will "dividing roles and responsibilities" mean exactly? 😅

tobireif commented 6 years ago

I just rewrote nearly all the @media rules in my current project to @element rules. The syntax and lib https://github.com/eqcss/eqcss/ by @tomhodgins are really useful! I hope we'll one day have element queries in CSS.

marcoscaceres commented 6 years ago

@marcoscaceres what will "dividing roles and responsibilities" mean exactly?

We need folks to edit the spec and/or related docs - and in particular, a lead Editor. We also need folks willing to review pull requests and write tests, as well as to perform general cat herding (a person to basically act as "Chair" for the work, and make sure Editor's have whatever support they need, and that the community is kept informed, etc.).

If you are new to standards, I would highly encourage you to read about how we standardized picture. That should give you an idea of how things work and what you are signing up for: :feelsgood: and will take time... maybe another 2-3 years, but will be worth it 🏆

I think it's important for us to have an initial call/hangout for folks who have volunteered to contribute to work out the logistics of how we will do this work. I'm happy to help initially facilitate this, but I personally want to hand the reins over as quickly as possible (unfortunately, due to time constraints, and limited technical knowledge of CSS, I'm not able to meaningfully participate in this work beyond getting it started - but you can count on me, @yoavweiss, and @cwilso to always be available to answer process and spec-writing questions... and for review of spec text).

So, with the above said - could we set up a meeting for next week? Could folks that have been through the process before (looking at you @beep or @eeeps) serve as Chair for this work?

I'm based in Melbourne Australia (GMT+10), which makes things kinda crappy timezone wise. Worst case, we can get either @yoavweiss or @cwilso to help facilitate in my place, as they are in somewhat US-EU friendlier timezones.

ZeeCoder commented 6 years ago

I'll definitely give that one a read, thanks! I'd be more than happy to join such a hangout. (I'm in the UK)

Thanks for all the effort, I think it'll be worth it too!

tomhodgins commented 6 years ago

I'm located in Toronto, and am game able join a meeting any time :D

beep commented 6 years ago

@marcoscaceres I would love to be involved, and can absolutely make a conference call next week.

So, with the above said - could we set up a meeting for next week? Could folks that have been through the process before (looking at you @beep or @eeeps) serve as Chair for this work?

I should note my involvement with picture/RICG was tangential at best, so I may not have the experience to be a solo Chair. That said, I’m very invested in moving container queries forward, in any way I can; if that means editing/writing specs, or co-chairing the work, I’m happy to do so if I can get some direction.

keithjgrant commented 6 years ago

Am I required to provide my employer info when creating an account? I’m not doing this in any official capacity on their behalf

eeeps commented 6 years ago

@marcoscaceres “[Co-]Chair” feels quite above my paygrade (I never had an RICG title but if I did I think it would have been “adjunct newsletterer”). But like @beep, I’m happy to contribute in whatever role, as long as I can (frequently) ask other folks with more qualifications and experience for help!

ZeeCoder commented 6 years ago

@keithjgrant I highly doubt you'd need that.

cwilso commented 6 years ago

@keithjgrant if your employer is a W3C Member, yes. If they aren't, then no.

On Fri, Jan 19, 2018 at 11:30 AM, Viktor Hubert notifications@github.com wrote:

@keithjgrant https://github.com/keithjgrant I highly doubt you'd need that.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/WICG/cq-usecases/issues/44#issuecomment-359066001, or mute the thread https://github.com/notifications/unsubscribe-auth/AAe8eSV0aDAzfqMCp1u0tf1oymACqvYtks5tMO1WgaJpZM4RD-iE .

tantek commented 6 years ago

Thank you @marcoscaceres! Looks like the mechanics of moving to WICG are now complete, so I'm closing this original issue as FIXED!

@marcoscaceres can you fork the "need lead editor" and "need chair" threads to new issues?

marcoscaceres commented 6 years ago

Ok, I've sent invites to those that volunteered to be collaborators. If you didn't receive one, please let me know.

@beep and @eeeps, happy to mentor and support you (as are the rest of the WICG Chairs). All we need is a few folks to track status and generally make sure things keep moving forward - and keep the community informed. Remember, if things get out of hand, we just send in @Wilto 🥊. But seriously, we can also count on @tantek to navigate any CSS difficulties and provide spec guidance. We also have @yoavweiss to sanity check implementation stuff.

I still like for you all to have at least one kick off meeting, to work out who is doing what.

tantek commented 6 years ago

What @marcoscaceres said. I've created three more issues to follow-up on each of those (co-chairs, primary editor, kick-off meeting). Please follow-up in those with any specific suggestions, questions, etc. Let's keep this momentum going!