Color 속성의 적용

색상을 입력하는 방식으로 헥사코드를 이용하는 방법, red처럼 이름이 있는 색상을 이용하는 방법과 rgb()를 이용하는 세가지 방법을 이용해 왔습니다. CSS3에서는 rgba(), hsl(), hsla()와 같은 새로운 방식을 지원하고 있습니다. 이런 것들은 개발자들이 색상을 지정하는데 유연성을 제고해주었습니다. 그렇지만 구 버전의 브라우저에서는 제대로 지원되지 않아 보기에 좋지 않기도 합니다.

CSS 파서가 이해하지 못하는 이름이나 값을 이해할 수 없는 속성은 무시해버리는 것이 문제입니다. IE8이나 그 이전의 브라우저는 rgba(), hsl(), hsla()를 지원하지 않기 때문에, 이러한 값은 버려지게 되는 것입니다.

.box {
    background: #000;
    color: rgba(100, 100, 200, 0.5);
}

rgba()를 지원하는 브라우저는 위 CSS 코드를 잘 처리할 것입니다. 그렇지만 미지원 브라우저에서는 이 값을 이해할 수 없기 때문에 색상을 표현할 수 없게 됩니다. 즉, 미지원 브라우저에서는 상속된 color 속성을 표현하거나 바탕색과 같은 검정색으로 표현하게 됩니다. 이를 막기 위해서는 다음의 경우처럼 예전에 사용하던 방식으로 색상을 입력해야 합니다.

.box {
    background: #000;
    color: blue;
    color: rgba(100, 100, 200, 0.5);
}

미지원 브라우저가 볼 수 있게 이전 방식으로 작성된 색상을 먼저 입력해야 합니다. 그리고 이렇게 하면 지원하는 브라우저들은 새로운 색상 포맷을 이용해서 색상을 표현하게 됩니다.

규칙 상세설명

규칙(Rule) ID: fallback-colors

이 규칙은 모든 브라우저에 적절한 색상이 표현되게 하는 것을 목표로 합니다. 다음의 경우를 오류로 판단합니다.

1. rgba(), hsl(), hsla()가 입력된 color속성 앞에 예전 방식으로 작성된 color 속성이 없는 경우
2. rgba(), hsl(), hsla()가 입력된 background 속성 앞에 예전 방식으로 작성된 color 속성이 없는 경우
3. rgba(), hsl(), hsla()가 입력된 background-color 속성 앞에 예전 방식으로 작성된 color 속성이 없는 경우

아래와 같은 경우입니다.

/* 헥사코드 표기 없음 */
.mybox {
    color: rgba(100, 200, 100, 0.5);
}

/* 헥사코드 표기 없음 */
.mybox {
    background-color: hsla(100, 50%, 100%, 0.5);
}

/* 헥사코드 표기 없음 */
.mybox {
    background: hsla(100, 50%, 100%, 0.5) url(foo.png);
}

/* 헥사코드 표기가 뒤에 위치함 */
.mybox {
    background-color: hsl(100, 50%, 100%);
    background-color: green;
}

다음의 경우는 정상으로 인식합니다.

/* 헥사코드 표기가 앞에 위치함 */
.mybox {
    color: red;
    color: rgba(255, 0, 0, 0.5);
}

---

원문: https://github.com/stubbornella/csslint/wiki/Require-fallback-colors