Move to WICG to get more traction? #44
Comments
|
+1 from me; 100% in favor of moving to the WICG. |
|
A massive +1 from me, especially if this gets some momentum going. |
|
+1 if we think it might help get traction. |
|
+1 from me if it will help break through the current logjam |
|
+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 |
|
Yeah, let's start the discussion! @ausi @marcj @davatron5000 @filamentgroup @BoomTownROI @Snugug @tysonmatanich @d6u @walmartlabs @VinSpee @lemonmade (☝️ All people who made a plugin / polyfill at one point.) |
|
+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." |
|
+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. |
|
Since I got mentioned here 🙌: |
|
@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. |
|
+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. |
|
+1 yeah, why not 😆 |
|
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" ***@***.***> 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:
- https://adactio.com/journal/12585
- https://ethanmarcotte.com/wrote/on-container-queries/
- https://ethanmarcotte.com/wrote/a-bit-more-on-container-queries/
Draft proposal being updated:
- https://github.com/tomhodgins/element-queries-spec
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#44>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AAmMlndhVX-KpURH4XtjIbPSVkiEv12zks5tAtmSgaJpZM4RD-iE>
.
|
|
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? |
|
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. |
|
Good point 👍
…On 23 Dec 2017 09:25, "Marcos Cáceres" ***@***.***> 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
<#44 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ADglEjXTxPcmX9VavTFAUQjyhhhL4BcJks5tDLkSgaJpZM4RD-iE>
.
|
|
This is great news, thanks @marcoscaceres! :D |
|
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! |
|
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. |
|
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? |
|
If you need a list of GitHub links, I have one. |
|
I've also been talking a lot with @tomhodgins too, since we couldn't stop ourselves. I think we should probably wait until the new forum opens to share our thoughts. |
|
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. |
|
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. ☝️ That syntax is also very close to what we discussed with @tomhodgins |
|
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 Hopefully sharing these solutions sparks some creativity 😍 HTML-based SyntaxesQuerious<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 syntaxesQSSdiv 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/Selectorydiv[test="this.offsetWidth >= 500"] {
background: lime;
}EQCSS@element div and (min-width: 500px) {
:self {
background: lime;
}
}JS-based SyntaxesContainer 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 Functionelement('div', {minWidth: 500}, `
:self {
background: lime;
}
`)JSON-based SyntaxesRobservrobserv.load([
{
selector: 'div',
test: el => el.offsetWidth > 500,
stylesheet: ':self { background: lime; }'
}
])Parsed EQCSSEQCSS.register([
{
selector: "div",
conditions: [{ measure: "min-width", value: "500", unit: "px" }],
style: " :self { background: lime; } "
}
]) |
|
So who's in charge for starting the discussion at the WICG? 🤔 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 |
|
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? |
|
Welcome back @marcoscaceres! You can count me in for sure :D |
|
Ah sorry didn't mean to bug you during your vacation. 😅 |
|
I would love to participate. |
|
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. |
|
Folks who volunteered thus far, please join the WICG if you've not already done so:
That will help us with any IPR concerns. |
|
@marcoscaceres: I think I need to sign up for a WICG account, but I’d love to join.
|
|
🙌 🎉 |
|
Count me in |
@marcoscaceres I’m happy to collaborate. |
|
@marcoscaceres what will "dividing roles and responsibilities" mean exactly? 😅 |
|
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. |
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: 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. |
and will take time... maybe another 2-3 years, but will be worth it 🏆
|
I'll definitely give that one a read, thanks! Thanks for all the effort, I think it'll be worth it too! |
|
I'm located in Toronto, and am game able join a meeting any time :D |
|
@marcoscaceres I would love to be involved, and can absolutely make a conference call next week.
I should note my involvement with |
|
Am I required to provide my employer info when creating an account? I’m not doing this in any official capacity on their behalf |
|
@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! |
|
@keithjgrant I highly doubt you'd need that. |
|
@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 ***@***.***> 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
<#44 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAe8eSV0aDAzfqMCp1u0tf1oymACqvYtks5tMO1WgaJpZM4RD-iE>
.
|
|
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? |
|
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. |
|
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! |
|
@marcoscaceres You can count me in too, if it’s not too late |
|
@keithjgrant done. |
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:
The text was updated successfully, but these errors were encountered: