CSS Variables & Conditional Rules

css에서도 변수나 조건문을 쓸 수 있다. 아직 draft상태이긴 하나..

표준으로 채택되고 브라우저 지원률이 확대된다면 페이지 테마등을 한방에 바꾸는게 편해질것 같다.

조건문을 써서 css3를 지원하지 않는 브라우저에 대한 분기를 태워준다던지 (어차피 안먹는건 무시하긴 하겠지만..)

페이지별 스타일도 따로 관리가 가능하시겠다.

간단히 어떤 내용인지 알아보도록 하자. (각 제목을 클릭하면 w3c 관련 페이지로 이동합니다.)

 

 

 

CSS Variables

 

배경

 

• CSS의 특징 상 다양한 정보들이 흩어져서 선언됨
  ex) 페이지의 일관된 색구성이 여러 위치에서 작성됨
• 기획이나 색상정보가 변경될때, 찾아 바꾸기로는 한계가 있음
• LESS나 SASS 처럼 추가적인 작업 없이 구현할 순 없을까?

 

변수 (Variables)

 

• 직접 네이밍 함으로써 시멘틱한 정보를 포함시킬 수 있다.
• Editor's Draft
• 크롬에서 확인 가능하나 별도의 설정 필요함 (페이지 하단에 언급했어요~)

 

/* SASS */

$main-color:red;
.foo {
    background-color:$main-color;
}


/* LESS */

@main-color:red;
.foo {
    background-color:@main-color;
}

 

SASS, LESS 두가지 방식 모두 변환작업이 필요하다는 단점이 있음..

 

Example

 

html{
    var-main-color:red;
}


.foo {
    background-color:var(main-color);
}

• 글로벌한 네이밍을 사용하라 (var-emph / var-txt )
• var-프리픽스는 소문자로 선언되어야 하며, 변수명은 대소문자를 구분한다. (var-foo / var-FOO 는 다르게 해석)

 

장점

 

• CSS와 동일하게 상속 가능
• 요소별 스타일링이 쉽다

 

단점

 

• CSS가 복잡해 질 수 있음
• 현재 사용시 제약이 있음 - 크로스브라우징X

 

높은 활용도

 

• 페이지 스타일링
• 요소별 스타일링
• 상수의 표현
• 축약형의 사용

 

페이지 스타일링

 

:root {
    var-main-color:#333;
    var-emph-color:#ff0;
}


.foo {
    color:var(main-color);
    border-bottom-color:var(emph-color);
}


:root {
    var-column-width:180px;
    var-cont-width:20px;
}


.section {
    width:calc(3 * var(column-width) + 2 * var(cont-width));
}

 

요소별 스타일링

 

:root {
    var-main-color:blue;
}


.cont {
    var-main-color:gray;
}


p {color:var(main-color);} /* blue */

.cont h1 {color:var(main-color);} /* gray */
	

 

상수의 표현

 

BAD

 

.foo {width:33.33%;}

 

Okay

 

.foo {width:calc(10/3*10%);}

 

Good!

 

:root {var-gnb-width:calc(10/3*10%);}
.foo {width:var(gnb-width);}

 

 

축약형 사용 

 

BAD

 

.shadowed {
  box-shadow:  2px  2px gray 1px,
               2px -2px gray 1px, 
              -2px  2px gray 1px, 
              -2px -2px gray 1px;
  transition: box-shadow .2s;
}

.shadowed:hover {
  box-shadow:  2px  2px gray 5px,
               2px -2px gray 5px, 
              -2px  2px gray 5px, 
              -2px -2px gray 5px;
}

  

 

Good!

 

.shadowed {
  var-shadow-blur: 1px;
  box-shadow:  2px  2px gray var(shadow-blur),
               2px -2px gray var(shadow-blur), 
              -2px  2px gray var(shadow-blur), 
              -2px -2px gray var(shadow-blur);
  transition: box-shadow .2s;
}

.shadowed:hover { var-shadow-blur: 5px; }

 

 

Conditional Rules

 

 

배경

 

• 미디어 쿼리등 "조건식" 의 역할을 확대시킨 형태
• @supports 형태로 사용
• 이전에는 @document를 추가했으나, 현재 공개된 스펙에서는 삭제됨

 

Examples

Okay

@supports ( display: flex ) {
   body, .navigation, .content { display: flex; }
  .navigation { background: blue; color: white; }
  .article { background: white; color: black; }
}

@supports not ( display: flex ) {
   body { width: 100%; height: 100%; background: white; color: black; }
  .navigation { width: 25%; }
  .article { width: 75%; }
}

 

Better Fallback

Good!

body { width: 100%; height: 100%; background: white; color: black; }
.navigation { width: 25%; }
.article { width: 75%; }

@supports ( display: flex ) {
   body, .navigation, .article {
    display: flex;
    width: auto;
  }
  .navigation { background: blue; color: white; }
  .article { background: white; color: black; }
}

 

비교 연산자

 

• not / and / or
• ( )

 

BAD

@supports ( display: flex ) {
@supports (transition-property: color) or
          (animation-name: foo) and
          (transform: rotate(10deg)) {
  // ...
}

 

Good!

@supports ((transition-property: color) or
           (animation-name: foo)) and
          (transform: rotate(10deg)) {
  // ...
}

 

Javascript로 지원여부 판단하기!

 

CSS.supports("display", "flex");
CSS.supports("(display: flex)");

 

 

테스트 방법 : 

Chrome 최신 버전을 이용한다. chrome://flags 접속 "실험용 웹 플랫폼" 검색 > 사용 Chrome 하단 재실행 클릭