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 최신 버전을 사용하면 왠만한 경우 해결이 된다. 혹시나 버전을 올리기 힘든 상황인 경우 위 방식을 사용하고, 그렇지 않다면 최신 버전을 사용하는 것을 추천한다.