-webkit- 및 -moz-와 같은 CSS 공급업체 접두사는 무엇이며 어떻게 사용해야 합니까?

CSS의 공급업체 접두어: -moz- 및 -webkit- 가이드

CSS 영역에서 다음 행을 접할 수 있습니다. 다음과 같은 코드:

-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;

이러한 코드는 공급업체 접두사가 붙은 속성으로 알려져 있습니다. 브라우저 공급업체는 공식 표준화 전에 실험적이거나 독점적인 CSS 기능을 테스트합니다.

공급업체 접두사의 목적은 무엇입니까?

공급업체 접두사는 주로 향후 기능에 대한 자리 표시자 역할을 합니다. 이를 통해 브라우저는 혁신적인 아이디어를 지원하고 이를 CSS 사양에 완전히 통합하기 전에 실제 사용자에게 테스트할 수 있습니다.

공통 공급업체 접두사:

• - 웹킷-(Chrome, Safari)
• -moz- (Firefox)
• -o-(Opera)
• -ms-(Internet Explorer)

공급업체 접두사 사용 모범 사례:

최대한의 호환성을 보장하려면 일반적으로 공급업체 접두사가 붙은 버전을 정의하는 것부터 시작하는 것이 좋습니다. 속성 뒤에 표준화된 버전이 옵니다. 예:

.elementClass {
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    -o-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}

이 방법을 사용하면 표준 버전의 속성(border-radius)을 지원하는 브라우저가 공급업체 접두사가 붙은 버전을 재정의할 수 있습니다.

예: 열 속성

언급한 코드는 열 속성을 정의합니다. Webkit(Chrome, Safari) 및 Firefox 브라우저 모두에 대한 (열 개수, 열 간격, 열 채우기)입니다. 이러한 속성은 다중 열 텍스트의 모양과 레이아웃을 제어합니다.

참조:

• CSS 다중 열 레이아웃 모듈: https://www.w3 .org/TR/css3-multicol/
• '공급업체 접두사 방어' (Meyerweb.com): https://meyerweb.com/eric/thoughts/2008/08/13/in-defense-of-vendor-prefixes/
• 공급업체 접두사 목록(Meyerweb.com): https://meyerweb.com/eric/thoughts/2007/09/03/vendor-prefixes-2/

위 내용은 -webkit- 및 -moz-와 같은 CSS 공급업체 접두사는 무엇이며 어떻게 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!