Web Development

HTML5 Series - Grid

There was a time when an HTML page layout mainly consisted of tables, and lots of them. Tables went inside other tables and complex layouts were achieved through the use of colspans and rowspans. The only problem though was it was a mess.

By using tables the HTML mark-up was dictating the design/layout of the page and if you ever wanted to change anything it was a huge task to undertake. Since then the world has moved on and now most webpages consist mainly of div's. But what if you did want to quite a rigid layout with columns and rows?

HTML5 introduces the Grid style through CSS. Your page can still consist mainly of div's (or anything for that matter), but in your css you set a display property of grid (for now in IE it's -ms-grid). You can then specify a grid-columns and grid-rows property to create a grid within your div.

Child items can be placed in grid cells through grid-row and grid-column properties in the CSS, and if you want something to span more than one cell you can use grid-row-span or grid-column-span.

If you've done any XMAL programming (WPF/Silverlight/Win8/Windows Phone) then this should all sound very similar to XMAL's Grid control.

The example below creates something like this:

1<style>
2        /* Set a grid with 3 columns and 2 rows */
3        div {
4            display: -ms-grid;
5            -ms-grid-columns:200px 200px 200px;
6            -ms-grid-rows:200px 200px;
7        }
8 
9        /* Position the child div's in the grid */
10        div:nth-child(1) {
11            -ms-grid-row: 1;
12            -ms-grid-column: 1;
13        }
14        div:nth-child(2) {
15            -ms-grid-row: 2;
16            -ms-grid-column: 1;
17        }
18        div:nth-child(3) {
19            -ms-grid-row: 1;
20            -ms-grid-column: 2;
21            -ms-grid-row-span:2; /* The middle cell spans 2 rows */
22        }
23        div:nth-child(4) {
24            -ms-grid-row: 1;
25            -ms-grid-column: 3;
26        }
27        div:nth-child(5) {
28            -ms-grid-row: 2;
29            -ms-grid-column: 3;
30        }
31 
32        /* Add a border to the cells */
33        div>div {
34            border: solid 1px black;
35        }
36</style>
37<div class="myGrid">
38    <div></div>
39    <div></div>
40    <div></div>
41    <div></div>
42    <div></div>
43</div>

It's also worth noting that the column/row sizes can be specified using fractions rather than fixed sizes. e.g. The following will produce a grid 600px wide where the middle column is twice the width of the other 2.

1<style>
2        /* Set a grid with 3 columns and 2 rows */
3        div {
4            display: -ms-grid;
5            width:600px;
6            -ms-grid-columns:1fr 2fr 1fr;
7            -ms-grid-rows:200px 200px;
8        }
9</style>

For another great example check out this hands on page from Microsoft Hands on: CSS3 Grid

HTML5 Series - Fonts

It's an all to common story, designer designs a website hands it to a developer who then goes, "what kind of font is that?" and get's the response of some completely unheard of name. The developer then try's to explain what a web safe font is and they agree to use Arial.

With CSS3 custom fonts are now a reality. On the item you are styling you still set the font family in the same way but additionally in your CSS you specify a @font-face rule so the browser can find out what the font is. The @font-face rule should specify a name and the src of the font. e.g.

1@font-face {
2     font-family: myFont;
3     src: url('myFontFileName.ttf');
4}

One point to note different browsers support different font type. Luckily though you can specify multiple sources for your font.

HTML5 Series - Video

Like Audio embedding Video in an HTML5 web page is really simple to do and has a very similar syntax.

The video tag can contain multiple source tags to specify videos in different formats as not all browsers support the same ones, and some text to be displayed if the browser does not support any. The video tag can also have a controls element specified to instruct the browser to display controls for the playback.

1<video controls>
2    <source src="URL of video.mp4" type="video/mp4">
3    <source src="URL of alternate video.ogg" type="video/ogg">
4    Your browser doesn't support viodes
5</video>

You can also set the following tags:

autoplay - Specifies that the video should begin playback immediately

loop - Sets the video to repeat

muted - Mutes the audio on playback

poster - Specifies an image to be shown what the video is downloading

preload - Specifies if an how the video should be loaded when the page loads

It is also possible to control a videos playback through JavaScript. You can reload the element, play and pause that track.

1var v = document.getElementById("myVideo");
2v.play();
3v.pause();
4v.load();

HTML5 Series - Location

Being able to get a users location opens up some great functionality especially when used on mobile devices that could be anywhere. HTML5 makes it really easy to capture the users latitude and longitude in just a couple of lines of JavaScript.

What's important to remember though is the user always has the option of denying your request for their location so error handling is very important.

First you need to check to see if the device actually support geolocation by doing navigator.geolocation

1if (navigator.geolocation) {
2    // success code to go here
3} else {
4    alert("location not supported");
5}

Next we need to call navigator.geolocation.getCurrentPosition to get the current location. As capturing a location isn't something that happens instantly (first the browser will check with the user that this is ok and then it may take a few seconds for the device to actually work out the location) you need to provide a function that will be called when the location has been established.

After that accessing the location is easy just look at the coords.latitude and cords.longitude properties on the object that was returned to your callback function.

1<script>
2    function getLocation() {
3        if (navigator.geolocation) {
4            navigator.geolocation.getCurrentPosition(function (location) {
5                document.getElementById("latitude").innerText = location.coords.latitude;
6                document.getElementById("longitude").innerText = location.coords.longitude;
7            }, function (error) {
8                alert(error.code);
9            });
10        } else {
11            alert("location not supported");
12        }
13    }
14</script>
15 
16Latitude: <span id="latitude"></span>
17Logitude: <span id="longitude"></span>
18 
19<button onclick="getLocation();">Get location</button>
20