@helps selector() - CSS Designer

@helps selector()

I didn’t understand the help for @helps figuring out selector help was so good! I normally consider @helps as a strategy to take a look at for property: worth pair help. However with the selector() operate, we will take a look at for selector help 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 assessments for.

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

So let’s say your ideally suited scenario is that the browser helps this selector. Right here’s an instance. You understand that with <ol> and <ul> the one legitimate little one component is <li>. But in addition say this checklist wants separators, so that you (and I’m not saying this can be a nice concept) did this sort of factor:

<ul>  <li class="list-item">Checklist merchandise</li>  <li class="list-item">Checklist merchandise</li>  <li class="separator"></li>  /* ... */</ul>

Then you definitely additionally wish to zebra-stripe the checklist. And, if you need zebra striping, it is advisable 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 need to hassle with the @helps in any respect. However say you do care concerning the fallback. Maybe within the supported scenario, the zebra striping does the heavy lifting of the UX you’re 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 possibly can 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 somewhat cleaner:

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

Anyway. The top result’s…

Supported

Not Supported

There’s a JavaScript API for testing help as properly. I wasn’t positive if this might 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 pondering… hmmmmmmm — what CSS selectors are on the market which have bizarre cross-browser help? It’s actually not that many. And even of those who do have bizarre cross-browser help, pondering of the variety of use-cases the place you care to truly wrap it in an @helps (fairly than simply let it fail) is pretty few.

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

Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.

Checkout extra Articles on Sayed.CYou

#helps #selector