NEW CSS3 LAYOUT MODES, HISTORY INTERFACE AND WEB WORKERS

Abstract

The objective of this thesis was to research and study existing and upcoming CSS3 and HTML5 technologies. The technology selected was Flexbox layout which provides an elegant system with HTML elements inside a container in rows that will ‘flex’ to fill the available space in different ways specified using CSS properties. Another technology was the grid layout that splits the page into rows and columns and allows content items to fill the grid built from those rows and columns. The third technology was History interface which enables the creation of new and the edition of current browser history events. Lastly, Web Workers were studied that allow the offloading of computation work into the background into another thread so that they will not block the main DOM thread.

The study describes the basic concepts of these new technologies and their use through examples and cases.

This thesis describes a field that does not contain many previous research projects; therefore the examples provided by this study are of value to web developers.

Opinnäytetyössä tarkasteltiin olemassa olevia ja tulevia CSS3 ja HTML5 tekniikoita. Näistä valittiin Flexbox layout joka tarjoaa elegantin tavan laittaa HTML elementtejä säiliön sisälle riveissä, joidenka kokoa voidaan venyttää erilaisin tavoin joita kontrolloidaan CSS ominaisuuksilla. Grid layout joka jakaa sivun sarakkeisiin ja riveihin joista rakennetaan ruudukko, joka voidaan täyttää HTML elementeillä. History interface joka mahdollistaa uusien historia tapahtumine muokkaamisen ja tämänhetkisen tapahtuman muokkaamisen. Ja viimeisenä Web Workkerit jotka mahdollistavat laskutyön siirtämisen taustalla pyörivään säikeeseen, jolloinka laskutyö ei pysty lukitsemaan DOM säiettä.

Työssä käydään läpi eri tekniikoiden perusteet ja käydään esimerkkiä hyväksi käyttäen läpi niiden toiminta.

Työn tuloksena saatiin tutkimus sellaiselle alueella jolle ei aikaisemmin ole tehty kovinkaan montaa tutkimusta. Työn tuloksena saatiin aikaan ohjeet ja esimerkit joidenka avulla kehittäjä voivat lähestyä näitä tekniikoita helpommin.