New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move to WICG to get more traction? #44

Closed
tantek opened this Issue Dec 15, 2017 · 52 comments

Comments

Projects
None yet
@tantek
Contributor

tantek commented Dec 15, 2017

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

This comment has been minimized.

Contributor

Wilto commented Dec 15, 2017

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

@beep

This comment has been minimized.

Collaborator

beep commented Dec 15, 2017

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

@scottjehl

This comment has been minimized.

scottjehl commented Dec 15, 2017

+1 if we think it might help get traction.

@keithjgrant

This comment has been minimized.

Collaborator

keithjgrant commented Dec 15, 2017

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

@tomhodgins

This comment has been minimized.

Collaborator

tomhodgins commented Dec 15, 2017

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

  • a CSS selector list
  • test conditions
  • a stylesheet (maybe with a placeholder to use inside selectors that matches tags that pass the test conditions, like $this)
  • and optionally to allow authors to supply an 'event list' that limits the testing of the selector to specific events

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

This comment has been minimized.

Collaborator

ZeeCoder commented Dec 15, 2017

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

This comment has been minimized.

davatron5000 commented Dec 15, 2017

+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

This comment has been minimized.

Collaborator

eeeps commented Dec 16, 2017

+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

This comment has been minimized.

marcj commented Dec 16, 2017

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

This comment has been minimized.

Collaborator

ZeeCoder commented Dec 16, 2017

@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

This comment has been minimized.

Collaborator

ausi commented Dec 16, 2017

+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

This comment has been minimized.

d6u commented Dec 17, 2017

+1 yeah, why not 😆

@jehoshua02

This comment has been minimized.

jehoshua02 commented Dec 17, 2017

@ZeeCoder

This comment has been minimized.

Collaborator

ZeeCoder commented Dec 20, 2017

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

How is this gonna happen exactly? 🤔

@tantek

This comment has been minimized.

Contributor

tantek commented Dec 20, 2017

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

This comment has been minimized.

Member

marcoscaceres commented Dec 23, 2017

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

This comment has been minimized.

Collaborator

ZeeCoder commented Dec 23, 2017

@tomhodgins

This comment has been minimized.

Collaborator

tomhodgins commented Dec 23, 2017

This is great news, thanks @marcoscaceres! :D

@matchboxhero

This comment has been minimized.

matchboxhero commented Dec 23, 2017

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

This comment has been minimized.

Collaborator

VinSpee commented Dec 23, 2017

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

This comment has been minimized.

Collaborator

djlotus commented Jan 3, 2018

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

This comment has been minimized.

Collaborator

ZeeCoder commented Jan 3, 2018

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

@ZeeCoder

This comment has been minimized.

Collaborator

ZeeCoder commented Jan 3, 2018

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

This comment has been minimized.

Collaborator

djlotus commented Jan 3, 2018

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

This comment has been minimized.

Collaborator

ZeeCoder commented Jan 3, 2018

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

This comment has been minimized.

Collaborator

tomhodgins commented Jan 3, 2018

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

This comment has been minimized.

Collaborator

ZeeCoder commented Jan 15, 2018

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

This comment has been minimized.

Member

marcoscaceres commented Jan 16, 2018

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

This comment has been minimized.

Collaborator

tomhodgins commented Jan 16, 2018

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

@ZeeCoder

This comment has been minimized.

Collaborator

ZeeCoder commented Jan 16, 2018

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

@djlotus

This comment has been minimized.

Collaborator

djlotus commented Jan 16, 2018

I would love to participate.

@marcoscaceres

This comment has been minimized.

Member

marcoscaceres commented Jan 16, 2018

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

This comment has been minimized.

Member

marcoscaceres commented Jan 16, 2018

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

This comment has been minimized.

Collaborator

beep commented Jan 16, 2018

@ZeeCoder

This comment has been minimized.

Collaborator

ZeeCoder commented Jan 16, 2018

🙌 🎉

@eeeps

This comment has been minimized.

Collaborator

eeeps commented Jan 16, 2018

Count me in

@ausi

This comment has been minimized.

Collaborator

ausi commented Jan 17, 2018

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

@marcoscaceres I’m happy to collaborate.

@ZeeCoder

This comment has been minimized.

Collaborator

ZeeCoder commented Jan 18, 2018

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

@tobireif

This comment has been minimized.

tobireif commented Jan 18, 2018

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

This comment has been minimized.

Member

marcoscaceres commented Jan 19, 2018

@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

This comment has been minimized.

Collaborator

ZeeCoder commented Jan 19, 2018

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

This comment has been minimized.

Collaborator

tomhodgins commented Jan 19, 2018

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

@beep

This comment has been minimized.

Collaborator

beep commented Jan 19, 2018

@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

This comment has been minimized.

Collaborator

keithjgrant commented Jan 19, 2018

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

This comment has been minimized.

Collaborator

eeeps commented Jan 19, 2018

@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

This comment has been minimized.

Collaborator

ZeeCoder commented Jan 19, 2018

@keithjgrant I highly doubt you'd need that.

@cwilso

This comment has been minimized.

Member

cwilso commented Jan 19, 2018

@tantek

This comment has been minimized.

Contributor

tantek commented Jan 22, 2018

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?

@tantek tantek closed this Jan 22, 2018

@marcoscaceres

This comment has been minimized.

Member

marcoscaceres commented Jan 23, 2018

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

This comment has been minimized.

Contributor

tantek commented Jan 23, 2018

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!

@keithjgrant

This comment has been minimized.

Collaborator

keithjgrant commented Jan 23, 2018

@marcoscaceres You can count me in too, if it’s not too late

@marcoscaceres

This comment has been minimized.

Member

marcoscaceres commented Jan 23, 2018

@keithjgrant done.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment