Working with CSS, it’s easy to add CSS properties that are valid but have no visual effect. Some examples: invalid font families. Color on elements with no text. align-items: center on a flex container that’s only as tall as its items.
Browser inspectors or CSS linters don’t handle this well – Chrome dev tools won’t tell you anything’s wrong with those examples. They’re still considered active since, as far as the browser is concerned, they’re still being applied to the DOM.
Fixing this is what’s really interesting about Ply, and why the concept is now being integrated into Firefox dev tools.
Static analysis of CSS, it turns out, can be difficult. Existing work highlighted by the paper, like browser dev tools or tools like WebCrystal, only manages to show which properties are currently rendered by the browser engine.
Ply detects relevant properties by applying visual relevance testing. It’s very much like visual regression testing, in that you check for visual changes after introducing a change (in this case, adding a CSS property). CSS properties that don’t cause a change are considered irrelevant.
This approach is also used to find dependencies. After the initial pruning round, each property A is disabled again (resulting in state 2), and the other n-1 properties B_i are disabled in turn (resulting in state 3). Any property B_i that does not cause a change between states 2 and 3 is dependent on A.
Eg, property A might be display: flex and B align-items: center. After A is removed, B will no longer do anything.
An approach like this that’s entirely limited to runtime checking is limited, though – it’s inefficient and doesn’t lend well to error messages that explain why a particular property doesn’t have any effect. Any real browser implementation would probably rely on a static dependency list, as the Firefox dev tools version seems to do. For a better automated approach, static analysis of the browser engine code (which determines the property interactions in the first place) ought to be able to generate a complete list of dependencies, not limited to what’s just on the current page. Still, Ply manages to do a lot with a simple approach, and served as inspiration for beginning such work in the first place.