Day 54: testing for the support of a selector

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

Support for a CSS property isn’t the only thing you can check with @supports(), you can also check support for a selector.

I knew you can check whether a property is supported by the current browser and apply styles accordingly.

<div hidden class="grid">
  Your browser supports <code>display: grid</code> 🎉
</div>

@supports (display: grid) {
  .grid {
    display: block
  }
}

What I didn’t know is that you can do the same, but for a selector using the selector() function.

<div hidden class="has">
  Your browser supports <code>:has()</code> 🎉
</div>

@supports selector(:has(a)) {
  .has {
    display: block
  }
}

You can also reverse the query.

@supports not selector(:has(a)) {
  /* You're Firefox, Opera Mini, etc. fallback */
}

This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2022-12-07T09:38:54+00:00) Day 54: testing for the support of a selector. Retrieved from https://www.scien.cx/2022/12/07/day-54-testing-for-the-support-of-a-selector/

MLA

" » Day 54: testing for the support of a selector." Manuel Matuzović | Sciencx - Wednesday December 7, 2022, https://www.scien.cx/2022/12/07/day-54-testing-for-the-support-of-a-selector/

HARVARD

Manuel Matuzović | Sciencx Wednesday December 7, 2022 » Day 54: testing for the support of a selector., viewed ,<https://www.scien.cx/2022/12/07/day-54-testing-for-the-support-of-a-selector/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 54: testing for the support of a selector. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/12/07/day-54-testing-for-the-support-of-a-selector/

CHICAGO

" » Day 54: testing for the support of a selector." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/12/07/day-54-testing-for-the-support-of-a-selector/

IEEE

" » Day 54: testing for the support of a selector." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/12/07/day-54-testing-for-the-support-of-a-selector/. [Accessed: ]

rf:citation

» Day 54: testing for the support of a selector | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/12/07/day-54-testing-for-the-support-of-a-selector/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.