@supports
@supports
@supports
CSS 규칙은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공합니다. 이를 기능 쿼리(feature query)라고 부릅니다.
즉, 최신 스펙의 css값을 사용할 때 해당 css를 제공하는 브라우저에 따라 맞춤형으로 적용할 수 있게 해줍니다.
@supports 사용
css 입력 영역에 @supports (조건) { 적용할 css내용 }
을 입력하면 됩니다.
부정의 경우는 @supports not (조건) { 적용할 css내용 }
을 입력합니다.
.container {
width: 200px;
height: 200px;
}
/* 해당 브라우저에서 backdrop-filter 속성을 지원하면 css 적용 */
@supports (backdrop-filter: blur(10px)) {
.container {
backdrop-filter: blur(10px);
}
}
/* 해당 브라우저에서 backdrop-filter 속성을 지원하지 않는다면 css 적용 */
@supports not (backdrop-filter: blur(10px)) {
.container {
background-image: linear-gradient(orange, royalblue);
}
}
@supports 의 응용
기본적으로 한 가지의 특정 css의 지원/미지원에 따른 css 적용 뿐만 아니라 and
, or
같은 연산자를 사용해 특정 상황에 따른 css 적용 조건을 만들 수 있습니다.
/* and를 기점으로 작성한 조건의 css가 모두 참일 경우 관련 css 값을 적용한다. */
@supports (display: grid) and (display: flex) {
.container {
display: grid;
}
.container .item {
display: flex;
}
}
/* and를 기점으로 작성한 조건의 css가 모두 거짓일 경우 관련 css 값을 적용한다. */
/* 위와 달리 ()로 조건 전체를 감싼후 not을 입력한다. */
@supports not ((display: grid) and (display: flex)) {
.container {
float: left;
}
.container .item {
text-align: center;
line-height: 100px;
}
}
/* or를 기점으로 둘 중 혹은 여러 개 중 하나라도 참일 경우 관련 css 값을 적용한다. */
@supports (display: grid) or (display: flex) {
.container {
width: 500px;
}
}
@supports의 selector() 적용
브라우저에서 특정 선택자를 지원하는지도 @supports
문법을 통해 분별하고 스타일을 적용할 수 있다.
selector() 를 사용할 때는 selector 문법 뒤에 띄어 쓰기 없이 selector(선택자 조건)을 입력해야 함을 주의하자.
- selector (A ~ B) {} ---- X
- selector(A ~ B) {} ---- O
/* css 선택자 동작 여부 */
/* class 선택자에 대한 동작 여부 예제 코드 */
@supports (selector(.container)) {
.container {
border: 10px solid orange;
}
}
/* 직계 자손 선택자(>)에 대한 동작 여부 예제 코드 */
@supports (selector(A > B)){
.contents > .box {background:#000;}
}
참고자료
Author And Source
이 문제에 관하여(@supports), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@codenmh0822/supports저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)