CSS에 공급업체 접두사를 쉽게 추가하려면 어떻게 해야 합니까?

최소한의 노력으로 공급업체 접두사가 붙은 CSS

개발자로서 우리는 'transform'과 같은 공급업체 접두사가 붙은 CSS 속성을 설정하는 지루한 작업에 자주 직면합니다. 브라우저 간 호환성을 위해 '. 기존 접근 방식에서는 각 공급업체 접두사를 수동으로 지정하므로 코드가 장황하고 반복됩니다. 더 나은 솔루션이 있습니까?

간단하고 효과적인 대안은 공급업체 접두사 지정을 자동으로 처리하는 사용자 정의 기능을 만드는 것입니다. 방법은 다음과 같습니다.

function setVendor(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

이 함수는 세 가지 매개변수, 즉 스타일을 적용할 HTML 요소, CSS 속성 이름, 원하는 값을 사용합니다. 값을 설정하기 전에 공통 공급업체 접두사를 반복하고 이를 각 속성 이름에 추가합니다.

사용법:

이 기능을 사용하여 공급업체 접두사 CSS를 설정합니다. 한 줄 작업이 됩니다.

setVendor(elem, "Transform", "translate3d(0,0,0)");

이렇게 하면 지정된 값이 포함된 'transform' 속성이 지원되는 모든 항목에 자동으로 적용됩니다. 브라우저 접두사. 중복된 코드에 작별을 고하고 간소화된 개발 워크플로우를 만나보세요.

위 내용은 CSS에 공급업체 접두사를 쉽게 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!