그 (것)들은 무엇이고 왜 그 (것)들을 사용해야하는가?
언젠가는 또는 CSS 브라우저 접두사라고도하는 CSS 공급 업체 접두사는 브라우저 제조업체가 새로운 CSS 기능 을 모든 브라우저에서 완벽하게 지원되기 전에 지원하도록 추가하는 방법입니다. 이는 브라우저 제조업체가 이러한 새로운 CSS 기능이 어떻게 구현 될지를 정확히 결정하는 테스트 및 실험 기간 중에 수행 될 수 있습니다. 이 접두어는 몇 년 전 CSS3 의 등장으로 유명 해졌습니다.
CCS3이 처음 소개되었을 때, 여러 가지 흥미로운 속성이 서로 다른 시간에 다른 브라우저를 강타하기 시작했습니다. 예를 들어 웹킷 기반 브라우저 (Safari 및 Chrome)는 변형 및 전환과 같은 애니메이션 스타일 속성을 소개 한 최초의 브라우저입니다. 벤더의 접두어 붙은 속성을 사용함으로써 웹 디자이너는 새로운 기능을 작업에 사용할 수 있었고 다른 모든 브라우저 제조업체가 따라 잡을 때까지 기다릴 필요없이 즉시 지원 한 브라우저에서 볼 수있었습니다!
따라서 프런트 엔드 웹 개발자의 관점에서 브라우저 접두사를 사용하여 새로운 CSS 기능을 사이트에 추가하는 동시에 브라우저에서 해당 스타일을 지원한다는 사실을 알게되었습니다. 이는 다른 브라우저 제조업체가 속성을 약간 다르게 또는 다른 구문으로 구현할 때 특히 유용 할 수 있습니다.
사용할 수있는 CSS 브라우저 접두어 (각 브라우저는 다른 브라우저에만 해당)는 다음과 같습니다.
- Android : -webkit-
- Chrome : -webkit-
- Firefox : -moz-
- Internet Explorer : -ms-
- iOS : -webkit-
- 오페라 : -o-
- 사파리 : - 웹킷 -
대부분의 경우 새로운 CSS 스타일 속성을 사용하려면 표준 CSS 속성을 사용하고 각 브라우저에 대한 접두사를 추가합니다. 접두어가 붙은 버전은 언제나 가장 먼저 올 것이고 보통 CSS 속성은 마지막에 올 것입니다. 예를 들어, 문서에 CSS3 전환을 추가하려면 다음과 같이 전환 속성을 사용합니다.
-webkit- transition : 모든 4s 용이함;
-moz- 전환 : 모든 4s 용이함;
-ms- transition : 모든 4s 용이함;
- 전이 : 모든 4s 용이함;
전환 : 모든 4s 용이함;
참고 : 일부 브라우저는 특정 속성에 대해 다른 속성과 구문이 다르므로 브라우저 접두어가 붙은 속성 버전이 표준 속성과 정확히 같다고 가정하지 마십시오. 예를 들어 CSS 그래디언트 를 만들려면 선형 그래디언트 속성을 사용합니다. Firefox, Opera 및 Chrome 및 Safari의 최신 버전은 적절한 접두어로 해당 속성을 사용하지만 초기 버전의 Chrome 및 Safari는 접두사가 붙은 속성 인 -webkit-gradient를 사용합니다. 또한 Firefox는 표준 값과 다른 값을 사용합니다.
CSS 속성의 일반 접두어가없는 버전으로 항상 선언을 끝내야하는 이유는 브라우저가 규칙을 지원할 때 해당 규칙을 사용하기 때문입니다. CSS를 읽는 방법을 기억하십시오. 이후 규칙은 특이성이 동일하면 이전 규칙보다 우선하므로 브라우저는 규칙의 공급 업체 버전을 읽고 정상적인 지원을하지 않으면이를 사용합니다. 그러나 한 번 지원하면 규칙은 공급 업체 버전을 대체합니다. 실제 CSS 규칙
공급 업체 접두사는 해킹되지 않습니다.
벤더 프리픽스 (prefix)가 처음 소개되었을 때, 많은 웹 전문가들은 해킹 이었는지 아니면 다른 브라우저를 지원하기 위해 웹 사이트의 코드를 포크로 찍어 버린 어두운 날로 되돌아 갔는지 궁금해했습니다 ( " 이 사이트는 IE에서 가장 잘 보입니다 "라는 메시지를 기억하십시오). 그러나 CSS 공급 업체 접두사는 해킹이 아니므로 작업에서 접두사를 사용하는 것에 대한 예약이 없어야합니다.
CSS 해킹은 또 다른 속성을 제대로 작동하게하기 위해 다른 요소 나 속성을 구현할 때의 결함을 악용합니다. 예를 들어, 박스 모델 해킹은 음성 패밀리 분석이나 브라우저가 역 슬래시 (\)를 구문 분석하는 방법에서 결함을 악용했습니다. 그러나 이러한 해킹은 Internet Explorer 5.5가 상자 모델을 처리하는 방법과 넷스케이프가 어떻게 해석했는지의 차이점을 해결하고 음성 패밀리 스타일과 아무 관련이 없습니다. 고맙게도이 두 개의 오래된 브라우저는 요즘과 관련없는 독자적인 브라우저입니다.
공급 업체 접두사는 해킹이 아닙니다. 사양에 따라 속성 구현 방법에 대한 규칙을 설정하는 동시에 브라우저 제작자가 다른 모든 것을 위반하지 않고 다른 방식으로 속성을 구현할 수 있도록 허용하기 때문입니다. 게다가,이 접두어는 결국 사양의 일부가 될 CSS 속성으로 작업하고 있습니다 . 속성에 일찍 액세스하기 위해 코드를 추가하기 만하면됩니다. 이것이 CSS 규칙을 접두사가없는 일반 속성으로 끝내는 또 다른 이유입니다. 그렇게하면 전체 브라우저 지원이 완료된 후에 접두사 버전을 삭제할 수 있습니다.
특정 기능에 대한 브라우저 지원이 무엇인지 알고 싶습니까? 웹 사이트 CanIUse.com은이 정보를 수집하고 현재 어떤 브라우저와 해당 브라우저의 어떤 버전이 현재 기능을 지원하는지 알 수있는 훌륭한 자료입니다.
납품업자 접두어는 성가시다 그러나 임시이다
예, 모든 브라우저에서 작동하도록 2-5 번 속성을 작성해야하는 것은 성가신 반복이 될 수 있지만 일시적인 상황입니다. 예를 들어, 불과 몇 년 전에 작성해야하는 상자에 둥근 모서리를 설정하려면 다음을 수행하십시오.
-moz-border-radius : 10px 5px;
-webkit-border-top-left-radius : 10px;
-webkit-border-top-right-radius : 5px;
-webkit-border-bottom-right-radius : 10px;
-webkit-border-bottom-left-radius : 5px;
border-radius : 10px 5px;
그러나 이제 브라우저가이 기능을 완벽하게 지원하게되었으므로 표준 버전 만 있으면됩니다.
border-radius : 10px 5px;
Chrome은 버전 5.0부터 CSS3 속성을 지원하고, Firefox는 버전 4.0에서이를 추가했으며, Safari는 5.0에서, Opera는 10.5에서, iOS는 4.0에서, Android는 2.1에서 추가했습니다. 심지어 Internet Explorer 9은 접두어 없이도 지원합니다 (IE 8 이상에서는 접두사를 포함하거나 포함하지 않음).
브라우저가 항상 바뀌고 있으며, 가장 오래된 방법보다 몇 년 뒤에 웹 페이지를 만들 계획이 아니라면 구형 브라우저를 지원하기위한 창의적인 접근 방식이 필요합니다. 결국, 브라우저 접두어 작성은 향후 버전에서 수정 될 가능성이 큰 오류를 찾아서 악용하는 것보다 훨씬 쉽습니다. 사용자가 악용하는 등의 다른 오류를 찾아야합니다.