CSS는 다양한 브라우저의 속성 지원과 호환되어야 하기 때문에 브라우저 제조업체는 웹킷을 핵심으로 사용하는 브라우저에서 "-webkit-" 접두사가 붙은 속성을 지원하기 위해 속성 앞에 개인 접두사를 추가합니다. "Safari" 및 "Chrome" 브라우저와 같은 사용.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
Css3 속성 앞에 웹킷을 추가해야 하는 이유는 무엇입니까?
CSS3에는 box-reduis, box-orient, text-overflow 등과 같은 몇 가지 새로운 속성이 있지만 이러한 속성은 그렇지 않았습니다. 이전 버전에 존재하거나 지원되지 않으므로 다른 브라우저에서는 이러한 새 속성을 구문 분석할 수 있도록 커널 이름이 지정됩니다. 이는 합리적인 설명인 것 같습니다. 즉, -moz-는 Firefox용이고 -webkit-은 Safari 및 chrome용입니다.
-moz는 Firefox 브라우저의 개인 속성을 나타냅니다
-ms는 브라우저의 개인 속성을 나타냅니다
-webkit은 Safari 및 Chrome의 개인 속성을 나타냅니다
표준이 아직 결정되지 않은 경우 일부 브라우저는 일부 기능은 초기 초안을 기반으로 구현되었으며, 이후 결정될 표준과의 호환성을 위해 각 브라우저는 표준과 구별하기 위해 자체적인 Private Prefix를 사용합니다. 접두사.css3 새 속성.
예는 다음과 같습니다.
<html> <head> <style> div { width:300px; height:100px; background-color:#ff9900; -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div></div> </body> </html>
개인 접두사는 왜 필요한가요? HTML과 CSS 표준을 제정하는 조직인 W3C의 속도가 매우 느리기 때문입니다. 보통 w3c 조직의 구성원이 rounded border-radius 같은 새로운 속성을 제안하면 모두가 좋다고 생각하는데, w3c에서는 이 속성에 대한 기준을 정하지 않고 매우 복잡한 과정을 거치게 되며 많은 리뷰.
브라우저 공급업체는 속성이 충분히 성숙하다고 생각하면 그렇게 오래 기다리지 않습니다. 하지만 향후 w3c가 표준을 발표할 때 변경을 방지하기 위해 -webkit-border-radius와 같은 전용 접두어를 추가하여 향후 w3c가 표준을 발표할 때 의 표준 작성 방법을 미리 지원할 예정입니다. border-radius가 설정되고 새 버전의 브라우저에서 border-radius 쓰기 방법을 지원하게 됩니다.
예를 들어 Chrome 10은 border-radius를 인식하지 못하고 webkit-border-radius만 사용할 수 있지만 Chrome 12에서는 이를 인식할 수 있습니다. 따라서 CSS를 작성할 때 이렇게 작성하면 웹을 탐색할 때 Chrome10과 Chrome12가 모두 올바르게 표시될 수 있습니다.
현재 생략할 수 있는 개인 접두사가 많이 있지만 이전 버전의 브라우저와 호환되도록 여전히 개인 접두사와 표준 방법을 사용하고 점진적으로 전환할 수 있습니다
(동영상 공유 학습: css 동영상 튜토리얼)
위 내용은 CSS3 속성 앞에 웹킷을 추가해야 하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!