CSS3에서 새로 소개된 rem(root em) unit은 em unit과 마찬가지로 상대성을 띤 Relative length units 중 하나지만, 기존 부모 요소를 기준으로 한 em unit과 달리 root element, 그러니까 html element를 기준으로 그 크기 값이 정해지면서 부모 요소의 중첩으로 생기는 뻥튀기의 부작용을 걱정할 필요가 없다는 것이 장점이다.
그래서, 어느 하나의 요소를 기준으로 또 다른 요소의 상대적 크기를 정해주고 싶을 때 많이 사용되는데, 문젠 언제나 그렇듯 IE < 9을 포함해서 아직 만족스럽지 못한 rem unit의 브라우저 지원 상황을 고려해서, 미지원 브라우저에서도 인식되도록 적절한 대응 값을 함께 정의해 줘야 하는 성가심이 있다.
이런 상황에서 Saas나 LESS 혹은 Stylus와 같은 CSS pre-processor의 힘을 빌린다면 효율적인 CSS 작성에 큰 도움이 된다는 것은 이미 잘 알려져 있다. 하나의 좋은 본보기로, CSS pre-processor를 써서 rem unit의 fallback을 구현한 예.
한편 아래는 실험 삼아 지금 한창 논의되고 있는 CSS Variables와 Calc() function만을 써서 rem unit의 fallback을 구현해 보았는데, 여기에 꼭 안성맞춤으로 CSS polyfill임을 자처하면서 지금 한창 개발중인 또 하나의 CSS preprocessor인 Myth의 힘을 빌려서 바로 적용해 보았다.
이렇게 작성된 CSS는 Myth를 통해 다음과 같이 변환된다.
물론 여기선 기존 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)을 사용한 예.
/* output */
이렇듯, 앞으로 시간이 지나 브라우저 지원 상황만 개선된다면 CSS 작성이 한결 수월해지리라 기대해 본다.