Day 54: testing for the support of a selector

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 */
}

My blog doesn’t support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - 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 */
}

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

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

MLA
" » Day 54: testing for the support of a selector." Manuel Matuzović | Sciencx - Thursday December 8, 2022, https://www.scien.cx/2022/12/08/day-54-testing-for-the-support-of-a-selector-2/
HARVARD
Manuel Matuzović | Sciencx Thursday December 8, 2022 » Day 54: testing for the support of a selector., viewed ,<https://www.scien.cx/2022/12/08/day-54-testing-for-the-support-of-a-selector-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 54: testing for the support of a selector. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/12/08/day-54-testing-for-the-support-of-a-selector-2/
CHICAGO
" » Day 54: testing for the support of a selector." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/12/08/day-54-testing-for-the-support-of-a-selector-2/
IEEE
" » Day 54: testing for the support of a selector." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/12/08/day-54-testing-for-the-support-of-a-selector-2/. [Accessed: ]
rf:citation
» Day 54: testing for the support of a selector | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/12/08/day-54-testing-for-the-support-of-a-selector-2/ |

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.

Related Posts