CSS의 -webkit- 및 -moz-와 같은 공급업체 접두사는 무엇이며 왜 사용됩니까?

공급업체 접두사 이해: -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;

이 선은 공급업체 접두어 속성은 특정 렌더링 엔진에 고유합니다. -webkit 접두사는 Chrome 및 Safari에서 사용되는 반면 -moz 접두사는 Firefox에 적용됩니다.

공급업체 접두사의 목적

공급업체 접두사를 사용하면 새로운 CSS 또는 독점 CSS를 구현할 수 있습니다. W3C의 공식 표준화 이전의 기능입니다. 이를 통해 브라우저 구현 간의 잠재적인 불일치에도 불구하고 조기 채택이 가능합니다.

모범 사례

공급업체 접두사가 있는 속성을 먼저 지정한 다음 접두사가 없는 버전을 지정하는 것이 좋습니다. 이렇게 하면 브라우저에서 완전히 지원되면 접두사가 없는 속성이 공급업체 접두사가 붙은 설정을 재정의합니다.

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

애플리케이션 예제

제공된 CSS 예제에서 속성은 지정된 항목은 다중 열과 관련되어 있습니다. 레이아웃:

• -webkit-column-count: Webkit 브라우저에 대한 다중 열 레이아웃의 열 수를 지정합니다.
• -webkit -column-gap: Webkit의 열 사이 간격을 정의합니다. 브라우저.
• -webkit-column-fill: Webkit 브라우저의 열 내에서 콘텐츠가 배포되는 방식을 제어합니다.

-moz를 사용하여 유사한 속성이 Firefox에 적용됩니다. 접두사.

추가 리소스

• [CSS 다중 열 레이아웃 모듈](https://www.w3.org/TR/css3-multicol/)
• ['방어 공급업체 접두사' Meyer](https://meyerweb.com/eric/thoughts/2008/05/13/defense-of-vendor-prefixes/)
• [Meyer의 공급업체 접두사 목록](https://meyerweb. com/eric/thoughts/2008/05/13/defense-of-vendor-prefixes/)

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