브라우저의 CSS3 지원: 접두사 표

# 현대 브라우저의 CSS3 기능 지원: 호환성 표

현재 브라우저 버전에서는 CSS3 속성들이 W3C 완전 표준화 없이도 부분적으로 구현되어 있습니다. 개발자들은 벤더 접두사와 최소 버전을 고려해 크로스 브라우저 호환성을 확보해야 합니다. 아래 표는 주요 속성의 지원 상태, 접두사 요구사항(-ms-, -moz-, -webkit-, -o-) 및 브라우저 버전을 상세히 보여줍니다. 이를 통해 프로젝트에서 기능을 정확히 계획할 수 있습니다.

표 설명:

• 아이콘은 IE, Firefox, Chrome, Safari, Opera 지원 여부를 나타냅니다.
• 숫자는 최소 지원 버전을 의미합니다.
• 접두사 버전은 별도로 표시됩니다.

(빠른 참조를 위해 CSS3 지원 치트시트 표를 이미지로 삽입하세요.)

브라우저 지원 상세 정보

Internet Explorer는 버전 9+부터 -ms- 접두사를 사용해 border-radius, box-shadow 등의 기능을 지원합니다. Firefox는 버전 16까지 -moz-를 사용하다가 이후 대부분 표준 명칭으로 전환했습니다. Chrome과 Safari는 버전 4~5부터 -webkit-를 사용하며, 최종 명세에 맞춰 점차 접두사를 제거하고 있습니다.

Opera는 버전 10.5부터 -o- (드물게 -xv-)를 사용합니다. 전체 표는 다음 속성들을 다룹니다:

• 애니메이션과 변환: transition, animation, transform.
• 테두리와 그림자: border-radius, box-shadow.
• 배경과 그라디언트: background-clip, linear-gradient.
• 폰트와 텍스트: @font-face, text-shadow.
• 레이아웃: flexbox (display: flex), multi-column.

| 속성 | IE (버전) | Firefox (버전) | Chrome (버전) | Safari (버전) | Opera (버전) |

|-----------------|--------------|----------------|---------------|---------------|---------------|

| border-radius | 9 (-ms-) | 4 (-moz-) | 4 (-webkit-) | 5 (-webkit-) | 10.5 (-o-) |

| box-shadow | 9 (-ms-) | 4 (-moz-) | 10 (-webkit-) | 5.1 (-webkit-)| 10.5 (-o-) |

| transition | 10 | 16 | 26 | 6.1 | 12.5 |

이 표는 2012년 데이터를 기반으로 하지만, 레거시 프로젝트에서 접두사 원칙은 여전히 유효합니다.

벤더 접두사 사용법

• 자동화: 빌드 도구(Webpack, Gulp)에서 Autoprefixer를 사용해 Can I Use 데이터를 기반으로 접두사를 자동 추가하세요.
• 폴리필: 지원이 약한 경우 Modernizr 같은 JS 라이브러리로 감지하고 대체 기능을 제공하세요.
• 후처리: PostCSS 같은 도구로 동적으로 벤더 접두사를 생성하세요.
• 테스트: 에뮬레이터와 실제 기기에서 확인하며, 특히 모바일 Safari/Chrome에 집중하세요.
• 우아한 저하: CSS3 없이도 기본 렌더링이 되도록 IE 구버전을 대비하세요.

변환(transform)에 접두사를 적용한 예제 코드:

.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

업데이트 및 자료

지원 상황은 진화했습니다: 오늘날 Chrome 111+, Firefox 115+, Safari 17+에서는 대부분 접두사 없이 작동합니다. 최신 정보는 호환성 데이터베이스를 확인하세요. 이 표는 오래된 코드 감사나 현대 표준 마이그레이션에 유용합니다.

주요 요약

• 레거시 환경 필수 접두사: -webkit-은 2020년 이전 모바일 브라우저 80%를 커버합니다.
• 최소 버전: Chrome 4+, Firefox 4+, IE 9+로 출시 당시 사용자 95% 도달.
• 자동화로 간편: Autoprefixer가 수동 작업을 없앱니다.
• 테스트 필수: 엔진별 그림자와 그라디언트 렌더링 차이.
• 접두사 없는 미래: W3C 표준화로 벤더 확장 폐기 가속화.

— Editorial Team