IE를 위한 Grid 알아보기

브라우저 호환

Grid는 엣지(Edge)를 포함한 최신 브라우저에서 지원되는 속성이다. 하지만 IE10+ 의 경우에 -ms- prefix를 추가로 작성해야 적용이 가능하다. Grid를 사용하기 위해 일일이 -ms-를 적용하기란 쉬운일이 아니기 때문에 PostCSS, Autoprefixer와 같은 도구의 도움을 받으면 수월하게 적용할 수 있다.

* ~IE9 미지원

• Grid 브라우저 지원 현황

IE에서 지원되지 않는 속성

• repeat()에 auto-fit, auto-fill 지원되지 않음.
• fit-content() 미지원, 대신 우회한 방법으로 대체할 수 있음 (auto + max-width).
• IE에서 auto속성은 최신 브라우저에서의 auto와 다르게 해석되는 경우가 있음. 몇 가지의 경우를 제외하고 IE와 최신브라우저 모두 minmax(min-content, max-content)와 같이 해석됨.
• display:inline 요소에서는 Grid가 작동하지 않음. display:block으로 해결가능.

개발환경 세팅

필요한 package 설치

1. Node 설치
2. 프로젝트 폴더를 생성 예) myProject
3. 아래 명령어를 작성

> cd myProject
> npm init -y

package.json에 browserslist 설정하기

아래 소스를 추가하여 지원하려는 대상 브라우저를 설정할 수 있다.
아래 코드는 > 1% in KR은 한국에서 1% 이상의 사용자가 있는 브라우저를 대상으로 하고, ie10+를 지원하고자 할 경우이다. 이 코드는 caniuse에서 제공되는 데이터를 기반으로 한다.

{
  "browserslist": [
    "> 1% in KR",
    "ie >= 10"
  ]
}

gulp 설정 방법

gulp를 이용한 설정방법을 알아보겠다. 그전에 우선, 아래 코드를 이용해 관련 패키지를 설치해야한다.

> npm install gulp-cli -g
> npm install gulp gulp-postcss autoprefixer -D
> npm install cssnano -D  //css 파일 압축이 필요할 경우
> npx -p touch nodetouch gulpfile.js //gurlfile이 root에 자동으로 생성

설치가 완료됐다면 루트에 위치한 gulpfile.js를 열어 아래 설정사항을 입력하자.
아래 예시의 경우 관리할 css파일은 ./src/styles/styles.css로 지정되어 있다.
모든 css파일의 경우 ./src/styles/*.css로 변경할 수 있다.

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
  var plugins = [
    autoprefixer({ grid: 'autoplace' }), //grid사용 설정.
    cssnano()
  ];
  return gulp.src('./src/styles/style.css')
    .pipe(postcss(plugins))
    .pipe(gulp.dest('./dest')); //변환된 css파일이 떨어지는 위치
});

마지막으로 gulp css를 실행하면 dest폴더에 새로운 styles.css파일이 생성되는 것을 확인할 수 있다.

> gulp css 

css in js 설정 방법

gulp 설치 없이, package.json과 postcss.config.js를 설정하여 처리하는 방법에 대해서 알아보자. 우선 필요한 패키지를 설치하자!

> npm i cssnano autoprefixer postcss-cli postcss-gap-properties -D

루트에 위치한 package.json에 scripts를 추가한다.

{
  "scripts": {
    "postcss": "postcss --config postcss.config.js src/styles/*.css -d dest/",
  },
}

위 설정에 따르면 config파일로 postcss.config.js파일이 사용하고 내부에 설정된 코드를 참조하게 된다. postcss.config.js 내용은 다음과 같다.
코드를 살펴보면 autoprefixer에 grid 설정을 활성화하여 -ms- prefix를 자동으로 처리하도록 하였다. 또, cssnano를 사용해 css파일을 압축하는데 주석을 제거하는 코드를 넣었고, grid 문법인 gap사용시 예전 문법인 grid-gap과 최신 문법인 gap 모두 사용할 수 있도록 설정했다.

module.exports = {
  plugins: [
    require('autoprefixer')({ grid: true }),
    require('cssnano')({
      preset: [
        "default",
        {
          discardComments: { removeAll: true }
        }
      ]
    }),
    require("postcss-gap-properties")({ preserve: true })
  ]
};

설정이 모두완료되었다. 마지막으로 npm run postcss 명령어를 실행하면 src/styles/ 폴더에 위치한 모든 css파일을 dest/ 폴더에 설정이 반영된 변형된 파일이 생성된다.

> npm run postcss

참고로 폴더 구조는 다음과 같다

|-dest        //빌드되어 생성된 파일
||-product.css
||-styles.css
|-node_modules
|-src
||-styles     //원본파일 경로
|||-product.css
|||-styles.css
|-package.json
|-postcss.config.js

[참조]

• 야무님 설정방법
• wa:IE에서의 CSS 그리드 사용하기
• 가이드
• autoprefixer css online