본문 바로가기

HTML/CSS

자동(Auto) 벤더 프리픽스(Vendor Prefix)

  1. https://autoprefixer.github.io/
    1. 해당 사이트의 경우 버전별로 지원한다.
    2. 좌측 하단에 필터가 있고 last * version 을 원하는대로 조정가능하다.
    3. 여타 사이트보다 제일 편리한 것 같다. 또한 신뢰가 간다. 가장 추천


  2. https://codepen.io/
    1. 새로운 PEN을 생성
    2. 우측 상단에 세팅이 있다. 세팅 > CSS > Vendor Prefixing > AUTOPREFIXER 로 설정한 후

    3. CSS에 코드를 붙여넣기 CSS우측 화살표 클릭 > View Compiled CSS 클릭

    4. CSS옆에 Compiled가 빨간색으로 적히고 아래 표시해둔 "{" 를 보면 정상적으로 프리픽스가 완료된다.
      다만, 원하는 버전을 체그할 수가 없다. 장점은 CODEPEN에서 작업한 코드의 경우 View Compiled CSS 클릭 한번으로 프리픽스 주석을 달아줄 수 있다는게 장점이다.

  3. 제이쿼리를 활용한 완전 자동 -prefix-free 제이쿼리 소스를 활용하는 방법
    해당방법은 제이쿼리를 믿고 의지해야하는데 신뢰가 안생겨서 글쓴이는 현재 사용하고있지 않다.
    해당 자료는 요기서 4번을 클릭.