DEGREE PROJECT, IN COMPUTER SCIENCE , SECOND LEVEL STOCKHOLM, SWEDEN 2015 ELQ: Extensible Element Queries for Modular Responsive Web Components LUCAS WIENER KTH ROYAL INSTITUTE OF TECHNOLOGY SCHOOL OF COMPUTER SCIENCE AND COMMUNICATION (CSC) ELQ: Extensible Element Queries for Modular Responsive Web Components LUCAS WIENER
[email protected] Master’s Thesis at CSC Supervisors at EVRY AB: Tomas Ekholm & Stefan Sennerö Supervisor at CSC: Philipp Haller Examiner: Mads Dam June 2015 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.