[MediaQuery] 기능 쿼리 (supports)

•  @supports

: 이름이 있는 함수

  - 해당 조건을 지원할 때만 요소에 색깔 적용
  - 브라우저 지원 조건 구현 가능
  - 서로 중첩해서 사용 가능
-   미디어 쿼리 내에 사용 가능

 * 기본 문법

@supports (조건) {
	...
}

• Sources

  * 

//그리드를 이해하는 브라우저는 이 스타일을 적용
@supports (display: grid) {
  section#main {
    display: grid;
  }
  // display:grid를 쓰지 않는 레이아웃을 적용할 스타일
  // 그리드 레이아웃을 쓴 스타일
}

// =  중첩하여 사용 가능
@supports (display: flex) {
  @media screen {
    /* 화면에 적용할 플레스 박스 레이아웃*/
  }
  @media print {
    /* 인쇄에 적용할 플레스 박스 레이아웃 */
  }
}

// = 미디어 쿼리안에 supports 추가
@media screen and (max-wdith: 30em) {
  // 작은 화면에 적용할 플렉스 박스 스타일
  @supports (display: flex) {
  }
}

@media screen and (min-width: 30em) {
  // 큰 화면에 적용할 필레스 박스 스타일
  @supports (display: flex) {
  }
}

// = 중첩하여 사용 가능
@supports (display: grid) {
  //  그리드와 쉐이프를 모두 지원할 떄 사용할 스타일
  @supports (shape-outside: circle()) {
  }
}

// = or 조건 사용 가능
@supports (display: grid) or (shape-outside: circle()) {
}

// = grid 쓸 수 있는 경우에만 margin을 변경하고 싶은 경우
@supports (display: grid) {
  div.main {
    display: grid;
    grid-gap: 1rem;
  }
}

// = not grid가 지원되지 안을 때 사용
@supports not (display: gird) {
}