CSS gradient의 적용

2011년 12월을 기준으로 CSS gradient에 관해 표준이 정해지지 않은 상황이다. 그렇기 때문에 크로스 브라우징을 위해 서로 다른 벤더 프리픽스를 이용해야 한다. 현재 5가지의 버전이 있다.

• Internet Explorer 10+: -ms-linear-gradient, -ms-radial-gradient
• Firefox 3.6+: -moz-linear-gradient, -moz-radial-gradient
• Opera 11.10+: -o-linear-gradient, -o-radial-gradient
• Safari 5+ and Chrome: -webkit-linear-gradient, -webkit-radial-gradient
• Safari 4+ and Chrome (Old WebKit): -webkit-gradient

단 두 가지 색의 간단한 그라데이션을 모든 브라우저에서 작동하게 하기 위해서 다음과 같은 코드가 필요하다.

background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* IE10+ */

따라서 이러한 다섯가지 중 놓치는 부분이 생길 수도 있다.

규칙 상세설명

규칙(Rule) ID: gradients

5가지 그라디언트 벤더 프리픽스가 모두 작성되지 않은 경우에 오류로 판단합니다.

/* -moz, -ms, -o 누락 */
.mybox {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
}

/* 구 버전 및 새로운 -webkit 누락 */
.mybox {
    background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); 
    background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
}

아래와 같이 5가지 모두 작성된 경우에는 오류로 판단하지 않습니다.

.mybox {
    background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-   stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); 
}

---

원문: https://github.com/stubbornella/csslint/wiki/Require-all-gradient-definitions