브라우저 공급업체는 실험적이거나 비표준적인 CSS 속성 및 JavaScript API에 접두사를 추가하여 사용할 수 있습니다. 이를 벤더프리픽스( 접두어 )라고 하며 브라우저 공급업체에서 접두어가 필요없는 속성을 제공하기전까지는 접두어를 사용하여 속성을 정의할 수 있습니다.
최근에는 대부분의 브라우저 공급업체가 많이 향상되어서 기존에 접두어로 사용하였다 속성을 접두어 없이 사용할 수 있도록 제공하고 있기때문에 벤더 프리픽스는 기존 노후된 브라우저에 대응하기 위해 사용하는 경우가 많습니다.
아래 브라우저 별 제공하는 접두어 입니다.
● IE
○ Engine: Trident
○ CSS- prefix: -ms
● edge
○ Engine: EdgeHTML → Blink 3
○ CSS- prefix: -ms
● Firefox
○ Engine: Gecko
○ CSS- prefix: -moz
● opera
○ Engine: Presto → Flashing 1
○ CSS- prefix: -o(the Presto) and -webkit(Blink)
● safari
○ Engine: WebKit-
○ CSS- prefix: -webkit
● chrome
○ Engine: WebKit- → Blinking 2
○ CSS- prefix: -webkit
위 내용 과 같이 접두어를 직접 사용하여 style을 정의하여 사용 할 수도 있지만 접두어 사용이 빈번하다면 아래 사이트에서 제공하는
javascript 플러그인을 사용하면 스크립트가 브라우저를 체크하여 html tag에 클래스를 추가하고 프리픽스를 자동적용합니다.
http://projects.verou.me/prefixfree/
Prefix free: Break free from CSS vendor prefix hell!
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. Test drive Test the prefixing that -prefix-free would do for this browser, by w
projects.verou.me
'웹코딩 > css3' 카테고리의 다른 글
| css flex-box 사용방법 (0) | 2022.02.08 |
|---|---|
| CSS : pointer-events (0) | 2022.02.03 |
| 다중클래스 사용 및 선택자 선택방법 (1) | 2022.01.25 |
| mediaquery 규칙 (0) | 2022.01.25 |
| CSS minify (최소화) (0) | 2022.01.20 |