CSS Feature Queries

CSS Feature Queries
Nikhil
Published on 2021-07-09 05:45:19

CSS Feature Queries Parameter and Details


  • (property: value) Evaluates true if the browser can handle the CSS rule. The parenthesis around the rule are required.
  • and Returns true only if both the previous and next conditions are true.
  • not Negates the next condition
  • or Returns true if either the previous or next condition is true.
  • (...) Groups conditions

 

Basic @supports usage


@supports (display: flex) {
/* Flexbox is available, so use it */
.my-container {
display: flex;
}
}

In terms of syntax, @supports is very similar to @media, but instead of detecting screen size and orientation, @supports will detect whether the browser can handle a given CSS rule. Rather than doing something like @supports (flex), notice that the rule is @supports (display: flex).

 

Chaining feature detections


To detect multiple features at once, use the and operator.

@supports (transform: translateZ(1px)) and (transform-style: preserve-3d) and (perspective: 1px) {
/* Probably do some fancy 3d stuff here */
}

There is also an or operator and a not operator:

@supports (display: flex) or (display: table-cell) {
/* Will be used if the browser supports flexbox or display: table-cell */
}
@supports not (-webkit-transform: translate(0, 0, 0)) {
/* Will *not* be used if the browser supports -webkit-transform: translate(...) */
}

For the ultimate @supports experience, try grouping logical expressions with parenthesis:

@supports ((display: block) and (zoom: 1)) or ((display: flex) and (not (display: table-cell))) or
(transform: translateX(1px)) {
/* ... */
}

This will work if the browser

  • Supports display: block AND zoom: 1, or
  • Supports display: flex AND NOT display:
  • Supports transform: translateX(1px).

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website