공급 업체 별 CSS 속성 : 필요한 악?

브라우저 개발자 (공급 업체)는 종종 독점 속성으로 CSS 사양을 확장합니다. 이러한 확장은 새로운 기능 추가, 실험 수행 및 후보 추천 상태에 도달하기 전에 W3C 표준화를 위해 예정된 기능의 테스트를 촉진하는 등 다양한 목적을 제공합니다.

기존 또는 미래 표준 CSS 속성과의 충돌을 피하기 위해 특정 명명 규칙이 사용됩니다. 공급 업체 별 속성 및 키워드는 하이픈 (-) 또는 밑줄 ( _ 로 시작해야합니다. 권장 형식은 다음과 같습니다.

'-'   vendor specific identifier   '-'   meaningful name

'_'   vendor specific identifier   '-'   meaningful name

이 컨벤션은 표준 CSS 속성이 하이픈이나 밑줄로 시작하지 않기 때문에 호환성을 보장합니다. 그러나 이것은 충돌을 최소화하지만 공급 업체 별 확장은 공식 CSS 사양의 일부가 아니며 변경 될 수 있습니다. 따라서 그들의 사용은 최소화되어야한다.

표 1 : 일반적인 공급 업체 접두사

주의 : 충돌을 일으킬 가능성은 낮지 만 공급 업체 별 확장은 통지없이 변경 될 수 있습니다. 또한 CSS 검증을 통과하지 못합니다. 가능할 때마다 표준 CSS 속성의 우선 순위를 정합니다. 확장이 필요한 경우 표준 속성을 밀접하게 미러링하여 사용 가능한 일단 표준으로 원활하게 전환 할 수 있도록 하나를 선택하십시오.

예 : 불투명도 속성

광범위한 CSS3 지원 전에 개발자는 불투명도 에 공급 업체 별 확장을 사용했습니다. 이 예제는 일반적인 접근법을 보여줍니다 :

.test {
  background: red;
  /* IE filter extension */
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
  width: 100%;                /* Required for IE filter */
  -moz-opacity: 0.6;         /* Mozilla extension */
  -khtml-opacity: 0.6;        /* Konqueror extension (Safari 1.1) */
  opacity: 0.6;              /* Standard CSS3 syntax */
}

이 기술은 다양한 브라우저에서 호환성을 보장하며 각 브라우저는 적절한 속성을 선택합니다. 브라우저가 표준 불투명도 속성을 채택한 후에도이 접근법은 기능적으로 유지되었습니다. 인터넷 익스플로러 필터 속성은 비표준 예외입니다.

결론:

공급 업체 별 속성은 테스트 및 브리징 호환성 격차에 도움이 될 수 있지만 장기 솔루션에는 이상적이지 않습니다. 항상 표준 CSS 속성을 선호합니다. 공급 업체 접두사를 드물고 절대적으로 필요한 경우에만 사용하여 잘 문서화되지 않았으며 예기치 않게 변경 될 수 있음을 기억하십시오. 브라우저 호환성 정보에 사용할 수있는 리소스를 참조하십시오.