Typed CSSOM
차세대에서 사용하는 CSSOM
houdini에서 css 엔진과 간련 기능을 빠르게 표준화하는 것이 목표로 현재 여러 API들을 진행
코드
<html>
<style id='s'>
.test1{background:#ff0;}
.test2{background:#0f0;}
</style>
<body>
<div class='test1'>a</div>
<div class='test2'>b</div>
</body>
<script>
document.querySelector('.test1').style.height = 100 + 'px'; //기존
document.querySelector('.test2').attributeStyleMap.set('height',CSS.px(100)); //typed CSSOM
</script>
</html>
둘다 height가 100px로 적용이 된다.
- 현재 구글 브라우저에서는
attributeStyleMap을 사용중이다.
기존대신 typed CSSOM을 사용하는 이유
- js 애니메이션 프레임워크에서 텍스트로 조립하는 과정에서 속도가 느려진다.
CSS
- 수많은 형이 존재한다.
나의 하루를 가능한 기억하고 즐기고 후회하지말자