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. / Responsiv webbutveckling är ett populärt sätt att stödja enheter med varierande egenskaper (storlek av visninsom-rådet, inmatningsmekanismer, mediumtyper, etc.) genom att ange olika stilar för ett dokument beroende på enhetens egenskaper med hjälp av CSS media queries. Det är också populärt att utveckla webbapplikationer genom att skapa återanvändbara moduler för minskad komplexitet. Tyvärr kräver responsiva moduler att användaren av en modul de- finierar de olika responsiva stilarna eftersom endast använ-daren vet i vilket kontext modulen används. Detta implice-rar att responsiva moduler inte är enkapsulerade (alltså att de inte fungerar av sig själva), vilket är viktigt för återan-vändning och reduktion av komplexitet. Det beror på CSS media queries begränsningar att det endast går att defini-era olika stilar för element beroende på dokumentets rot och enhetens egenskaper. För att kunna skapa enkapsule-rade responsiva moduler måste olika stilar kunna definieras för ett element beroende på ett elements egenskaper, vilket är känt som element queries. Deltagare av det internationella industrikonsortiet för webbstandardisering, W3C, är intresserade av att lösa pro-blemet och möjliga lösningar diskuteras. De är dock endast i det initiala planeringsstadiet, så det kommer dröja innan en lösning blir implementerad. Dessutom är det problema-tiskt att implementera element queries eftersom de medför problem gällande cirkularitet samt prestanda, vilket måste lösas innan en standard skapas. Denna rapport presenterar de problem för webbläsares renderingsmoterer som element queries medför och visar sätt att övervinna vissa av problemen. För att möjliggöra skapandet av enkapsulerade responsiva moduler, i väntan på webbläsarstöd, har ett tredjepartsbibliotek för element queries namngett ELQ skapats i JavaScript. Biblioteket er-bjuder både prestanda- och användningsfördelar jämfört med andra relaterade bibliotek. Ett optimerat delsystem för att detektera förändringar av elements storlekar har ut-vecklats som använder en nivåuppdelad batch-processerare vilket medför att delsystemet erbjuder signifikant bättre prestanda än relaterade system. Som del av den empiriska utvärderingen har det populära ramverket Bootstrap modi- fierats att använda element queries istället för media queries genom att ändra ~50 utav ~8500 rader stilkod, vilket visar en av fördelarna med det utvecklade biblioteket.
| Identifer | oai:union.ndltd.org:UPSALLA1/oai:DiVA.org:kth-172854 |
| Date | January 2015 |
| Creators | Wiener, Lucas |
| Publisher | KTH, Skolan för datavetenskap och kommunikation (CSC) |
| Source Sets | DiVA Archive at Upsalla University |
| Language | English |
| Detected Language | Swedish |
| Type | Student thesis, info:eu-repo/semantics/bachelorThesis, text |
| Format | application/pdf |
| Rights | info:eu-repo/semantics/openAccess |
Page generated in 0.0024 seconds