속성 이름 뒤에 브라우저 접두어 사용

Question

글쎄, 이상한 질문입니다. 어쨌든 내가 CSS 접두사를 CSS 속성 이름 앞에 붙여서 사용하는 경우 어떻게됩니까? 예 :

box-shadow: 0 2px 2px rgb(0, 0, 0), 0 1px rgba(255, 255, 255, 0.0) inset; 
box-shadow -moz-: 0 2px 2px rgb(0, 0, 0), 0 1px rgba(255, 255, 255, 0.0) inset; 
box-shadow -webkit-: 0 2px 2px rgb(0, 0, 0), 0 1px rgba(255, 255, 255, 0.0) inset; 

이뿐만 아니라 호기심 질문, 내 친구는 그가 CSS의 라인을 작성하고 작업했다고한다. 나는 크롬과 파이어 폭스가 이런 종류의 실수를 올바른 방식으로 관리한다고 대답했다. 그러나 지금은 약간 궁금하다. 나는 접두사 (사실 접미사가 아님)를 사용하는 이러한 방식이 표준이 아니며 실행되는 것처럼 보이지만 피해야한다고 생각하는 것이 맞습니까?

Answer 1

표준이 아니어야합니다. 나는 이것을 사용하지 않을 것이다. 내가 어떻게 작동 할 것인가를 생각할 수있는 유일한 이유는 그것을 파싱하는 방식 일 것이다. 배경 스타일 속성의 값을 혼합 할 수있는 것과 같습니다. (비록 background: url("pathtoimage") #FFF 일 수 있지만 은이어야합니다. background: #FFF url("pathtoimage")입니다.

Answer 2

접두어는 표준이 아닙니다. 그것들은 아직 완전히 표준화되지 않은 독점적 인 범위입니다. 공급 업체 만이 프로그래밍 한 내용과 작동 방법을 알고 있으며 기능을 문서화하지 않으면 버그 일 수 있습니다.

이것은 브라우저 공급 업체가 문서화하지 않은 것을 사용하지 않는 이유입니다. 그렇지 않으면 브라우저 버전간에 기능이 손실 될 수 있습니다.

Answer 3

잘못된 구문이므로 브라우저는 두 번째 및 세 번째 규칙을 무시합니다. 현재 모든 브라우저가 접두사가없는 box-shadow을 지원하므로 첫 번째 규칙을 사용하기 때문에 "작동"합니다.

Chrome에서는 devtools의 스타일을보고이를 볼 수 있습니다. 잘못된 규칙은 버려 졌기 때문에 누락되었습니다.

파이어 폭스는 "CSS"탭에서 다음과 같은 오류를보고합니다

Expected ':' but found '-moz-'. Declaration dropped. box-shadow.html:4:16 
Expected ':' but found '-webkit-'. Declaration dropped. box-shadow.html:5:1 

속성 이름 뒤에 공급 업체 접두사를 배치의 개념은 표준에 정의되지 않은 및 모든 브라우저에서 지원되지 않습니다. 순수하고 단순합니다.

즉, 잘못된 두 번째 및 세 번째 규칙을 제거하면 모든 것이 정확하게 동일하게 작동합니다.