새로운 CSS 기능에 접두사를 붙이는 이유는 무엇입니까?

웹 마스터가 접두사가 아닌 버전을 사용하도록하는 대신 브라우저가 새로운 CSS 기능을 접두사로 사용해야하는 정당한 이유가 있습니까?

예를 들어 배경 그라데이션 의 샘플 코드 는 다음과 같습니다.

#arbitrary-stops {
  /* fallback DIY*/

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* IE 10 */
  background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

웹 마스터가 동일한 코드를 4 번 복사하여 붙여 넣어 동일한 결과를 얻는 것이 요점은 무엇입니까?

참고 : 종종 인용되는 이유 중 하나는 접두사 가 붙은 스타일이 일시적인 것으로 브라우저가 사양을 올바르게 구현하지 않거나 사양이 확정적이지 않기 때문 입니다.

IMO,이 이유는 말도 안됩니다.

• 브라우저 엔진이 사양을 올바르게 구현하지 않으면 브라우저가 접두사 형식으로 구현되지 않거나 접두사 형식으로 구현하지 않더라도 브라우저는 호환되지 않습니다.
• 스펙이 확정적이지 않은 경우, 동일한 이름을 가진 이전 구현이있을 때 중요 할 수 있습니다. 예를 들어 CSS2가 linear-gradient있지만 CSS3이 linear-gradient추가 기능 으로 확장되도록 의도 된 -css3-<style>경우 작동하는 CSS2와 실험 CSS3을 구분하여 새로운 초안, 구현을 임시 접두사로 사용하는 것이 영리합니다 . 실제로 CSS2에는 linear-gradient다른 CSS3 참신 이 없습니다 .

브라우저마다 다른 구현 형식이 있는지 이해합니다 . 예를 들어 Firefox는 텍스트 그림자에 <weight-of-shadow distance-x distance-y color>필요하지만 Chrome에는 필요합니다 <distance-x distance-y weight-of-shadow color>. 그러나 실제로는 그렇지 않습니다. 지금까지 사용한 CSS3의 모든 새로운 기능은 동일한 형식이었습니다.

이 W3C 메모 에 따르면 :

향후 CSS 기능과의 충돌을 피하기 위해 CSS2.1 사양은 CSS에 대한 독점적이고 실험적인 확장을위한 접두사 구문 을 예약합니다 .

사양이 W3C 프로세스에서 후보 권장 사항 단계에 도달하기 전에 CSS 기능의 모든 구현은 실험적인 것으로 간주됩니다. CSS Working Group은 구현시 W3C Working Drafts의 기능을 포함하여 이러한 기능에 대해 공급 업체 접두사 구문을 사용하도록 권장합니다. 이렇게하면 향후 초안 변경 사항과의 비 호환성이 방지됩니다.

여기 및 여기 에서 CSS 상태를 추적 할 수 있습니다 .

다른 브라우저가 다른 구현 형식을 가지고 있는지 이해하고 싶습니다. 그러나 실제로는 그렇지 않습니다. 지금까지 사용한 CSS3의 모든 새로운 기능은 동일한 형식이었습니다.

이것은 당신이 오랫동안이 게임을하지 않았다는 것을 말해줍니다.

문제는 웹 브라우저 가 같은 방식으로 새로운 기능을 구현 하지 않는다는 것입니다. 표준화되지 않은 브라우저 구현 기능을 보는 것이 일반적이며 결과적으로 모든 것이 다른 브라우저에서 다르게 작동합니다.

뿐만 아니라 새로운 기능은 버그가 많기 때문에 (IE를 이름으로 부르는 것을 피할 것입니다) 다양한 요소의 구문이 동일하더라도 결과가 다릅니다.

이것은 새로운 기능을 사용하려는 개발자에게 골치 거리가됩니다. 스타일 시트 작성을 마친 후에는 설명 할 수없는 이유로 다른 브라우저에서 다르게 렌더링됨을 신속하게 알 수 있습니다.

접두사가 나오기 전에 개발자는 종종 CSS 파서의 오류를 악용하여 브라우저 간의 감지 가능한 차이에 의존해야했습니다. 그 결과 다음과 같은 가증이 발생했습니다.

padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;

이러한 종류의 핵은 개발자가 찾을 수있는 어떤 종류의 외설적 인 방법을 사용하여 각 브라우저에 대해 스타일 시트를 사용자 정의하려는 시도의 결과였습니다.

접두사를 표준화함으로써 개발자는 다른 브라우저에서 안정적이지 않은 기능을 사용할 수 있습니다. -moz-및 -webkit-접두사는 풍부 분명 저자는 특정 웹 브라우저에 적용 할 스타일을 제공하기 위해 노력하고 있음을 확인합니다.

기능이 안정되고 브라우저가 동일하게 작동하기 시작하면 접두사를 제거하고 기능을 한 번 선언 할 수 있습니다.

접두사가 모든 브라우저에 대해 스타일을 한 번 선언해야한다는 것을 의미하지는 않는다는 것을 이해하는 것이 중요하다고 생각합니다. 접두사는 웹 브라우저가 표준을 준수하지 않을 때마다 추가 스타일을 선언해야 함을 의미합니다. 예를 들어 위 코드 대신 다음으로 시작해야합니다.

 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Microsoft가 선형 그라디언트를 올바르게 계산할 수 없다는 것을 갑자기 알게되면 접두사를 추가하여 IE의 문제를 해결할 수 있습니다.

 /* Friggin IE */
 background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

갑자기 브라우저 중 하나가 다르게 작동 했음에도 불구하고 모든 브라우저에서 페이지가 동일하게 보입니다.

이것은 A List Apart에 관한이 기사 에서 매우 포괄적으로 다루어 졌다는 것을 알게 될 것이다 .

브라우저 엔진이 사양을 올바르게 구현하지 않으면 브라우저가 접두사 형식으로 구현되지 않거나 접두사 형식으로 구현하지 않더라도 브라우저는 호환되지 않습니다.

차이점은 브라우저가 호환 될 때 브라우저가 호환성을 깨뜨리지 않는다는 것입니다. 브라우저의 동작이 사양과 다른 경우 새 이름으로 표시되기 때문에 브라우저가 변경 될 때 기존 코드가 손상되지 않습니다.