FrontendCSS

CSS3 Conditional Statements

,

CSS3 Conditional Statements

미디어 쿼리에 대한 스펙 ‘CSS 3 Conditional Statements’에서는 미디어쿼리 @media 외에도 @supports와 @document 지시자를 사용한 새로운 기능에 대해서도 정의를 하고 있다.

@supports

특정 css 속성을 브라우저가 지원하는지 또는 하지 않는지 판단하여 특정 스타일이 적용 되도록 할수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
/* box-shadow 속성을 지원하는 경우 적용 */
@supports (box-shadow: 0 0 10px rgba(0,0,0,.1)) { CSS code... }

/* animation-duration 속성이 지원되지 않는 경우 적용 */
@supports not (animation-duration: 1s) { CSS code... }

/* and, or 연산자를 사용한 조건식을 사용할 수도 있다. */
@supports ((border-radius:4px) and (transition-duration: 1s)) or (transform-origin: 5% 5%) { CSS Code...}

/* @supports를 활용하면 특정 속성이 지원되는 브라우저의 경우, 별도의 css 파일을 로딩하도록 처리할 수 있다. */
@supports (box-shadow: 0 0 10px rgba(0,0,0,0.1)) {
    @i-port url('box-shadow.css');
}

@document

조건식에 부합되는 주소를 갖는 페이지에만 스타일이 적용되도록 할수 있다.

1
2
3
4
5
6
7
8
9
10
11
/* www.naver.com 인덱스 페이지에만 적용 */
@document url("http://www.naver.com/") { CSS Code... }

/* www.naver.com/css로 시작되는 모든 페이지에 적용 */
@document url-prefix("http://www.naver.com/css") { CSS Code... }

/* naver.com 도메인에 속하는 모든 페이지에 적용 */
@document domain("naver.com") { CSS Code... }

/* 정규식을 사용해 https:로 시작되는 모든 주소 페이지에 적용 */
@document regexp("https:.*") { CSS Code... }

참조

공유하기