> 웹 프론트엔드 > 프런트엔드 Q&A > CSS3 스타일 접두사는 무엇입니까?

CSS3 스타일 접두사는 무엇입니까?

青灯夜游
풀어 주다: 2022-03-18 18:15:23
원래의
2317명이 탐색했습니다.

css3 스타일 접두어는 다음과 같습니다. 1. "-moz-"는 Firefox 브라우저의 개인 속성을 나타냅니다. 2. "-ms-"는 IE 브라우저의 개인 속성을 나타냅니다. 는 Safari 및 Chrome 속성의 개인 속성을 나타냅니다. 4. "-o-"는 Opera 개인 속성을 나타냅니다.

CSS3 스타일 접두사는 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3 스타일의 접두사 문제

초보자로서 CSS를 작성할 때 어떤 속성을 접두사로 붙여야 하는지, 어떤 접두사를 사용해야 하는지 알 수 없을 때가 있습니다. 다음은 제가 주로 공부하는 내용을 요약한 것입니다.

이 접두사를 이해하기 전에 먼저 주요 주류 브라우저의 핵심을 소개하겠습니다.

  • IE——trident (국내 많은 듀얼 코어 브라우저의 핵심 중 하나는 trident)

  • Opera——Blink (presto 더 이상 사용되지 않음)

  • chrome - Blink(이전의 webkit)

  • Firefox - Gecko

  • Safari - webkit(Android 휴대폰에서 가장 자주 사용되는 웹킷 커널)

그리고 모든 커널에는 고유한 접두사가 있습니다. :

  • Trident 커널: 접두어는 ​​-ms-

  • Gecko 커널: 접두어는 ​​-moz-

  • Presto 커널: 접두어는 ​​-o-

  • Webkit 커널: 접두어는 -webkit-

이므로:

  • -moz-는 Firefox 브라우저 개인 속성을 나타냅니다.

  • -ms-는 IE 브라우저 개인 속성을 나타냅니다.

  • -webkit-은 Safari를 나타냅니다. 및 chrome 개인 속성

  • -o-는 Opera 개인 속성

을 나타냅니다. 예: 둥근 테두리 반경을 작성하려면 다음과 같이 작성해야 합니다.

.box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
로그인 후 복사

그렇다면 왜 개인 접두사가 필요한가요?

HTML과 CSS 표준을 제정하는 조직인 W3C가 매우 느리기 때문입니다. 보통 w3c 조직의 구성원이 rounded border-radius 같은 새로운 속성을 제안하면 모두가 좋다고 생각하는데, w3c에서는 이 속성에 대한 기준을 정하지 않고 매우 복잡한 과정을 거치게 되며 많은 리뷰. 브라우저 공급업체는 속성이 충분히 성숙하다고 생각하면 그렇게 오래 기다리지 않고 브라우저에 지원을 추가합니다.

그러나 향후 w3c가 표준을 발표할 때 변경을 피하기 위해 -webkit-border-radius와 같은 개인 접두사가 추가됩니다. 이러한 방식으로 w3c가 표준을 발표할 때 미리 새로운 속성이 지원됩니다. 향후에는 border-radius의 표준 쓰기 방법이 추가될 예정이며, 이를 확립한 후 새 버전의 브라우저에서 border-radius 쓰기 방법을 지원하도록 하세요.

(학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드)

위 내용은 CSS3 스타일 접두사는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