CSS[14] 그리드 레이아웃을위한 브라우저 지원

이 기사에서는 이전 브라우저를 계속 지원하면서 지금 그리드를 사용하는 방법을 보여줍니다.

2017 년 3 월까지 그리드 레이아웃에 대한 브라우저 지원은 사실상 존재하지 않았습니다. 인터넷 익스플로러와 엣지는 그리드를 지원하는 유일한 브라우저 였지만 그때조차도 -ms-접두어 만 사용했습니다 . 게다가, 지원은 사실 이전 버전의 스펙이었습니다 (이전 스펙보다 많은 것들이 많이 변경되었습니다).

사실, 파이어 폭스, 크롬, 오페라는 그리드를 지원했지만, 오직 플래그 뒤에서 만 가능했다. ( layout.css.grid.enabled파이어 폭스에서는,실험적인 웹 플랫폼 기능아래 chrome://flags) 크롬과 오페라한다.

그러나 2017 년 3 월은 CSS 그리드 레이아웃에 매우 중요한 달이었습니다. 그리드 지원은 적어도 6 개의 주요 브라우저에서 거의 동시에 발표되었습니다. 새로운 기능의 이러한 유형의 동기화 된 롤아웃은 브라우저를 사용하기 전에 거의 발생하지 않았습니다. 나는 그리드 레이아웃이 곧 사라지지 않을 것이라고 우리에게 알려줄 것이라고 생각한다.

Caniuse.com 의 현재 상황에 대한 분석은 다음과 같습니다 .

좋은 소식은 이제 대부분의 주요 브라우저가 그리드를 지원한다는 것입니다.

나쁜 소식은 그리드를 지원하지 않는 브라우저를 사용하는 사람들이 아직도 많이 있다는 것입니다. 따라서 이러한 사용자는 새로운 멋진 그리드 레이아웃을 볼 수 없습니다.

다른 좋은 소식은 결국 그들이 따라 잡을 것이라는 것입니다.

그러나 그때까지는 프로덕션 사이트에서 그리드를 사용하려면 페일 오버를 사용해야하므로 그리드가 아닌 브라우저는 의도 한대로 (또는 가까이서) 웹 사이트를 계속 볼 수 있습니다.

기능 쿼리가있는 그리드 테스트

이전 브라우저를 지원하면서 그리드를 사용하는 가장 좋은 방법은 기능 쿼리를 사용하는 것입니다. 여기서 supportsat-rule을 사용 하여 브라우저가 그리드를 지원하는지 여부를 테스트합니다. 만약 그렇다면, 그리드 레이아웃을 사용하십시오. 그렇지 않으면 브라우저는 오래된 기술 (예 : 수레, 또는 ... 감히 말하면 테이블 ... )을 사용하여 빌드 된 레이아웃을 볼 것 입니다.

supports규칙은 다음과 같이 작동합니다 :

@supports (display: grid) {

  .wrapper {

    display: grid;

    min-height: 100vh;

    ...

  }

}

이 코드는 매우 자명합니다. 나는 단순히 property: value테스트하고 싶은 선언문을 제공했다 . 브라우저가 지정된 선언을 지원하면 중괄호 사이에서 코드가 실행됩니다. 그렇지 않으면 완전히 건너 뜁니다.

따라서이 작업을 수행 하려면 규칙 앞에 장애 조치 코드를 지정해야합니다 supports. 이렇게 :

/* Old code goes here */

....old code....

​

/* Grid code goes here */

@supports (display: grid) {

  .wrapper {

    display: grid;

    min-height: 100vh;

    ...

  }

}

그렇게 하면 이전 코드로 모든 브라우저 를 설정 한 다음 supports규칙 내에서 표 코드를 실행합니다 .

따라서 브라우저가 그리드를 지원하지 않으면 해당 코드를 건너 뛰고 이전 코드를 계속 사용합니다.

브라우저가 기능 쿼리를 지원하지 않으면 전체 supports규칙 을 건너 뛰고 따라서 이전 코드가 사용됩니다.