CSS3에서 새로 소개된 rem(root em) unit은 em unit과 마찬가지로 상대성을 띤 Relative length units 중 하나지만, 기존 부모 요소를 기준으로 한 em unit과 달리 root element, 그러니까 html element를 기준으로 그 크기 값이 정해지면서 부모 요소의 중첩으로 생기는 뻥튀기의 부작용을 걱정할 필요가 없다는 것이 장점이다.

그래서, 어느 하나의 요소를 기준으로 또 다른 요소의 상대적 크기를 정해주고 싶을 때 많이 사용되는데, 문젠 언제나 그렇듯 IE < 9을 포함해서 아직 만족스럽지 못한 rem unit의 브라우저 지원 상황을 고려해서, 미지원 브라우저에서도 인식되도록 적절한 대응 값을 함께 정의해 줘야 하는 성가심이 있다.

이런 상황에서 SaasLESS 혹은 Stylus와 같은 CSS pre-processor의 힘을 빌린다면 효율적인 CSS 작성에 큰 도움이 된다는 것은 이미 잘 알려져 있다. 하나의 좋은 본보기로, CSS pre-processor를 써서 rem unit의 fallback을 구현한 예.

한편 아래는 실험 삼아 지금 한창 논의되고 있는 CSS VariablesCalc() function만을 써서 rem unit의 fallback을 구현해 보았는데, 여기에 꼭 안성맞춤으로 CSS polyfill임을 자처하면서 지금 한창 개발중인 또 하나의 CSS preprocessor인 Myth의 힘을 빌려서 바로 적용해 보았다.

:root {
  var-base-font-size: 10;
  var-body-font-size: 14;
  var-heading1-font-size: 18;
}
 
html {
  font-size: calc(var(base-font-size) / 16 * 100%);
}
 
body {
  font-size: calc(0px + var(body-font-size));
  font-size: calc(0rem + var(body-font-size) / var(base-font-size));
}
 
h1 {
  font-size: calc(0px + var(heading1-font-size));
  font-size: calc(0rem + var(heading1-font-size) / var(base-font-size));
}

이렇게 작성된 CSS는 Myth를 통해 다음과 같이 변환된다.

html {
  font-size: 62.5%;
}
 
body {
  font-size: 14px;
  font-size: 1.4rem;
}
 
h1 {
  font-size: 18px;
  font-size: 1.8rem;
}

물론 여기선 기존 CSS pre-processors가 제공하는 mixin 기능을 쓸 수가 없으므로 CSS를 작성할 때 공식을 계산하는 부분에서 추가 수정 작업이 필요하겠지만, 어차피 중복되는 공통 부분은 class로 빼서 적용해주면 될 것이고, 이렇게 한번 작성하고 나면 root element에서 설정된 변숫값 한 곳만 바꿔주면 해당 변수를 사용한 다른 연관된 property의 value도 자동 갱신되기 때문에 디자인 변경 작업이 훨씬 수월해진다.

이렇게 CSS variables와 calc() function은 기존 CSS 작성에 더 많은 효율을 안겨다 줄 터인데, 브라우저들의 지원 상황에 개의치 않고 표준 문법 그대로 지금 당장 여기서 논의된 여러 기능을 바로 적용해서 맛볼 수 있다는 것이 Myth가 가진 가장 큰 장점이자 매력이라 생각된다. 다만, CSS pre-processors이기 때문에 갖는 한계로서 CSS variables는 cascade를 지원하지 않으며 또 Math 기능은 브라우저의 runtime interpolation 과정, 그러니까 웹 페이지를 다 읽은 후 CSS를 재해석해서 처리하는 과정을 그대로 적용할 수 없음으로써 생기는 약간의 사용 제약이 있다.

덤으로, 아래는 Myth가 지원하는 색채 조작(Color Manipulation)과 접두어 자동 생성 기능(No Prefixes)을 사용한 예.

:root {
  var-warning-font-color: gold;
}
 
.warning {
  font-weight: bold;
  color: color(var(warning-font-color) tint(10%));
  background: linear-gradient(to bottombrowndarkorange);
  border-radius: 6px;
}
 
/* output */
.warning {
  font-weight: bold;
  color: rgb(255, 219, 25);
  background: -webkit-gradient(linear, left topleft bottom, from(brown), to(darkorange));
  background: -webkit-linear-gradient(topbrowndarkorange);
  background: linear-gradient(to bottombrowndarkorange);
  border-radius: 6px;
}

이렇듯, 앞으로 시간이 지나 브라우저 지원 상황만 개선된다면 CSS 작성이 한결 수월해지리라 기대해 본다.

관련된 주제의 글

댓글을 남겨 주세요