SeeSS：為 CSS 開發者設計之即時變更衝擊視覺呈現

Abstract

層疊樣式表（CSS）是表述網頁外觀呈現的基礎網頁語言。開發者將一份 CSS 樣式規則套用在數個頁面，減少原始碼的重複，並且讓網頁有一致的外觀與感覺。然而，當 CSS 規則被修改時，開發者也得要手動地、事必躬親地去檢測每一個被變更到的網頁區塊。我們推出 SeeSS，一個可以在網站裡自動追蹤 CSS 變更、並替開發者將所有變更視覺化的系統。變更前後的不同，會以動畫來加以強調。SeeSS 的開發歷經兩個迭代，初期成果也已經以開源的方式，釋出給網頁開發者們。

Cascading Style Sheet (CSS) is a fundamental web language for describing the presentation of web pages. CSS rules are often reused across multiple parts of a page and across multiple pages throughout a site to reduce repetition and to provide a consistent look and feel. When a CSS rule is modified, developers currently have to manually track and visually inspect all possible parts of the site that may be impacted by that change. We present SeeSS, a system that automatically tracks CSS change impact across a site and enables developers to easily visualize all of them. The differences before and after the change are highlighted using animations. We refine its implementation during a 2-iteration design process, and release SeeSS as an open source tool for all web developers.