Change search
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • harvard1
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • Other style
More styles
Language
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf
ELQ: Extensible Element Queries forModular Responsive WebComponents
KTH, School of Computer Science and Communication (CSC).
2015 (English)Independent thesis Advanced level (degree of Master (Two Years)), 20 credits / 30 HE creditsStudent thesisAlternative title
ELQ: Utbyggbara Element Queries förModulära Responsiva Webbkomponentera (Swedish)
Abstract [en]

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.

Abstract [sv]

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.

Place, publisher, year, edition, pages
2015.
Keyword [en]
element queries, elq, web, css
National Category
Computer Science
Identifiers
URN: urn:nbn:se:kth:diva-172854OAI: oai:DiVA.org:kth-172854DiVA: diva2:850230
Educational program
Master of Science in Engineering - Computer Science and Technology
Supervisors
Examiners
Available from: 2015-09-10 Created: 2015-09-01 Last updated: 2015-09-10Bibliographically approved

Open Access in DiVA

fulltext(5845 kB)641 downloads
File information
File name FULLTEXT01.pdfFile size 5845 kBChecksum SHA-512
be9041d1b08d63efcbbe09d631a56617f9f0df03b7e039b5f99e70ed6710e257d4ca79c6224174a0a411d76141125697431713553160077cb0bef0655a316178
Type fulltextMimetype application/pdf

By organisation
School of Computer Science and Communication (CSC)
Computer Science

Search outside of DiVA

GoogleGoogle Scholar
Total: 641 downloads
The number of downloads is the sum of all downloads of full texts. It may include eg previous versions that are now no longer available

urn-nbn

Altmetric score

urn-nbn
Total: 235 hits
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • harvard1
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • Other style
More styles
Language
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf