CSS 벤더 프리픽스

과거 브라우저들 사이에는 다음과 같은 상황이 펼쳐졌습니다: CSS 속성이 표준에 포함되기 전에, 브라우저들은 벤더 프리픽스라고 불리는 특별한 접두사가 붙은 이 속성의 실험적 버전을 구현했습니다.

box-sizing 속성을 예로 들어 어떻게 생겼는지 살펴봅시다:

p {
	box-sizing: border-box;
}

이 속성은 Firefox29부터 지원되기 시작했지만, Firefox2 버전부터 -moz 프리픽스와 함께 사용 가능했습니다:

p {
	-moz-box-sizing: border-box;
}

다른 브라우저들도 유사한 접두사를 가지고 있었습니다: -moz - Mozilla Firefox, -webkit - Webkit 및 Blink 엔진 기반 브라우저, -o - Presto 엔진 기반 Opera, -ms - IE.

따라서, 벤더 프리픽스를 사용한 box-sizing 속성의 가장 크로스 브라우저적인 버전은 대략 다음과 같은 형태였습니다:

p {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

현재 브라우저들은 프리픽스의 불편함 때문에 사용을 중단하기로 결정했습니다. 그리고 지금은 이 대신 소위 플래그를 사용합니다. 이제 속성들은 브라우저에 도입되지만 기본적으로 비활성화되어 있으며, 그러나 브라우저 설정에서 해당 플래그를 체크하여 활성화할 수 있습니다. 이것은 개발자들이 새로운 속성이 공식적으로 등장하기 전에 실험해 볼 수 있도록 하기 위해 만들어졌습니다.