@supports 규칙

@supports는
CSS의 특정 기능을 브라우저에서 지원하는지(supports) 확인하는 CSS 구문 규칙입니다.

@supports를 사용하면 CSS의 특정 기능을 브라우저가 지원하는지 여부에 따라 원하는 스타일을 지정할 수 있습니다.

@supports로 확인할 수 있는 CSS 기능 지원 여부

다음과 같은 CSS 기능이 브라우저에서 지원되는지 확인할 수 있습니다.

  • CSS의 속성과 값의 조합 지원 여부
  • CSS의 선택자의 지원 여부

이 외에도 @supports는 글꼴 형식(font-format)과 글꼴 기술(font-tech)의 지원 여부를 확인하는 데 사용할 수 있습니다. 그러나 이 두 기능에 대한 공식적인 명세서나 지원 정보는 제한적이므로, 더 자세한 내용은 MDN 문서를 참고하는 것이 좋습니다.

구문

@supports 규칙에 대한 구문 형식은 다음과 같습니다.

  1. 기본 구문 - 속성과 값의 조합 지원 여부에 사용하는 구문
  2. selector() 구문 - 선택자의 지원 여부에 사용하는 구문
  3. not, and, or 논리 연산자 사용하기

이제 각 구문 형식을 하나씩 살펴보겠습니다.

기본 구문

CSS 
@supports (속성: 값) {
  /* 지원되는 경우 선언할 스타일 */
}

이 기본 구문은 브라우저에서 CSS의 속성과 값의 조합 지원 여부만을 확인하는 구문입니다.
지원 여부를 확인하고 싶은 속성에 대한 값은 속성: 값 형식으로 지정합니다. 여기에서 속성: 다음에 오는 값 앞에 공백을 추가하는 것은 가독성을 위한 것일 뿐이며, 속성: 값과 속성:값은 동일합니다.

속성만 지원 여부를 확인하거나, 값만 지원 여부를 확인할 수는 없습니다. 속성: 값 쌍의 지원 여부를 확인합니다.

예제
CSS 
/* 브라우저가 'display: grid'를 지원하는지 확인 */
@supports (display: grid) {
    /* 'display: grid'를 지원하면 해당 스타일의 선언은 유효 */
    .container { /* 원하는 스타일 선언 */
        display: grid;
        gap: 15px;
        ...
    }
}
  • 브라우저가 display: grid를 지원하면 해당 스타일의 선언은 유효합니다.
  • 지원하지 않으면 @support의 {} 괄호 안(이를 '블록'이라고 부름)에 선언한 선택자의 스타일은 무시됩니다.

또한, CSS에서 사용하는 다양한 형식의 속성: 값 조합도 확인할 수 있습니다.

CSS 
/* 단축 속성과 그 값 */
@supports (border: 1px solid red) {
}

/* 속성과 띄어쓰기로 구분하는 값 */
@supports (background-size: 100px 25px) {
}

/* 속성과 함수형 표기 값 */
@supports (padding: calc(100% - 10px)) {
}
주의할 점

속성: 값에서 값 다음에 속성: 값;처럼 세미콜론(;)을 사용하면 안 됩니다.
@supports 구문에서 속성 값 다음에 세미콜론을 추가하면 문법 오류가 발생합니다.

CSS 
@supports (display: grid;) { /* 문법 오류 발생 */ }
CSS 
@supports (display: grid) { /* 정상 동작 */ }

selector() 구문

CSS 
@supports selector(선택자) {
  /* 지원되는 경우 선언할 스타일 */
}

이 selector() 구문은 브라우저에서 CSS의 선택자의 지원 여부만을 확인하는 구문입니다.
지원 여부를 확인하고 싶은 선택자를 @supports selector(선택자)처럼 selector()의 괄호 안에 지정합니다.

예제
CSS 
/* 브라우저가 'h1 > p' 선택자를 지원하는지 확인 */
@supports selector(h1 > p) {
    /* 'h1 > p' 선택자를 지원하면 해당 스타일의 선언은 유효 */
    h1 > p {
        /* 원하는 스타일 선언 */
    }
}
  • 브라우저가 h1 > p 선택자를 지원하면 해당 스타일의 선언은 유효합니다.
  • 지원하지 않으면 @support의 {} 괄호 안(이를 '블록'이라고 부름)에 선언한 선택자의 스타일은 무시됩니다.

이 구문은 CSS에서 사용하는 다양한 형식의 선택자를 확인할 수 있습니다. 다음의 예제들을 통해 살펴보세요.

CSS 
@supports selector(*) {
}
@supports selector([title]) {
}
@supports selector(h1 p) {
}
@supports selector(::before) {
}
@supports selector(button:hover) {
}
@supports selector(:nth-child(2n)) {
}

not, and, or 논리 연산자 사용하기

@supports의 모든 구문에서는 not, and, or 논리 연산자를 사용해서 @supports의 지원 조건을 추가할 수도 있습니다. 또한, () 괄호를 묶어서 우선순위를 지정할 수도 있습니다.

각 논리 연산자의 역할은 다음과 같습니다.

not 연산자

부정을 의미합니다. 이 연산자의 뒤에 오는 (속성: 값)을 부정하여 반대되는 결과, 즉 '지원하지 않는' 것을 확인합니다.

예제로 살펴보겠습니다.

