+201223538180

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System Answer@helps selector()

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System Answer@helps selector()

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System Answer

I didn’t understand the assist for @helps figuring out selector assist was so good! I often consider @helps as a method 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 nicely. It appears 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 fairly good take a look at, really. It’s a “selector record argument” that works for the :nth-child ‘n’ associates selectors. As I write, it’s solely supported in Safari.

So let’s say your splendid state of affairs is that the browser helps this selector. Right here’s an instance. that with <ol> and <ul> the one legitimate youngster ingredient is <li>. But additionally say this record wants separators, so that you (and I’m not saying it is a nice concept) did this type of factor:

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

Then you definately additionally need to zebra-stripe the record. And, in order for you zebra striping, that you must 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 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 house. However for non-supporting browsers, you’ll want one thing beefier since you don’t have the zebra striping.

So now you may model 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:

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

} @else {

}

Anyway. The top result’s…

Supported
Not Supported

There’s a JavaScript API for testing assist as nicely. I wasn’t positive if this might really work, but it surely 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 truly wrap it in an @helps (moderately than simply let it fail) is pretty few.

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


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

Supply hyperlink

Leave a Reply