-moz- and -webkit-는 무엇입니까?

-moz- and -webkit-는 무엇입니까?

이 질문에는 이미 다음과 같은 답변이 있습니다.

브라우저가 CSS 속성에 대한 벤더 접두사를 만드는 이유는 무엇입니까? (2개 답변)

닫힘4년 전에.

-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 코드를 보고 있을 때 이 선들을 발견했습니다.CSS를 배우기 위해 사용한 튜토리얼에서 이런 대사는 본 적이 없습니다.이 대사들에 대한 설명은 무엇입니까?아니면 이런 라인을 구현하는 방법을 배울 수 있는 소스가 있습니까?

( 입니다()에서 프리픽스 속성입니다-webkit Chrome, Safari우,-moz파이어폭스의 경우,-o오페라의 경우,-ms(인터넷 익스플로러의 경우).일반적으로 W3에서 최종 설명/정의하기 전에 새로운 CSS 기능을 구현하는 데 사용됩니다.

이를 통해 구현 간의 불일치를 안전하게 설명할 수 있도록 각 개별 브라우저/렌더링 엔진에 고유한 속성을 설정할 수 있습니다.속성의 미리 지정되지 않은 최종 버전이 해당 브라우저에 구현되므로 시간이 지남에 따라 접두사가 제거됩니다(적어도 이론적으로는).

이를 위해서는 일반적으로 벤더 접두사 버전을 먼저 지정한 후 접두사가 아닌 버전을 지정하여 비접두사 속성이 구현되면 벤더 접두사 속성 설정을 재정의하는 것이 좋습니다.

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

구체적으로, 질문의 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;

합니다를 합니다.column-count,column-gap그리고.column-fill웹킷 브라우저 및 Firefox의 속성.

참조:

• CSS 다중 컬럼 레이아웃 모듈.
• '공급업체 접두사 보호' (Meyerweb.com ).
• 벤더 접두사 목록(Meyerweb.com ).

-moz- and -webkit-는 무엇입니까?

CSS 합니다.-webkit-,-moz-,-ms-아니면-o-벤더 접두사라고 합니다.

---

브라우저마다 동일한 효과에 대해 다른 접두사를 추가하는 이유는 무엇입니까?

공급업체 접두사에 대한 좋은 설명은 QuirksMode의 Peter-Paul Koch에서 찾을 수 있습니다.

원래 벤더 접두사의 요점은 브라우저 제조업체가 실험적 CSS 선언을 지원하기 시작할 수 있도록 하는 것이었습니다.

W3C 워킹 그룹에서 그리드 선언에 대해 논의하고 있다고 가정해 보겠습니다. (부득이하게도 그렇게 나쁘지는 않을 것입니다.)더 나아가 어떤 사람들은 규격 초안을 작성하지만, 어떤 사람들은 세부 사항 중 일부에 동의하지 않는다고 합시다.아시다시피, 이 과정은 오래 걸릴 수 있습니다.

더 나아가 마이크로소프트가 실험적으로 제안된 그리드를 구현하기로 결정했다고 가정해 보겠습니다.이 시점에서 마이크로소프트는 사양이 변경되지 않을 것이라고 확신할 수 없습니다.따라서 CSS에 그리드를 추가하는 대신에 추가합니다.-ms-grid.

공급업체 접두사에는 "진행 중인 제안에 대한 Microsoft의 해석입니다."라고 나와 있습니다.따라서 그리드의 최종 정의가 다를 경우 Microsoft는 -ms-grid에 의존하는 페이지를 끊지 않고 새로운 CSS 속성 그리드를 추가할 수 있습니다.

---

2016년 기준 업데이트

이 게시물은 3년이 되었으므로, 현재 대부분의 공급업체들은 이러한 접두사가 불필요한 중복 코드를 생성하고 있으며, 모든 브라우저에서 하나의 효과를 얻기 위해 세 가지 다른 CSS 규칙을 지정해야 하는 상황은 원치 않는 것임을 이해하고 있음을 언급할 필요가 있습니다.

모질라의 관점에 대해 이 용어집에서 언급했듯이.Vendor Prefix위에May 3, 2016,

브라우저 공급업체는 이제 실험 기능에 대한 공급업체 접두사를 없애려고 합니다.그들은 웹 개발자들이 생산 웹 사이트에서 그것들을 사용하고 있다는 것을 알게 되었고, 전세계적인 공간을 오염시키고 약자들이 더 잘 수행하기 어렵게 만들었습니다.

예를 들어, 불과 몇 년 전에 상자에 둥근 모서리를 설정하려면 다음과 같이 써야 했습니다.

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

그러나 브라우저가 이 기능을 완전히 지원하게 되었으므로 표준화된 버전만 있으면 됩니다.

border-radius: 10px 5px;

---

모든 브라우저에 적합한 규칙 찾기

여전히 모든 브라우저에서 작동하는 공통 CSS 규칙에 대한 표준이 없기 때문에 caniuse.com 과 같은 도구를 사용하여 모든 주요 브라우저에서 규칙의 지원을 확인할 수 있습니다.

pleeease.iamvdo.me/play/ 을 이용할 수도 있습니다.Please는 당신의 CSS를 쉽게 처리하는 Node.js 어플리케이션입니다.이것은 전처리기 사용을 단순화하고 최고의 후처리기와 결합합니다.깨끗한 스타일시트를 만들고, 오래된 브라우저를 지원하며, 보다 나은 유지보수성을 제공합니다.

입력:

a {
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
}

출력:

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

언급URL : https://stackoverflow.com/questions/18083056/what-are-moz-and-webkit