브라우저는 역사적으로 특히 오래된 브라우저 또는 새로운 실험적 CSS 속성에서 발생하는 많은 불일치로 인해 CSS로 작업하는 것을 골치 아픈 일로 만들었습니다. 이 문제를 해결하려면 UI가 모든 브라우저에서 동일하게 보이고 작동하도록 특정 CSS 속성에 접두사를 적용해야 합니다.
좋은 예는 CSS flexbox입니다. 모든 최신 브라우저와 IE10 및 IE11에서 작동하려면 4개의 접두사가 필요한 속성(여기서 flexbox는 여전히 부분적으로만 지원됨):
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;사용할 수 있는 최신 도구를 사용하면 접두어를 입력하는 것에 대해 걱정할 필요가 없습니다. 사실, 기억하는 데 1초도 낭비해서는 안 됩니다. 이는 정신 자원의 낭비일 뿐입니다. 대신 Webpack과 함께 Autoprefixer 또는 사용 중인 작업 실행기/번들러와 같은 도구를 사용하세요.
Autoprefixer를 사용하면 최신 CSS를 프로덕션 서버로 푸시하기 전에 포스트 프로덕션에서 모든 작업을 수행하므로 CSS 속성 접두어에 대해 걱정할 필요가 없습니다.