19 벤더 프리픽스(vender prefix)

프로그래밍/CSS

19 벤더 프리픽스(vender prefix)

윤지(●'◡'●) 2021. 5. 10. 14:31

벤더 프리픽스(vender prefix)

세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있다.

벤더 프리픽스란, 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의웹 브라우저에

그 사실을 알리기 위해 사용하는 접두사(prefix)를 의미한다.
아직 css 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을

사용할 때 사용한다.

주요 웹 브라우저의 벤더 프리픽스(vendor prefix)

예시

#gradient{
            /*속성을 지원하지 않는 브라우저를 위한 코드*/
            background: red;

            /*webkit : 크롬과 엣지, 사파리를 위한 코드*/
            background: -webkit-linear-gradient(right, yellow, blue)

            /*moz : 파이어폭스를 위한 코드*/
            background: -moz-linear-gradient(right, yellow, blue)

            /*o : 오페라를 위한 코드*/
            background: -o-linear-gradient(right, yellow, blue)

            /*ms : 익스플로러를 위한 코드*/
            background: -ms-linear-gradient(right, yellow, blue)

            /*css 표준 문법을 위한 코드*/
            background: linear-gradient(right, yellow, blue)
        }

이때 중요한 점은, 벤더 프리픽스를 사용하는 방법은 해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장

먼저 작성해야하며 표준 문법 코드는 가장 마지막에 작성해야 한다는 것이다.