Firejune

CSS 2.1은 놀라운 능력을 아주 많이 갖추고 있다. Psyked는 이 것을 응용하여 좌측의 그림에 보이는 것처럼 a[href^=”http:”]와 같은 셀렉터(selector)로 'a'태그의 'hfef' 링크 속성을 분석하여 특정한 아이콘을 자동으로 추가하는 방법을 소개했다. 이 것은 매우 유용하다. 'http:' 문자열에 '$' 오퍼레이터(operator)를 추가로 사용하면 파일의 확장자 까지도 분석할 수 있게 되는 것이다. 아래의 CSS 예제를 보자. 서버단 코드나 HTML, 자바스크립트의 도움없이 처리 할 수 있다는 관점에서 효율성이 뛰어나지만, IE6은 CSS2.1을 지원하지 않기 때문에 치명적이다.

/* external link */
a[href^="http:"] {
    display : inline-block;
    padding-right : 14px;
    background : transparent url(/Images/link_icon.gif) center right no-repeat;
}

/* external link */
a[href^="mailto:"] {
    display : inline-block;
    padding-left : 20px;
    line-height : 18px;
    background : transparent url(/Images/mail_icon.gif) center left no-repeat;
}

/* pdf file link */
a[href$='.pdf'] {
    display : inline-block;
    padding-left : 20px;
    line-height : 18px;
    background : transparent url(Images/pdf_Icon.gif) center left no-repeat;
}

/* document file link */
a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'] {
    display : inline-block;
    padding-left : 20px;
    line-height : 18px;
    background : transparent url(/Images/doc_icon.gif) center left no-repeat;
}

/* compressed file link */
a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {
    display : inline-block;
    padding-left : 20px;
    line-height : 18px;
    background : transparent url(/Images/zip_Icon.gif) center left no-repeat;
}