Detecting redundant CSS rules in HTML5 applications: a tree rewriting approach

Abstract

HTML5 applications normally have a large set of CSS (Cascading Style Sheets) rules for data display. Each CSS rule consists of a node selector and a declaration block (which assigns values to selected nodes' display attributes). As web applications evolve, maintaining CSS files can easily become problematic. Some CSS rules will be replaced by new ones, but these obsolete (hence redundant) CSS rules often remain in the applications. Not only does this "bloat" the applications -increasing the bandwidth requirement -but it also significantly increases web browsers' processing time. Most works on detecting redundant CSS rules in HTML5 applications do not consider the dynamic behaviors of HTML5 (specified in JavaScript); in fact, the only proposed method that takes these into account is dynamic analysis, which cannot soundly prove redundancy of CSS rules. In this paper, we introduce an abstraction of HTML5 applications based on monotonic tree-rewriting and study its "redundancy problem". We establish the precise complexity of the problem and various subproblems of practical importance (ranging from P to EXP). In particular, our algorithm relies on an efficient reduction to an analysis of symbolic pushdown systems (for which highly optimised solvers are available), which yields a fast method for checking redundancy in practice. We implemented our algorithm and demonstrated its efficacy in detecting redundant CSS rules in HTML5 applications.

Regular Model Checking Revisited (Technical Report)

“…On the practical side, many benchmarks (especially from paramterized systems) have indicated this to be the case, e.g., see [36,17,34,30,37,3,44,38,24,33]. On the theoretical side, this framework is in fact complete for important properties like safety and liveness for many classes of infinite-state systems that can be captured by regular model checking, including pushdown systems, reversal-bounded counter systems, two-dimensional vector addition systems, communication-free Petri nets, and tree-rewrite systems (for the extension to trees), among others, e.g., see [41,42,7,32,23,35]. In addition, the restriction to regular proofs is also attractive since it gives rise to a simple method to enumerate all regular proofs that check ϕ.…”

Modular verification of web page layout

“…This paper focuses on proving properties of static HTML and CSS. Future research could extend it to handle JavaScript by integrating existing work in symbolic execution of JavaScript [Fragoso Santos et al 2019] and modeling of DOM manipulations [Hague et al 2014].…”

CSS Minification via Constraint Solving

“…Therefore, a CSS minification should not affect the rendering of any such tree by the browser. Although a document-dependent optimisation (that take these infinitely many trees into account) seems appropriate, this is far from realistic given the long-standing difficulty of performing sound static analysis for JavaScript especially in the presence of DOM-trees [58,65,2,36,35,30]. This would make an interesting long-term research direction with many more advances on static analysis for JavaScript.…”

“…The drawback of this technique is that it cannot test all possible behaviours of an HTML5 application and may may accidentally delete selectors that can in reality be used by the application. It was noted in [30] that such tools may accidentally delete selectors, wherein the HTML5 application has event listeners that require user interactions. The same paper [30] develops a static analysis technique for overapproximating the set of generated DOM-trees by using tree rewriting for abstracting the dynamics of an HTML5 application.…”