CSS => 브라우저 지원 및 접두어

매개 변수

접두사	브라우저
`-webkit-`	Chrome, Safari, 최신 버전의 Opera 12 이상, Android, Blackberry 및 UC 브라우저
`-moz-`	모질라 파이어 폭스
`-ms-`	Internet Explorer, Edge
`-o-` , `-xv-`	오페라 버전 12까지
`-khtml-`	Konquerer

비고

공급 업체 접두사는 기능이 아직 사양에서 권장되지 않는 새 CSS 기능에 대한 미리보기 지원을 허용하는 데 사용됩니다.

프로덕션 환경에서는 공급 업체 접두사를 사용하지 않는 것이 좋습니다. 이 접두사는 아직 완성되지 않은 새 기능을 테스트하기 위해 존재하며 동작은 본질적으로 예기치 않게 발생합니다. 단순히 접두어를 사용한다고해서 이전 브라우저에 대한 브라우저 지원이 부여되지는 않습니다 . 기능이 시간 경과에 따라 다르게 작동하지 않는다고 보장 할 수는 없으며 지원을 요청하는 오래된 브라우저에서는 기능이 여전히 손상 될 수 있습니다.
오래된 브라우저를 지원하는 것이 중요하다면 JavaScript 또는 다른 솔루션을 사용하여 효과를 모방하고 오래된 브라우저에 대한 지원을 보장해야합니다.

브라우저는 접두어를 사용하고 이해하지 못하는 속성은 무시합니다.

참고 : 접두사는 공식, 접두사가없는 구문 앞에 항상 나와야합니다. 그렇지 않으면 접두사가 붙은 속성으로 덮어 쓰게되고 결국에는 다른 구현이 될 수 있습니다.

브라우저가 접두어가 붙지 않고 접두어가 붙은 속성 버전을 모두 지원하는 경우 가장 최근에 선언 된 속성이 우선 적용됩니다.

전환

div {
    -webkit-transition: all 4s ease;
       -moz-transition: all 4s ease;
         -o-transition: all 4s ease;
            transition: all 4s ease;
}

변환

div {
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

CSS
브라우저 지원 및 접두어

수색…

매개 변수

비고

전환

변환