So far we were used to expect something like this from our mobile phones with built-in GPS support. Every image or video clip then was automatically “tagged” with latitude & longitude geo data. With HTML5 coming features we discover new cool things we can do with our browsers. Such cool thing is the geolocation.

Support

As you may guess not every browser is supporting these HTML5 features, but out in the web there is quite good collection of tables comparing different browsers and their support level.

Firefox

This – as expected is a browser that supports this geo tagging. First of all you’ve to allow your browser to use your geo coordinates, as this can be private information.

Once you do it you can access the geo coordinates, which by the way are quite accurate, with JavaScript.

What if you don’t share your position?

What happens if you don’t want to share your position? Actually I ran in this situation and as my application waited the coordinates – it was completely blocked.

The examples doesn’t show you something special. They simply describe how to get the coordinates, but doesn’t tell you what if the user doesn’t click on the “share” button.

if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getPos);
}
...

function getPos(position) 
{
    position.coords.latitude;
    position.coords.longitude;
}

Of course getPos() can be simply an anonymous function:

if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            position.coords.latitude;
            position.coords.longitude;
        });
}

Only the Firefox documentation tells you how to handle errors, simply add one more parameter – callback, for getCurrentPosition() method:

if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getPos, onError);
}
...

function getPos(position) 
{
    position.coords.latitude;
    position.coords.longitude;
}

function onError()
{
   // handle error
}

Now you know where you don’t want to be.

Either are bad, because vendor prefixes work on specific browsers, while CSS3 is not implemented fully by those browsers. When talking about vendor prefixes in CSS, let me tell you in breve, what’s this. If you’d like to make rounded corner under Mozilla Firefox, you usually use a background image, but there’s another way to do it – with Mozilla specific CSS:

-moz-border-radius: 5px;

That’s bad because it works only on Mozilla based browsers, although there’s a webkit based similar syntax:

-webkit-border-radius: 5px;

Even after that our “favorite” browser MSIE until version 9 is not displaying any rounded corners.

In other hand CSS3 gives us the possibility to write the simple:

border-radius:5px;

which is not implemented in many currently used browsers, but it may be used for progressive enhancements.

In Breve …

Everybody’s talking about vendor prefixes after the famous post of PPK, but there are both opinions – pros and cons. However it’s good to use it, but very carefully, and think about what CSS3 may give you!

Beside that most of the responses of $_SERVER[‘HTTP_USER_AGENT’] may return, it appears that this is the most reliable way to track down a user agent with PHP. It is weird that most of the clients, i.e. Safari and Chrome will return something with Mozilla in it’s strings, but however it’s enough to track the “chrome” or “safari” sub strings.

All the examples bellow are from Mac OS X:

Firefox 3.6:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6

Note: there are both Mozilla and Firefox sub strings!

Safari 4:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; bg-bg) AppleWebKit/531.21.8 (KHTML, like Gecko) Version/4.0.4 Safari/531.21.10

Chrome:

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-US) AppleWebKit/532.9 (KHTML, like Gecko) Chrome/5.0.307.11 Safari/532.9

Note: Here they are Mozilla, Chorme and Safari!!!

Opera:

Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.10

The day of mobile

Nowadays it’s normal to make a site with the presumption it will be visible from mobile. The war between Nexus One from Google and iPhone from Apple is just beginning and with all those devices with wide screens everything’s becoming more complicated.

User agent strings from Nexus One and iPhone

Both are weird, but both contain the keyword – “mobile” and that may help you make a check with something like this PHP snippet:

That is the question.

One of my favorite features is that you can now sort the different columns in the Net panel. Now you can clearly see what’s the biggest component and what makes more traffic. This helps a lot once you decide to optimize the web page you’re watching.

Another good tool is that you can see the computed style, which however is only for Firefox and gives you partial information about all styles in different browsers, but it’s useful though.

I was pretty impressed by this version and I’d like to recommend it!