css의 특정 기능들은 브라우저에 따라서 지원을 하는 브라우저와 없는 브라우저들이 있다.
특히 최근에 레이아웃을 구성하는 grid, flex 등의 코드 들은
익스플로러 낮은 버전이라던지 낮은 버전의 브라우저를 사용하면 동작을 안 할 수 도있다.
Can I use 이용하기
Can I use라는 사이트를 이용하면 해당 css가 어떤 브라우저에서 동작하는지를 알 수 있다.
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
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 지원 범위
@supports 기능의 경우 모든 브라우저에서 적용이 되나,
가장 필요한 internet Explorer에선 작동을 하지 않는다;
사실 가장 재앙 같은 IE만 빨리 없어지면 이러한 크로스 브라우징 이슈 문제를 위한 수정할 코드는
확실히 줄어들 것으로 보인다.
'FrontEnd > css' 카테고리의 다른 글
| [css] 가상요소 ::after, ::before 사용방법 및 동작 안할 때 (content) (0) | 2022.03.03 |
|---|---|
| [css] CSS 그라데이션 색 추천과 코드 생성 해주는 uigradients (0) | 2022.02.17 |
| [css] 레이아웃 구성 시 position fixed 와 sticky 차이 알아보기 (0) | 2021.08.16 |
| css 선택자 반복 코드를 줄여주는 :is 사용 방법 (css 코드 줄이기) (0) | 2021.08.14 |
| HTML/css 반응형을 위한 단위 vw, vh (svg text 반응형 처리 예시) (3) | 2021.04.23 |