>웹 프론트엔드 >프런트엔드 Q&A >css3 앞에 접두어를 붙여야 하는 이유는 무엇입니까?

css3 앞에 접두어를 붙여야 하는 이유는 무엇입니까?

青灯夜游
青灯夜游원래의
2021-11-02 14:17:572036검색

CSS3은 아직 진정한 표준이 되지 않았기 때문에 많은 브라우저가 이를 지원하는 수준이 다르고 각 브라우저 제조업체는 동일한 스타일을 다른 방식으로 지원하므로 브라우저 간 호환성을 확보하려면 접두어를 추가해야 합니다. css3 접두사는 특정 브라우저 렌더링 엔진에서 새로운 속성을 인식하고 적용할 수 있도록 하는 데 사용됩니다.

css3 앞에 접두어를 붙여야 하는 이유는 무엇입니까?

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

CSS3 속성을 사용해 본 학생들은 각 브라우저마다 CSS3 속성을 접두어로 붙여야 한다는 것을 알고 있습니다. 지금도 여전히 접두어를 붙여야 하는 속성이 많이 있습니다. 왜 이런가요?

브라우저 제조업체에서는 이전에도 CSS3를 구현해 왔지만 아직 진정한 표준이 되지는 않았습니다.

CSS3의 많은 속성이 아직 결정되지 않았기 때문에, 표준 사양이 아직 공개되지 않았고, 많은 브라우저가 지원 수준이 다르며, 각 브라우저 제조업체는 동일한 스타일에 대해 서로 다른 작성 방법을 지원하므로 접두사를 추가해야 도달할 수 있습니다. 향후 사양이 통일되면 접두사를 작성할 필요가 없습니다.

css3 접두사는 특정 브라우저 렌더링 엔진에서 이 속성이 인식되고 효과적일 수 있도록 하기 위해 사용됩니다.

prefix browser kernel
-ms- IE 브라우저 Trident 커널
-moz- Firefox 게코 코어
- o- Opera Presto kernel
-webkit- Chrome 및 Safari Webkit kernel

생략할 수 있는 비공개 접두사가 많지만, 이전 버전의 브라우저와 호환되기 위해, 여전히 개인 접두사 및 표준 방법을 사용하고 점진적으로 전환할 수 있습니다.

초기 단계에서 둥근 테두리 반경을 작성하려면 다음과 같이 작성해야 합니다.

.box {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}

이것은 이전 버전의 작성과의 호환성을 위한 것입니다. 속성으로 인해 사용자 경험이 감소합니다. 새 버전의 브라우저는 직접 쓰기를 지원합니다: border-radius.

접두사를 사용하면 하위 버전의 브라우저에도 잘 매칭되어 스타일이 정상적으로 표시될 수 있습니다.

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 css3 앞에 접두어를 붙여야 하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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