>웹 프론트엔드 >CSS 튜토리얼 >CSS3 속성 앞에 웹킷을 추가해야 하는 이유는 무엇입니까?

CSS3 속성 앞에 웹킷을 추가해야 하는 이유는 무엇입니까?

WBOY
WBOY원래의
2021-12-16 15:43:364968검색

CSS는 다양한 브라우저의 속성 지원과 호환되어야 하기 때문에 브라우저 제조업체는 웹킷을 핵심으로 사용하는 브라우저에서 "-webkit-" 접두사가 붙은 속성을 지원하기 위해 속성 앞에 개인 접두사를 추가합니다. "Safari" 및 "Chrome" 브라우저와 같은 사용.

CSS3 속성 앞에 웹킷을 추가해야 하는 이유는 무엇입니까?

이 튜토리얼의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.