-
Notifications
You must be signed in to change notification settings - Fork 690
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
[selectors4] Name the “functional pseudo-class like :matches() with 0 specificity” #2143
Comments
I would vote for This is the twitter thread where I asked authors for ideas: https://twitter.com/LeaVerou/status/928426600558862337 Regarding the other names:
|
At least the latter point could be avoided, of course, by using So, I also vote for Sebastian |
I'm for |
I’m not sure that |
Yes, just syntax sugar, but the problem is that if you just desugar it naively then you get an exponentially-long selector. Preprocessors don't matter, what matters is the CSS they produce, and it's acceptable for a CSS engine to take more time if the CSS is absurdly huge. But if the CSS is not huge, then it should be fast (e.g. that's why If Safari implemented |
My concern with |
What about swapping |
Well, maybe then we can avoid the confusion if we could use the pattern proposed in #1170 by @tabatkins and add an extra optional argument to the existing So while Or is it too late to make such changes in Level 4? |
Yup, we could rename |
Wouldn’t renaming |
We're not renaming I'm still okay with just adding the functionality to |
So since when has short-lived vendor implementation ruled what happens to a standard? I don't get it what's wrong, this is not yet another piece of software that you (or someone else at big-vendor-x) can throw away in some years and replace it with something else entirely and somehow I got the feeling that that's the recent predominant mind set. /rant :-( Without much details to rephrase what @fantasai says:
Logical options that make sure developers in future are not the hell confused about it (and TWBS-div-soup-hell shows most, are):
So why don't we collect alternate names for the current |
If my last comment is true, that would leave us with:
So these are all sane options without creating unexpected developer pain:
Edit, here are some more from @LeaVerou's Twitter post.
|
Aliasing Renaming |
@inoas, AFAIK, Hovewer, I agree with Tab that the potential confusion in meaning between |
In the past we would keep bad things only to avoid breaking web compat. Now we're keeping bad things to not be "rude" to implementors? What fresh hell is this?! 😛
What troubles me more is that I expect |
@LeaVerou I will note that most of your examples are chains of |
It's not a "bad" thing. It's a perfectly serviceable and appropriate name that people were happy with for multiple years; two people in this thread suddenly expressing a preference for a slightly different name does not make the original name bad. Changing things that have shipped, are about to be shipped, that have tutorials written about them, etc., is expensive. It's one more thing a browser implementor has to do (even if it's "trivial", it's still a chunk of time out of someone's day to update the parser, the tests, maybe the DevTools support, and that chunk could have been spent doing something more valuable), and it means a lot of tutorial content in the wild is invalid and needs to be updated, or is just confusing in the future. In other words, renaming is not free, and the longer the name lives out in the wild, the more expensive it becomes. This doesn't mean we can't do it, but it does mean we need a decent reason to do so, and "some people suddenly decided they like this alternate name slightly better" is not a very good reason, or at least not a good enough one to override the costs in this case, in my opinion. |
Well @tabatkins it is not like the only option is renaming aliasing and adding Using Would that be viable? @LeaVerou maybe Brent Spiner knows. |
Just because it's easier to demonstrate the problem with However, the problem I think @SelenIT made an excellent point about |
I'm not disputing that we should have this feature, just the frequency with which it would be needed that is driving you to require its name to be two characters.
And as you so often like to point out, nobody reads documentation, so my point about the misleading pairing stands, however clever the backronym might be. |
Should the :is() have specificity like :not()? |
:has is only available in the snapshot profile, thus I suspect it doesn't need to have defined specificity. The query() method does not consider specificity. |
…rior behavior under ! proposal). #2143 (comment)
@Nadya678
Good question. It looks like we forgot to define it when we switched from having a subject indicator to using |
Another option, fwiw, would be to use bare parens for eliminating specificity. There are two possible interpretations of this idea: A. Treat it like a pseudo-class syntax, except without the preceding Example: For case B, if it's considered weird, we could say that the parens can't cross hierachical boundaries, i.e. that example above would be invalid, but you could write |
That syntax doesn't work; it confuses the parser and produces paren-blocks in some cases, but function-blocks in others, and when it looks like a function, it isn't one. |
I'm still fond of a:selector(.active) { }
:selector(header, footer, nav) a { } It's not explicit that it's ignoring specificity, but it seems less permanent, or less strong than if I had written the same selector directly. What do you think? |
What about Though it might look a bit odd in the beginning of the selector, the general rule that absence of the elemental selector means |
@SelenIT |
What about There are also some old documentations mentioning |
@CyberAP, the comma clearly means "or", not "and" :) @Loirooriol, wouldn't it increase the cognitive load instead if for some period of transition there would co-exist two completely different experimental implementations of But I agree that it's confusing to have several things that effectively do nearly the same job, but a bit differently. That's why, ideally, I would prefer the single pseudo-class with some (optional) modifier for turning off/adjusting the specificity to the current solution with 2 very similar pseudo-classes (plus the old deprecated-but-yet-supported one). |
I've been hesitant to comment because I've not had anything particularly thoughtful to add beyond varying degrees of conflicting thoughts on each one. However, over the past week or so I have informally talked to a (small) number of people with various degrees of skill who either independently arrived at I just want to note that is isn't in the table above and I am in that camp, I think that either of those makes more sense to me than many of the others and I think the big strike against it in terms of the table is that it would prevent from later extending it to be arbitrary specificity. I'm not entirely convinced that is actually a big strike though. |
TL;DR: I like Forking @LeaVerou’s list from earlier to express sentiments on keywords I was drawn to:
* The table is sorted alphabetically by name Example Usages:Forking @FremyCompany’s usages with minor changes to further share my impressions: /* :any() → actually looks okay especially because any is also used in any-link */
:any(textarea, input:matches([type=text], [type=number], [type=email], :not([type])) {
/* weightless text box styling */
}
:any(:any-link:not(:hover):not(:active):not(:focus)) {
/* weightless link styling */
} /* :as() → looks visually similar to :has and tripped me up when following it with :any-link */
:as(textarea, input:matches([type=text], [type=number], [type=email], :not([type])) {
/* weightless text box styling */
}
:as(:any-link:not(:hover):not(:active):not(:focus)) {
color: inherit;
} /* :if() → so is :else like :not but with zero-specificity? */
:if(textarea, input:matches([type=text], [type=number], [type=email], :not([type])) {
/* weightless text box styling */
}
:if(:any-link:not(:hover):not(:active):not(:focus)) {
/* weightless link styling */
} /* :nil() → i get it, but looks like programmer-speak not found elsewhere in css */
:nil(textarea, input:matches([type=text], [type=number], [type=email], :not([type])) {
/* weightless text box styling */
}
:nil(:any-link:not(:hover):not(:active):not(:focus)) {
/* weightless link styling */
} /* :nospecificity() → hello, spell check, my old friend */
:nospecificity(textarea, input:matches([type=text], [type=number], [type=email], :not([type])) {
/* weightless text box styling */
}
:nospecificity(:any-link:not(:hover):not(:active):not(:focus)) {
/* weightless link styling */
} /* :when() → it feels like this should not take css selectors */
:when(textarea, input:matches([type=text], [type=number], [type=email], :not([type])) {
/* weightless text box styling */
}
:when(:any-link:not(:hover):not(:active):not(:focus)) {
/* weightless link styling */
} /* :zero() → it feels like :zero is supposed to represent a state */
:zero(textarea, input:matches([type=text], [type=number], [type=email], :not([type])) {
/* weightless text box styling */
}
:zero(:any-link:not(:hover):not(:active):not(:focus)) {
/* weightless link styling */
} My overall impression is that |
Is |
@jonathantneal I don't see the cons about a pseudo-class that is "explicitly not extended-able". Can you give some context?
|
Hey @tzi, I was under the impression that folks wanted the ability to possibly extend the functionality of this selector in the future. I considered “explicitly not extendable” to be taken similarly as one of Lea’s cons — “can't be extended to specify specificity”. Sorry if I missed that this concern is no longer relevant. @ionas, I’m not opposed to extending matches, either, especially if it’s readable and doesn’t require look-ahead. Thanks for looking at it anyway. 😄 |
Most of the comments from the last three weeks seem to not respect the fact that the WG has narrowed their choices down to |
Until we see implementation, @Tyler-H, I would actively encourage you to challenge any consensus you think could be better. Make your differing evaluation clear. Keep a positive tone. That’s showing respect for the web and the people who make it.
|
@jonathantneal The thing is this topic has been taken to the bike shed already, and Lea requested to focus discussion on the two WG front-runners. Ignoring the request without providing critiques of the front-runners is not respect, it's... ignoring the request. Only two or three comments have provided concerns/critiques with the front-runners, while others (like yours) just take other suggestions and run with them. As far as "pissing off devs forever" frankly the concerns of people who have visceral reactions to naming things should have their concerns notched far below those with actual logic-based reasons. |
I’m legitimately (and not sarcastically) sorry to you if my critique was not profound enough, but please do re-read my post, looking specifically for All of that aside, if you wish to continue bikeshedding how we ought to bikeshed, I would kindly ask that we move that discussion to Twitter, where civilized discourse may abound. 😄 |
@tzi - and @Tyler-H FWIW, while I definitely share the sentiment that perpetual bikeshed isn't a good thing, it seems to me that part of why the WG has made no real decision is that none of the options seemed particularly great (at least this has been my feeling - kind of noncommittal/least worst). Since then, I feel like some options that seem at least as good have been added. From other conversations I am led to think that perhaps some other WG members feel this. I think that updating the table and asking whether it is more valuable for the pseudo to be clear or extendable to including a numeric specificity seems valid and potentially helpful. Perhaps the WG can resolve one way or another on that much at least and we can eliminate several items? |
I've read the whole thread, and I'm aware of that now it's supposedly only an It's notable how far we've got from Now came the problem with the imperfect contrast with On the other hand, in the future, other strategies might appear for specificity management. To me, for example, using the zero-specificity selector (whatever name it has, and however short it is) extensively, particularly with wrapping the whole selector to keep it on zero, is not a good long-term solution. It's just code repetition. We might have a higher order scope for specificity, maybe something like this: <link rel="stylesheet" type="text/css" href="framework.css" specificity=1>
<link rel="stylesheet" type="text/css" href="mycustom.css" specificity=x> which might act as the highest order in the calculation placeholders: x,0,0,0. I know it's out of scope (and maybe it is proposed already?), but my point is that specificity strategies can easily evolve above the selector level, so we shouldn't get lost in the supposed significance of the Sorry for being too long. |
I mentioned this during the meeting and I'll repeat, I think it's important for this selector to be short and also for it to be clear about how it's different from I'm rather less concerned about extending to an arbitrary specificity level, it's reasonably likely that we never do that. Numbers for ordering are not the best, see e.g. BASIC and its goto statements, or tabindex if you want a more recent example. Ideally any solutions to specificity wrangling would incorporate some concept of higher level structures rather than numbers on the number line.
|
The CSS Working Group just discussed
The full IRC log of that discussion<mstange> Topic: [selectors4] Name the “functional pseudo-class like :matches() with 0 specificity”<mstange> fantasai: Lea is not here, do we want to talk about it? <mstange> fantasai: Anybody have anything to add to this discussion? There's no clear "this is definitely what we should do" resolution. <TabAtkins> New suggestion: smoosh() <Rossen> github: https://github.com//issues/2143 <fantasai> https://github.com//issues/2143#issuecomment-408128027 <TabAtkins> Sorry, :smoosh() <zcorpan> -webkit-appearance: smoosh <mstange> fantasai: This takes a list of selectors of which any can match. Unlike the :matches selector it basically zeroes out the specificity: anything you put inside has a specificity of zero. <mstange> fantasai: This gives you more control about which parts of the selector affect the specificity and which down. <mstange> fantasai: The only question is what to name it. <mstange> fantasai: Some of the suggestions didn't get any traction. <mstange> fantasai: We don't have any suggestion that is clearly better than the other ones. <mstange> fantasai: My concern with a lot of these is that it is not very clear for :if or :where why this is different from :matches. <mstange> ... It's different because of the zero specificity, so the name should have something to do with that. <mstange> franremy: Last time we had narrowed it down to three. <mstange> fantasai: New ones were added after last time. <mstange> franremy: We almost agreed on one of them last time, don't remember which one. <mstange> franremy: Would prefer to not expand the length of the list of candidates. <mstange> dbaron: To make progress, we need to say "Nobody leaves the room until we decide." <ericwilligers> Last time: if vs where <fantasai> https://lists.w3.org/Archives/Public/www-style/2018Jul/0027.html <mstange> fantasai: Our resolution last time was to narrow the short list to :if and :where, and we added :nil and :zero. <mstange> ... So we could choose between those. <mstange> Rossen: if, where, nil, zero, quash <mstange> Rossen: In that order, with if being 1 and quash being 5, go ahead and put in your preferred 3. <mstange> ... In the order of preference <fantasai> 1 = if, 2 = where, 3 = nil, 4 = zero, 5 = quash <franremy> 1 2 ... 4 3 5 <iank_> 2, 5, 3 <fantasai> 5, 3, 4, 1, 2 <cbiesinger> 2, 1 <florian> 1, 2 <TabAtkins> 3, 2, 1 <heycam> 2, 1 <futhark> 2 3 5 <dbaron> 4 3 2 5 1 <fantasai> https://github.com//issues/1170 <ericwilligers> 2, 1, 4 <Rossen> 2, 1 <eae> 3 2 1 <melanierichards> 2 <AmeliaBR> 2 4 <tantek> 4 3 5 :ns (no specificity) <rachelandrew> 2, 1 , 3 <emilio> 3, 1 <Oriol> 1, 2, 4, but I would prefer any <emilio> fantasai: lol <bz> nsISelector <bz> That's NS <mstange> Rossen: A lot of votes for number 2 as the first choice <AmeliaBR> Why was `:is` dropped from the options? <mstange> ... Resolve on :where? <mstange> ... If anyone has a strong reason to change this, speak up now. <mstange> Resolved: Name the selector :where |
The functional pseudo-class like :matches() with 0 specificity is named :where(). w3c#2143 (comment) resolves w3c#2143
The functional pseudo-class like :matches() with 0 specificity is named :where(). #2143 (comment) resolves #2143
@fantasai We may not live in an ideal world, but I think we do live in one that's close enough to introduce |
@gibson042 Filed #3258 on renaming :matches() to :is(). If anyone has an opinion on it, please comment there. |
TLDR: Thank you so much I predict I love that the WG got through with it eventually and even picked a declarative/functional/semantic name (where over nil). There will be new reset stylesheets that won't interfere with any specificy issues and we will finally have a nice base to cover all different browsers and OS platforms. Obviously properties that affect form widgets (like appearance), outlines, highlights, scrollbars, overscrolling/touch etc. are now things that need to be resolved as quickly as possible so that it becomes easy to reset everything, or - everything but form controls, scrollbars, overscrolling etc. Thank you so much (:is() will follow as an alias of :matches() and sanity returns) |
In Issue #1170 we decided to add a functional pseudo-class that is exactly like
:matches()
but has zero specificity. However, we didn't decide on a name.Suggestions in that thread included
:is()
,:when()
,:filter()
, and:nospecificity()
. It was noted that having:filter()
as a selector andfilter
s a property might be confusing, and that:nospecificity()
is a pain to type. Additional suggestions, comments, and clarifications welcome.The text was updated successfully, but these errors were encountered: