[GRID] CSS Grid의 인터넷 익스플로러(IE) 지원

[GRID] CSS Grid의 인터넷 익스플로러(IE) 지원

5분 이내에 IE에서 CSS 그리드를 작동하는 방법!

이 글은 https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66 를 번역한 글입니다.

우리가 여전히 안고 있는 문제는 IE를 지원하는 것이다. 

모르는 것은 CSS 그리드가 IE 10에서 처음 지원되었다는 것입니다. 

이 포스트에서는 IE CSS 그리드의 prefix를 이용하지 않고 CSS 그리드 구문을 사용하는 동안 IE 10 이상에서 CSS 그리드를 지원하는 방법에 대해 설명합니다.

IE11에서 테스트 완료 했습니다.

IE의 CSS 그리드에서 지원되지 않는 것은 무엇이며, 어떻게 작동시킬 수 있습니까?

* 그리드 갭은 지원되지 않지만 대신 CSS 마진을 사용할 수 있습니다.

* Grid-template-areas은 지원하지 않지만 Grid 라인을 이용할 수 있습니다.

* 중요: HTML <main> 태그가 CSS 그리드에서 작동하지 않습니다. 이를 <section role="main">로 대체합니다.

지원 IE CSS 그리드로 자동 변환 

AutoPrefixer CSS 온라인 웹 사이트 사용

Autoprefixer는 지원되는 브라우저의 사전 정의된 목록에 따라 CSS를 읽고 접두사를 추가하거나 제거하는 postcss 도구입니다. 

또한 스니펫에 prefix를 추가하는 데 사용할 수 있는 온라인 도구도 있습니다.

이제 코드를 온라인으로 Autoprefixer CSS에 복사하겠습니다.

주의! grid-template-areas를 변환할 때 autoprefixer 영역 간의 연결을 알아야 하므로 grid-area도 함께 변환해야 합니다.

https://autoprefixer.github.io/

결과

100% IE CSS Grid와 호환되는 CSS도 있습니다.

IE 구문을 이해할 필요가 없습니다. 변환이 잘 되고 있습니다!

  

More posts on CSS Grid: 

CSS Grid for Beginners (Beginner level)

The CSS Grid Methods (Intermediate level)

Becoming a CSS Grid Ninja! (High level)

출처 : https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66