정보실

웹학교

정보실

css CSS 공급 업체 프리픽스

본문

공급 업체 접두사는 CSS 개발자가 아직 안정적이지 않은 새로운 기능에 액세스 할 수 있도록 브라우저를 사용하는 한 가지 방법입니다.


계속하기 전에 이 접근법이 인기가 떨어지고 있음을 명심하십시오. 사람들은 실험 플래그를 사용하여 선호합니다. 

실험 플래그는 사용자의 브라우저에서 명시 적으로 활성화해야 합니다.


개발자는 기능을 미리 볼 수 있는 방법으로 공급 업체 접두사를 고려하지 않고 때로는 프로덕션 환경에서 제공하기 때문에 CSS 작업 그룹에 해가 되는 것으로 간주됩니다.


플래그를 사용하면 브라우저에서 해당 플래그를 사용하도록 모든 방문자를 푸시 할 수 있는 경우가 아니면 기능을 제공 할 수 없습니다


공급 업체 접두어가 무엇인지 살펴 보겠습니다.

.myClass {
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}


이제는 단지 아래와 같이 사용합니다.

.myClass {
transition: all 1s linear;
}

이 속성은 현재 모든 최신 브라우저에서 잘 지원됩니다.


위 예에서 사용된 접두사는 다음과 같습니다.

  • -webkit- (Chrome, Safari, iOS Safari / iOS WebView, Android)
  • -moz- (Safari)
  • -ms- (Edge, Internet Explorer)
  • -o- (Opera, Opera Mini)


Autoprefixer와 같은 프로젝트는 접두사가 더 이상 필요한지 알아낼 필요가 없거나 기능이 안정적이며 접두사를 삭제해야하는 등의 작업없이 전체 프로세스를 자동화 할 수 있습니다.

그것은 브라우저 지원과 관련된 모든 것들에 대한 아주 좋은 참조 사이트 인 caniuse.com의 데이터를 사용합니다.

React 또는 Vue를 사용하는 경우 create-react-app 및 Vue CLI와 같은 프로젝트 (응용 프로그램을 빌드 하는 두 가지 일반적인 방법)는 자동 프리 픽서를 기본적으로 사용하므로 걱정할 필요가 없습니다.










페이지 정보

조회 380회 ]  작성일19-04-27 18:15

웹학교