A Heuristic Approach to Localize CSS Properties for Responsive Layout Failures

Tasmia Zerin, B. M. Mainul Hossain, Kazi Sakib

2025

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 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.

Paper Citation

in Harvard Style

Zerin T., Hossain B. and Sakib K. (2025). A Heuristic Approach to Localize CSS Properties for Responsive Layout Failures. In Proceedings of the 20th International Conference on Evaluation of Novel Approaches to Software Engineering - Volume 1: ENASE; ISBN 978-989-758-742-9, SciTePress, pages 292-303. DOI: 10.5220/0013477500003928

in Bibtex Style

@conference{enase25,
author={Tasmia Zerin and B. Hossain and Kazi Sakib},
title={A Heuristic Approach to Localize CSS Properties for Responsive Layout Failures},
booktitle={Proceedings of the 20th International Conference on Evaluation of Novel Approaches to Software Engineering - Volume 1: ENASE},
year={2025},
pages={292-303},
publisher={SciTePress},
organization={INSTICC},
doi={10.5220/0013477500003928},
isbn={978-989-758-742-9},
}

in EndNote Style

TY - CONF

JO - Proceedings of the 20th International Conference on Evaluation of Novel Approaches to Software Engineering - Volume 1: ENASE
TI - A Heuristic Approach to Localize CSS Properties for Responsive Layout Failures
SN - 978-989-758-742-9
AU - Zerin T.
AU - Hossain B.
AU - Sakib K.
PY - 2025
SP - 292
EP - 303
DO - 10.5220/0013477500003928
PB - SciTePress