MozillaHacks-웹기술블로그

Firefox Nightly에서 CSS 변수 사용하기

작성자: Hoony Chang

작성일: 2014/01/15 분류: CSS, Firefox, Firefox Nightly, and Standards

이 글은 Chris Heilmann의 CSS Variables in Firefox Nightly의 한국어 번역본입니다.

 

Cameron McCormack는 Firefox Nightly (버전 29)에서 CSS 변수를 지원한다고 알렸습니다. 여기 짧은 영상에서 바로 확인해 보실 수 있습니다:

여러분은 접두사 var-를 가지고 변수를 지정할 수 있으며 var() 명령으로 그 변수를 실행할 수 있습니다. 예를 들어:

:root {
  var-companyblue: #369; 
  var-lighterblue: powderblue;
}

h1 {
  color: var(companyblue);
}
h2 {
  color: var(lighterblue);
}
 
<h1>Header on page</h1>
<h2>Subheader on page</h2>

이 예제는 최종 문서의 최상위 엘리먼트에 대하여 companyblue와  lighterblue 라는 두개의 변수를 지정하고 있습니다 (Firefox Nightly를 사용하여 여기서 확인해보실 수 있습니다):

변수들은 범위가 정해지는데 중복 사용이 가능하다는 뜻입니다.:

:root {
  var-companyblue: #369;
  var-lighterblue: powderblue;
}
.partnerbadge {
  var-companyblue: #036;
  var-lighterblue: #cfc;
}

h1 {
  color: var(companyblue);
}
h2 {
  color: var(lighterblue);
}
 
<h1>Header on page</h1>
<h2>Subheader on page</h2>

<div class="partnerbadge">
  <h1>Header on page</h1>
  <h2>Subheader on page</h2>
</div>

위의 코드를 사용하면 partnerbadge 클래스를 가진 엘리먼트 내부에 있는 heading 엘리먼트들은 이제 다른 파란색을 갖게 될 것입니다:

변수들은 여러분이 지정하고 싶은 어떤 값이든 가질 수 있으며 예제의 calc() 계산처럼 다른 값들과 마찬가지 방법으로 사용하실 수 있습니다. 예제의 미디어 쿼리 내부처럼 다른 값으로 언제든지 재설정 또한 가능합니다. 이 예제에서 이러한 다양하고 많은 가능성들을 볼 수 있습니다.

:root {
  var-companyblue: #369;
  var-lighterblue: powderblue;
  var-largemargin: 20px;  
  var-smallmargin: calc(var(largemargin) / 2);
  var-borderstyle: 5px solid #000;
  var-headersize: 24px;
}
.partnerbadge {
  var-companyblue: #036;
  var-lighterblue: #369;
  var-headersize: calc(var(headersize)/2);
  transition: 0.5s;
}

@media (max-width: 400px) {
  .partnerbadge {
     var-borderstyle: none;  
     background: #eee;
  }
}

/* Applying the variables */
body {font-family: 'open sans', sans-serif;}

h1 {
  color: var(companyblue);
  margin: var(largemargin) 0;
  font-size: var(headersize);
}
h2 {
  color: var(lighterblue);
  margin: var(smallmargin) 0;
  font-size: calc(var(headersize) - 5px);
}

.partnerbadge {
  padding: var(smallmargin) 10px;
  border: var(borderstyle);
}

실제로 미디어쿼리에 따른 변화를 보려면 브라우저 창을 400 픽셀 이하로 줄여보세요.

CSS 변수들의 최초 적용은 Firefox Nightly에서 구현되었으며 현재 버전 29에서 사용 가능하며 이후 2월 3일에 Firefox Aurora에 합쳐질 예정입니다. Firefox Beta와 Firefox에 출시하기까지는 여전히 보완해야할 몇 가지 것들 존재합니다. Cameron이 자세한 사항을 다음에 적어놓았습니다:

아직 구현하지 못한 유일한 부분은 CSSVariableMap입니다. 이 부분은 get, set과 다른 메소드들로 이루어진 CSSStyleDeclaration에서의 변수값들을 가져오기 위한 ECMAScript Map처럼 동작하는 객체를 제공합니다. 하지만 "var-theme-colour-1"처럼 완벽한 프로퍼티 이름을 사용한다면 getPropertyValue과 setPropertyever 메소드를 사용하여 DOM에서 값을 가져올 수 있습니다.

이 작업은 bug 773296에서 완료되었으며 그것들을 리뷰해준 David Baron과 구현에서의 초기 작업을 맡아주신 Emmanuele Bassi에게 감사의 말씀을 전합니다. 혹시라도 여러분이 이 기능을 사용하면서 문제가 발견된다면 해당 버그를 남겨주세요!

이제 Nightly에서 CSS 변수를 가지고 즐겁게 활용하고 여러분이 발견한 버그들을 저희에게 알려주세요.

작성자: Hoony Chang

Web Programmer

Hoony Chang가 작성한 문서들…

댓글이 없습니다.

댓글 쓰기