@helps selector()

I didn’t notice the assist for @helps figuring out selector assist was so good! I often consider @helps as a approach to take a look at for property: worth pair assist. However with the selector() operate, we will take a look at for selector assist as properly. It appears to be like like this:

@helps selector(:nth-child(1 of .foo)) {

}

You simply drop the selector proper between the parens and that’s what it exams for.

That selector above is a reasonably good take a look at, truly. It’s a “selector listing argument” that works for the :nth-child ‘n’ buddies selectors. As I write, it’s solely supported in Safari.

So let’s say your very best state of affairs is that the browser helps this selector. Right here’s an instance. You already know that with <ol> and <ul> the one legitimate youngster component is <li>. But in addition say this listing wants separators, so that you (and I’m not saying this can be a nice concept) did this type of factor:

<ul>
<li class=”list-item”>Record merchandise</li>
<li class=”list-item”>Record merchandise</li>
<li class=”separator”></li>
/* … */
</ul>

You then additionally wish to zebra-stripe the listing. And, in order for you zebra striping, you could choose each different .list-item, ignoring the .separator. So…

li:nth-child(odd of .list-item) {
background: lightgoldenrodyellow;
}

However solely Safari helps that… so you are able to do:

@helps selector(:nth-child(1 of .foo)) {
li:nth-child(odd of .list-item) {
background: lightgoldenrodyellow;
}
}

In case you didn’t care what the fallback was, you wouldn’t even must hassle with the @helps in any respect. However say you do care concerning the fallback. Maybe within the supported state of affairs, the zebra striping does the heavy lifting of the UX you might be capturing for, so all you want for the seperator is a little bit of area. However for non-supporting browsers, you’ll want one thing beefier since you don’t have the zebra striping.

So now you may fashion each conditions:

@helps selector(:nth-child(1 of .foo)) {
li {
padding: 0.25em;
}
li:nth-child(odd of .list-item) {
background: lightgoldenrodyellow;
}
li.separator {
list-style: none;
margin: 0.25em 0;
}
}
@helps not selector(:nth-child(1 of .foo)) {
li.separator {
top: 1px;
list-style: none;
border-top: 1px dashed purple;
margin: 0.25em 0;
}
}

If we get the @when syntax, then we will write it slightly cleaner:

/* Possibly? */
@when helps(selector(:nth-child(1 of .foo))) {

} @else {

}

Anyway. The tip result’s…

There’s a JavaScript API for testing assist as properly. I wasn’t certain if this may truly work, however it seems to! This fails in Chrome and passes in Safari as I write:

CSS.helps(“selector(:nth-child(1 of .foo))”)

Whereas I used to be placing this collectively, I used to be considering… hmmmmmmm — what CSS selectors are on the market which have bizarre cross-browser assist? It’s actually not that many. And even of people who do have bizarre cross-browser assist, considering of the variety of use-cases the place you care to really wrap it in an @helps (reasonably than simply let it fail) is pretty few.

The ::marker pseudo-element would have been an amazing one, however it’s fairly properly supported now. I used to be considering the case-insensitive attribute selector, like [href$=”pdf” i], would have been an excellent one, however nope, additionally properly supported. Identical take care of the comma-separated :not(a, .b, [c]). Possibly one thing like :fullscreen / :-webkit-full-screen could be fascinating and helpful as a result of it’s uniquely not supported in iOS Safari?

The publish @helps selector() appeared first on CSS-Methods. You may assist CSS-Methods by being an MVP Supporter.