[CSS] @supports 사용법

지원하는 css에 따른 스타일 적용이 된다면 좀 더 스마트하고 효과적으로 css를 작성할 수 있을것이다. 오늘은 @supports css 사용법에 대해 알아보고자 한다.

이 게시물은 @supports, CSS Supports, @supports (지원하는 css에 따른 스타일 적용) 사이트를 참고하여 작성하였습니다.

@supports의 사용

@supports 문법을 사용하면 CSS 기능 지원에 따라 달라지는 CSS 선언을 지정할 수 있다.
@supports 문법은 미디어 쿼리 문법과 유사한데,
아래 예시 코드를 살펴보겠다.

html >

<div>
  <h1>@supports</h1>
</div>

CSS >

<style>
  @supports (테스트할 프로퍼티 혹은 조건) {
      적용하려는 스타일
  }  
</style>

<style> 
@supports(display: flex) {
  div h1 { 
    	display: flex;
        justify-self: flex-start;
        color: red; 
        border: 3px solid red;
        padding: 20px;
        font-size: 40px;
 	}
        
 </style>

위의 예시 코드를 보면, @supports 로 작성된 스타일 시트가 적용된 것을 볼 수 있다.
display: flex를 지원하는 브라우저와 그렇지 않은 브라우저에서
적용될 소스가 다르게 된단 말이다.

이처럼 css 속성이 지원하거나 지원하지 않는 상황에 따라 css 값을 달리 적용시킬 수 있다.

@supports 연산자 사용

• not / and / or

1. not

not 키워드는 조건 지정의 반대를 확인하는 데 사용할 수 있다.
연산자 not 은 표현식 앞에 와서 표현식을 부정한다.
()괄호 안의 내용이 유효하지 않은 것으로 간주되면 true를 반환한다.

아래 예시에서는 브라우저가 플렉스가 아닐 때에 지원하기 때문에
즉 특정 스타일을 해당 브라우저에 적용하기 위해 지원하지 않는 브라우저를 확인하는 것이다.
원한다면, 여러개의 'not'을 연결하여 부정의 부정문으로도 쓰일 수 있다.

<style>
@supports not(:not( border-radius:10px)){

}
</style>

2. and 연산자

and 를 기점으로 작성한 조건의 css가 모두 (동시에) 참일 경우에만 관련 css값을 적용한다.

<style>
@supports (display: flex) and (display:gird) {
}
</style>

'display: flex'와 'display:gird'를 모두 동시에 지원하는 지 확인하고 {} 안의 내용을 실행한다.

<style>
@supports (display: table-cell) and ((display: list-item) and (display: contents)) {

}
</style>

--> 괄호 없이 여러 접속사를 병치 할 수 있다.

3. or 연산자

연산자 or은 하나 또는 둘다 참일 경우 참을 반환하여 실행한다.

<style>
@supports (transform:rotate(45deg)) or (-webkit-transform:rotate(45deg)){
   .box{transform:rotate(45deg);}
 }
</style>

transform:rotate(45deg) 나 -webkit-transform:rotate(45deg)의 css 중 하나라도 브라우저에서 지원을 하게된다면 .box에 입력한 css 가 적용된다.
===> 참고:and 및 연산자를 모두 사용하는 경우 or괄호를 사용하여 적용 순서를 정의해야 합니다. 그렇지 않으면 조건이 유효하지 않으며 전체 규칙이 무시된다.

4. 함수구문

1) seletor()

브라우저에서 특정 선택자를 지원하는 문법을 통해 분별하여 스타일을 적용시킬 수 있다.

<style>
    @supports selector(h2 > p) {
    }
            
   	@supports selector(A > B){
      .contents > .box {background:#000;}
   	}
 </style>

• 직계 자손 선택자 (>) 를 지원하는 브라우저일 경우에
• .contents > .box에 입력한 css를 적용할 수 있게 만든다.
• selector() 를 사용할 때는 selector 문법 뒤에 띄어 쓰기 없이 selector(선택자 조건)을 입력한다.
  selector (A ~ B){} ---- 안됨.
  selector(A ~ B){} ---- 이렇게 써야합니다.

2) 글꼴지원font-format

다음 예제는 woff2 글꼴 형식을 지원하는경우 {} 안의 내용 실행한다.

<style>
	@supports font-format(woff2) {
    	font-family: "Open Sans";
    	src: url("open-sans.woff2") format("woff2");
    } 
</style>