Automated and Semantics-Preserving CSS Refactoring
Résumé
The Cascading Style Sheets (CSS) language constitutes a key component of web applications. It offers a series of sophisticated features to stylize web pages. Its apparent simplicity and power are however counter-balanced by the difficulty of debugging and maintaining style sheets, tasks for which developers still lack appropriate tools. In particular, significant portions of CSS code become either useless or redundant, and tend to accumulate over time. The situation becomes even worse if we consider that more and more complex features are added to the CSS language (e.g. CSS3 powerful selectors). A direct consequence is a waste of resources such as bandwidth and CPU that are required to display web pages. Since each web page access may involve CSS code transfer and interpretation, the cost of ill-designed CSS code represents a significant amount of useless traffic and processing at web scale.
Style sheets are designed to operate on a class of documents (possibly generated). However, existing techniques consist in syntax validators, optimizers and runtime debuggers that operate for one particular document instance. As such, they do not provide guarantees concerning all web pages in CSS refactoring, such as preservation of the formatting. This is partly because they are essentially syntactic and do not take advantage of CSS semantics to detect redundancies.
We propose a set of automated refactoring techniques aimed at removing redundant and inaccessible declarations and rules, without affecting the layout of any document to which the style sheet is applied. We implemented a prototype of our analyses that has been extensively tested with popular web sites (such as Google Sites, CNN, Apple, etc.). We show that significant size reduction can be obtained while preserving the code readability and improving maintainability.
Domaines
WebOrigine | Fichiers produits par l'(les) auteur(s) |
---|