@supports (display: grid) {
	div {
		display: grid;
	}
}

@supports (display: flex) {
	body {
		color: blue;
	}

	@media screen and (min-width: 900px) {
		article {
			display: flex;
		}
	}
}
@supports   (   display   :   flex   )   {}
@supports not (display: flex) {}
@SUPPORTS not (display: flex) {}
@supports (box-shadow: 0 0 2px black inset ) or (-moz-box-shadow: 0 0 2px black inset ) or (-webkit-box-shadow: 0 0 2px black inset ) or (-o-box-shadow: 0 0 2px black inset ) {}
@supports ( box-shadow: 0 0 2px black inset )

or
  ( -moz-box-shadow: 0 0 2px black inset ) or

  ( -webkit-box-shadow: 0 0 2px black inset ) or
  ( 
    -o-box-shadow: 0 0 2px black inset ) {

}
@supports   (   transition-property   :   color   )   or   (   (   animation-name   :   foo   )   and   (   transform   :    rotate(10deg)   )   )   {}
@supports(transition-property:color)or ((animation-name:foo)and (transform:rotate(10deg))){}
@supports ((
    display: flex)) {}
@supports (display: flex !important) {}
@supports NOT (display: flex) {}
@supports ((transition-property: color) OR (animation-name: foo)) AND (transform: rotate(10deg)) {}
@supports (transition-property: color) OR ((animation-name: foo) AND (transform: rotate(10deg))

) {}
@supports (NOT (display: flex)) {}

@supports selector(col || td) {
	col.selected || td {
		background: tan;
	}
}

@supports selector(
    :focus-visible
    ) {
	a:focus-visible {
		background: yellow;
	}
}

@supports (
    --element(".minwidth")) {

}

@supports (ident: 1) {
	* { background: red; }
}

@supports ((ident: 1)) {
	* { background: red; }
}

@supports (ident: "str") {
	* { background: red; }
}

@supports ((ident: "str")) {
	* { background: red; }
}

@supports func(10, 20, 40) {
	* { background: red; }
}

@supports (func(10, 20, 40)) {
	* { background: red; }
}

@supports (   func(   10   ,   20   ,   40   )  ) {
	* { background: red; }
}

@supports (animation-name: test) {
	@keyframes anim {
		from {
			color: black;
		}
		to {
			color: white
		}
	}
}

@supports (--foo: green) {
	body {
		color: var(--varName);
	}
}

@supports not selector(:is(a, b)) {
	ul > li,
	ol > li {
		color: red;
	}
}

@supports selector(
    :nth-child(
    1n of a
    
    ,
     b)) {
	:is(
      :nth-child(1n of ul, ol) a,
      details > summary
  ) {
		color: red
	}
}

@supports (animation-name: test) {
	@keyframes anim {
		from {
			color: black;
		}
		to {
			color: white
		}
	}
}

@supports selector(:focus-visible) {
	a:focus-visible {
		background: yellow;
	}
}

@supports (width: calc(100px)) {
	div {
		background: red;
	}
}

@supports (func(1)) {
	* { background: red; }
}

@supports (   selector(   col || td   )   ) {
	col.selected || td {
		background: tan;
	}
}

@supports (   func("example")   ) {
	* { background: red; }
}

@supports (   --var:   "test"   ) {
	* { background: red; }
}

@supports (--var) {
	* { background: red; }
}

@supports (--element(".minwidth")) {
	[--self] {
		background: greenyellow;
	}
}