CSS 노멀라이징

브라우저 기본 스타일 일반화

CRA는 postcss-normalize를 사용해 CSS를 초기화 합니다. 아래 코드를 CSS 엔트리 파일에 추가합니다.

styles/index.css

@import-normalize;

// ...

개발 서버를 구동하거나, 빌드하면 앱에 CSS 초기화 코드 normalize.css가 출력됩니다.

"Unknown at rule @import-normalize css (unknownAtRules)" 오류 문제 해결 방법을 참고하세요.

normalize.css 출력 설정

CRA 구성의 browserslist 설정을 기준 삼아 normalize.css 출력 코드가 제어됩니다.

package.json

"browserslist": {
  "production": [
    ">1% in KR",
    "not dead",
    "not ie <= 10"
  ],
  "development": [
    "last 2 chrome version",
    "last 2 firefox version",
    "last 1 safari version"
  ]
}

예를 들어 지원 범위가 IE 9+ 브라우저를 포함한다면 다음과 같이 코드가 출력됩니다.

last 3 versions

/**
 * IE 9+ 브라우저에서 올바르게 표시되도록 설정
 */

audio,
video {
  display: inline-block;
}

/**
 * IE 10+ 브라우저에서 a 링크에 포함된 img 테두리 제거
 */

img {
  border-style: none;
}

지원 범위가 IE 10 브라우저를 포함한다면 다음과 같이 코드가 출력됩니다.

last 2 versions

/**
 * IE 10+ 브라우저에서 a 링크에 포함된 img 테두리 제거
 */

img {
  border-style: none;
}

브라우저 호환성

normalize.css 브라우저 지원에 의해 결정됩니다. 현 시점의 브라우저 호환성은 다음과 같습니다.

• Internet Explorer 9+

• Chrome (last 3)

• Edge (last 3)

• Firefox (last 3)

• Firefox ESR

• Opera (last 3)

• Safari (last 3)

• iOS Safari (last 2)

알 수 없는 규칙 오류

"Unknown at rule @import-normalize css (unknownAtRules)"

VS Code에서 경고가 표시되면 css.lint.unknownAtRules 설정을 ignore로 설정하면 경고가 무시됩니다.