[CSS] 크로스 브라우징과 벤더 프리픽스 (Vendor Prefix)

이번 포스팅에서는 [CSS 실무 유지보수] 파트의 세부 주제인 구형 브라우저 대응과 지원 기능 판별에 대하여 상세히 알아보겠습니다.

1. 벤더 프리픽스의 원리와 자동화 도구

최신 CSS 스펙이 공식 표준으로 채택되기 전, 브라우저 제조사들이 자신들의 엔진에 실험적으로 기능을 구현할 때 접두사를 붙입니다. (-webkit-: Chrome/Safari, -moz-: Firefox, -ms-: IE/Edge)

이런 것들을 일일이 손으로 쓰는 것은 불가능에 가깝습니다. 실무에서는 반드시 Autoprefixer(PostCSS 플러그인) 같은 도구를 빌드 파이프라인에 연결하여 코딩 시에는 표준 CSS만 작성하도록 자동화해야 합니다.

2. 조건문(Feature Queries)으로 기능 우회하기: @supports

해당 브라우저가 최신 기능(예: backdrop-filter나 grid)을 지원하는지 CSS 내부에서 스스로 판별하고 분기 처리할 수 있습니다.

/* 기본 스타일: 해당 기능을 미지원하는 브라우저를 위한 안전한 코드 */
.glass-box {
  background-color: rgba(255, 255, 255, 0.9);
}

/* 브라우저가 해당 속성을 지원할 때만 내부의 코드를 실행 */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .glass-box {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

---

지금까지 벤더 프리픽스의 개념과 @supports 분기 기법에 대해 살펴보았습니다. 항상 최신 기능을 사용하되 구형 환경에서도 UI가 깨지지 않는 안전망(Fallback)을 함께 마련하는 것이 프로페셔널입니다.