CSS 
/* 브라우저가 'display: grid'를 지원하지 않는 경우 */
@supports not (display: grid) {
    /* 'display: grid'를 지원하지 않으면 해당 스타일의 선언이 적용됨 */
    .container { /* 대체 스타일 선언 */
        display: flex;  /* flexbox를 대체 사용 */
        gap: 10px;
        flex-wrap: wrap;
        ...
    }
}
  • 브라우저가 display: grid를 지원하지 않으면 해당 스타일의 선언은 유효합니다.
  • 지원하면 @support의 {} 괄호 안에 선언한 선택자의 스타일은 무시됩니다.

and 연산자

'그리고'를 의미합니다. 이 연산자의 앞과 뒤에 오는 (속성: 값)을 브라우저가 둘 다 지원하면 지원하는 것으로 확인합니다.

예제로 살펴보겠습니다.

CSS 
/* 브라우저가 'display: grid'와 'gap' 속성을 모두 지원하는 경우 */
@supports (display: grid) and (gap: 15px) {
    /* 두 속성을 모두 지원할 때 적용할 스타일 */
    .container {
        display: grid;
        gap: 15px;
        ...
    }
}
  • 브라우저가 display: grid 그리고 gap: 15px을 모두 지원하면 해당 스타일의 선언은 유효합니다.
  • 하나라도 지원하지 않으면 @support의 {} 괄호 안에 선언한 선택자의 스타일은 무시됩니다.

or 연산자

'또는'을 의미합니다. 이 연산자의 앞과 뒤에 오는 (속성: 값) 중에서 브라우저가 하나라도 지원하면 지원하는 것으로 확인합니다.

예제로 살펴보겠습니다.

CSS 
/* 브라우저가 'display: grid' 또는 'display: flex' 중 하나라도 지원하는지 확인 */
@supports (display: grid) or (display: flex) {
    .container {
        display: grid; /* grid를 우선 적용 */
        gap: 15px;
    }
}
  • 브라우저가 display: grid 또는 gap: 15px 중 하나라도 지원하면 해당 스타일의 선언은 유효합니다.
  • 둘다 모두 지원하지 않으면 @support의 {} 괄호 안에 선언한 선택자의 스타일은 무시됩니다.

여러 연산자 사용하기

not, and, or 연산자는 여러 개를 함께 조합하여 복잡한 조건을 만들 수 있습니다.

예제로 살펴보겠습니다.

CSS 
/* 만약 'display: grid'를 지원하지 않으면서 'display: flex'는 지원하는 경우 */
@supports not (display: grid) and (display: flex) {
    .container {
        display: flex; /* grid를 지원하지 않으면 flex 사용 */
        gap: 15px;
    }
}

이 예제는 브라우저가 display: grid를 지원하지 않으면서, display: flex를 지원하는 경우 플렉스 박스 스타일을 적용하는 방법을 보여줍니다.

괄호로 묶어 우선순위 지정하기

() 괄호를 묶어서 우선순위를 지정할 수도 있습니다.

CSS 
/* 만약 grid와 gap을 지원하지 않고, flex를 지원하는 경우 */
@supports not ((display: grid) and (gap: 15px)) and (display: flex) {
    .container {
        display: flex; /* grid를 지원하지 않으면 flex 사용 */
        justify-content: space-between; /* 적절한 대체 스타일 적용 */
    }
}

이 코드에서 not 연산자는 괄호 안의 조건 (display: grid) and (gap: 15px)에 먼저 적용됩니다. 즉, 브라우저가 display: grid와 gap: 15px을 동시에 지원하지 않는다면, 그다음 display: flex가 지원되는지를 확인하여 해당 스타일을 적용합니다.

활용 예제

@supports 규칙은 특정 CSS 속성을 기반으로 디바이스 환경을 감지하거나, 일부 브라우저에서만 적용할 스타일을 분리서 적용할 때 유용하게 사용할 수 있습니다. 최신 브라우저에서는 대부분의 최신 CSS 기능을 지원하기 때문에, 단순한 기능 감지가 아닌 디바이스 특성에 따른 스타일 적용 용도로 활용되는 경우가 많습니다.

터치스크린 환경 감지

모바일 등 터치스크린 기반 디바이스에서는 불필요한 스크롤이나 확대/축소 동작을 방지하기 위해 특정 CSS 설정이 필요할 때가 있습니다.
touch-action 속성은 터치스크린을 지원하는 브라우저에서만 적용되므로, 이 속성의 지원 여부를 확인하면 터치스크린 환경인지 판단할 수 있습니다. 이 점을 활용하면 터치스크린 기반 디바이스에서 불필요한 스크롤이나 확대/축소 동작을 방지할 수 있습니다.

아래 예제에서는 모달 창을 열었을 때 배경이 터치로 스크롤되지 않도록 설정합니다.

CSS 
@supports (touch-action: none) {
    .modal {
        touch-action: none; /* 터치스크린에서 모달 밖으로 스크롤이나 확대/축소 방지 */
    }
    .modal-content {
        /* 모달 내부의 콘텐츠는 여전히 스크롤 가능 */
        overflow-y: auto;
    }    
}

이 방식은 모바일 환경에서 모달 창이 열렸을 때 배경 스크롤을 차단하는 데 유용합니다. 일반적으로 자바스크립트를 사용하기도 하지만, CSS만으로 해결할 수 있다는 점에서 더 간결하고 효율적입니다.

브라우저 호환성

@supports 규칙의 브라우저 호환성
구문
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
@supports 28 12 22 9
selector() 구문 83 83 69 14.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

@supports 규칙의 명세서 사양
명세서 사양
@supports CSS Conditional Rules Module Level 3
#at-supports
@supports CSS Conditional Rules Module Level 4
#at-supports-ext

참고문헌

같이 보기