Matthew Buchanan씨가 만약 브라우저가 예술가였다면 어떤 방식으로 화면을 그렸을지 보여주는 Timelapse CSS 를 작성했습니다:

웹 사이트의 템플릿을 작성할 때, 저는 항상 CSS 코드와 실제 브라우저에서 동작하는 화면 사이를 왔다갔다했습니다. 완전 열받은 상태에서 매번 수정할 때마다 제가 추가한 규칙이 잘 적용되었는지 확인하기 위해 이리저리 옮겨다녔습니다. 시간의 경과에 따라 새로 추가하는 것들을 기록한다면, 디자인 시안을 CSS 레이아웃으로 전환하기 위한 제 접근방식을 보여주는 꽤 괜찮은 그림이 될 것입니다.

이런 생각으로, 저는 진행과정을 자동으로 캡쳐하고 재생할 수 있으면 꽤 유용하겠다는 생각을 했습니다. 예전에 사람이 직접 캡쳐한 스크린 샷들을 이용해서 만든 비슷한 것을 본 적이 있습니다. 하지만, 그것은 특별히 멋지다거나 쉽게 재생산할 수 있는 방법은 아니었습니다.

아이디어를 구현하기 위해 저는 (역순으로) 현재 페이지의 스타일 시트를 탐색하고 0.1초마다 각각의 스타일 규칙에서 속성을 제거할 (그리 믿을만하진 않은) 함수를 작성했습니다.

[code:js]
function timelapseRemoveCss() {
    var interval=0;
    for(var i=document.styleSheets.length-1;i>=0;i--){
        rules=document.styleSheets[i].cssRules;
        for(var j=rules.length-1;j>=0;j--){
            var attributes=rules[j].style.length;
            for(var k=0;k<attributes ;k++){
                interval+=100;
                var timeout = "document.styleSheets["
                    +i+"].cssRules["+j+"].style"
                    +".removeProperty(document"
                    +".styleSheets["+i+"].cssRules["
                    +j+"].style["+0+"])";
                setTimeout(timeout,interval);
            }
        }
    }
}
from Timelapse CSS from Ajaxian
TAG ,
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요