FrontEnd/css

css @supports 를 이용해서 브라우저에 지원 여부에 따라서 코드 적용시키기 (Can I use)

김평범님 2021. 8. 17. 23:14
반응형

@supports 코드 적용

css의 특정 기능들은 브라우저에 따라서 지원을 하는 브라우저와 없는 브라우저들이 있다.

특히 최근에 레이아웃을 구성하는 grid, flex 등의 코드 들은

익스플로러 낮은 버전이라던지 낮은 버전의 브라우저를 사용하면 동작을 안 할 수 도있다.

 

Can I use 이용하기

Can I use라는 사이트를 이용하면 해당 css가 어떤 브라우저에서 동작하는지를 알 수 있다.

https://caniuse.com/

 

Can I use... Support tables for HTML5, CSS3, etc

 

caniuse.com

can I use? 사이트를 이용해서 css 지원 브라우저 확인하기

flex를 확인해보면 IE6에서 9 버전을 이용하면 flex가 적용하지 않는다는 것을 수 있다. 

 

@supports

css의 @supports 기능을 이용하면 해당 css기능을 브라우저에서 지원하는지 아닌지를 알 수 있다.

@support기능으로 를 지원하는지를 체크하려면 아래와 같은 코드를 쓸 수 있다.

<html>
<head>
    <style>
        @supports (display: flex) {
            body {
                display:flex;
            }
        }
        .content1 {
            background:pink;
            padding:60px;
            height:1000px;
        }
        .content2 {
            background:peachpuff;
            padding:60px;
            height:1000px;
        }
    </style>
</head>
<body>
    <div class="content1">
        <div class="header">
            Header1
        </div>
        content1
    </div>

    <div class="content2">
        <div class="header">
            Header2
        </div>
        content2
    </div>
</body>
</html>
@supports (display: flex) {
//flex를 지원한다면
body { display: flex}
}

@supports 뒤 () 안에 내가 확인하고 싶은 css 속성을 입력하고

해당 속성이 있다면 밑의 코드를 실행하라고 작성할 수 있다.

 

위 코드 실행 코드

flex 코드가 있다면 body에 flex 코드를 추가해서 하위에 있는 div들이 flex 속성에 의해서 붙은 것을 확인할 수 있다.

 

 

💻@supports 지원 범위

@support 브라우저호환성

@supports 기능의 경우 모든 브라우저에서 적용이 되나,

가장 필요한 internet Explorer에선 작동을 하지 않는다;

사실 가장 재앙 같은 IE만 빨리 없어지면 이러한 크로스 브라우징 이슈 문제를 위한 수정할 코드는

확실히 줄어들 것으로 보인다.

반응형