A Heuristic Approach to Localize CSS Properties for Responsive Layout Failures

2026-05-25

AI Summary

This study addresses the challenge of diagnosing responsive layout failures (RLFs), which often stem from specific CSS properties behaving inconsistently across screen sizes and are difficult to pinpoint using existing techniques. To tackle this, the authors propose LocaliCSS, an automated approach that integrates heuristic rules, spatial relationship analysis of DOM elements, and a CSS property prioritization model trained on data from Quora and Stack Overflow. LocaliCSS enables precise identification of the critical CSS properties responsible for RLFs without requiring global stylesheet modifications. Experimental results demonstrate significant improvements in localization accuracy, with Top-1 to Top-7 accuracy rising from 45.2% to 92.86%, a mean reciprocal rank (MRR) of 76%, and a precision@3 (P@3) of 77.13%. Notably, its Top-7 predictions align with manual diagnoses by frontend engineers at a rate of 90.48%.

Abstract

Responsive Layout Failures (RLFs) typically arise from CSS properties that hinder proper layout behavior in different screen sizes. To find an accurate and effective solution for repairing RLFs, localization of those problematic properties is necessary. However, existing approaches only detect RLFs and apply broad CSS patches for them. The patches alter the entire layout without localizing the root cause of failure. To address this gap, we propose a heuristic approach to identify the specific CSS properties that developers would typically localize manually. The approach first detects the RLFs existing in a webpage and their affected elements. Next, it localizes the nearby HTML elements using RLF direction and relative alignment of the elements present in the RLF region. The involved CSS properties of those elements are then identified using a ranked search set of CSS properties, created by analyzing Quora and Stack Overflow queries. Finally, elements and their corresponding property pairs are ranked based on their impact on RLFs. We have implemented this approach into a tool called {\normalfont \textsc{LocaliCSS}} and evaluated it on a set of webpages using Top N Rank, MRR and P@K metrics. The tool achieved localization accuracy ranging from 45.2% (Top-1) to 92.86% (Top-7), with an MRR of 76% and a P@3 of 77.13%. Additionally, experienced front-end engineers manually localized the RLFs as part of our evaluation. Their preferred CSS properties matched the suggestions from our approach in 42.86% of cases for Top-1 rankings and up to 90.48% for Top-7 rankings.

Problem

• Responsive Layout Failures
• CSS properties
• localization
• web layout
• fault localization

Innovation

• Responsive Layout Failures
• CSS Property Localization
• Heuristic Approach
• Ranked CSS Search
• LocaliCSS