기본 콘텐츠로 건너뛰기

9월, 2019의 게시물 표시

CSS autoprefixer 사용시 스타일 제거 될 경우

Autoprefixer 는 CSS 사용 시 최신 프로퍼티에  vendor prefix를 붙여주는 역할을 한다. ::-webkit-input-placeholder { color : gray ; } ::-moz-placeholder { color : gray ; } :-ms-input-placeholder { color : gray ; } ::-ms-input-placeholder { color : gray ; } ::placeholder { color : gray ; } 그런데 사용중인 Autoprefixer 버전에서 지원하지 않는 프로퍼티를 제거해버리는 경우가 있다. 실제로 Autoprefixer 6.7.7 버전에서는 backdrop-filter 라는 프로퍼티를 사용하게 될 경우 그대로 감쪽같이 지워지는 현상이 있다. 이런 현상을 방지하기 위해 autoprefixer 기능을 잠시 꺼두면 된다. .some-selector { /* autoprefixer: off */ backdrop-filter: blur(2px); /* autoprefixer: on */ } 물론 Autoprefixer 최신 버전을 사용하면 왠만한 경우 해결이 된다. 혹시나 버전을 올리기 힘든 상황인 경우 위 방식을 사용하고, 그렇지 않다면 최신 버전을 사용하는 것을 추천한다.