ELQ: Extensible Element Queries forModular Responsive WebComponents

Abstract: Responsive web design is a popular approach to support devices with varying characteristics (viewport size, input mechanisms, media type, etc.) by conditionally style the content of a document by such criteria using CSS media queries. To reduce complexity it is also popular to develop web applications by creating reusable modules. Unfortu-nately, responsive modules require the user of a module to define the conditional styles since only the user knows the layout of the module. This implies that responsive modules cannot be encapsulated (i.e., that modules cannot perform their task by themselves), which is important for reusabil-ity and reduced complexity. This is due to the limitation of CSS media queries that elements can only be condition-ally styled by the document root and device properties. In order to create encapsulated responsive modules, elements must be able to be conditionally styled by element property criteria, which is known as element queries. Participants of the main international standards orga-nization for the web, the W3C, are interested in solving the problem and possible solutions are being discussed. How-ever, they are still at the initial planning stage so a solution will not be implemented natively in the near future. Addi-tionally, implementing element queries imposes circularity and performance problems, which need to be resolved be-fore writing a standard. This thesis presents the issues that element queries im-pose to layout engines and shows some approaches to over-come the problems. In order to enable developers to create encapsulated responsive modules, while waiting for native support, a third-party element queries JavaScript library named ELQ has been developed. As presented in this the-sis, the library provides both performance and usage advan-tages to other related libraries. An optimized subsystem for detecting resize events of elements has been developed us-ing a leveled batch processor, which is significantly faster than similar systems. As part of the empirical evaluation of the developed library the Bootstrap framework has been altered to use element queries instead of media queries by altering ~50 out of ~8500 lines of style code, which displays one of the advantages of the library.