Archive for the ‘mobile’ Category
Safari om the iPhone is an incredible powerful browser and comes with a whole bunch of features.
Besides the amazing support for CSS3, a superfast rendering engine and great JavaScript support, there are a few hidden gems I want to explain in this (and maybe following) blogposts. If you are interested in mobile web development, maybe you will find a few features you haven’t seen before.
Making your web app iPhone ready
Note: you can visit the example used in this blog post from your iPhone here.
Dion Almaer was faster than me blogging about TouchScroll. Here is what you are waiting for – the “official” blog post about TouchScroll and the link to the repository.
Here it is: TouchScroll, our scrolling layer for WebKit Mobile. It is JavaScript/CSS 3 based and allows for fixed elements like headers and toolbars on web pages when viewed on the iPhone or on Android. It works on the iPad, too. Check out the demo (short URL: http://u.nu/8uvg8) to see it in action – it works in Desktop Safari (at least kind of) or WebKit Nightly (very good), but I recommend you have a look at it on your iPhone, iPad, or Android based device.
During the Oredev speakers dinner last November, I was having an interesting discussion about the car industry and how Google in one swipe mangled up the turn-to-turn navigation market. During this discussion and other interesting conversations at the following JsConf, it it became more and more clear that we (web developers) should be able to write applications for instance for cars, write applications for phones we can plug into cars, and write those applications using web technologies – meaning JavaScript, HTML and CSS.
In a recent project a client asked for boxes with rounded corners and filled with a gradient; within an application targeted at smartphones.
On mobile devices it is important to keep things simple, for instance to keep the number of DOM nodes low. That rules out using additional elements for the corners. On the other hand, many mobile devices are featuring recent versions of web rendering engines. Dive into CSS 3.
Modern web development techniques offer a lot of possibilities to render boxes with rounded corners: e.g. border-radius, border-image, or SVG used as background. In this post I’m going to explore the support for them across different devices and runtime environments. You can skip to the results table if all you want is a quick overview.
As stated above, I want to achieve a box with rounded corners and a gradient that reaches from top to bottom, scaling to the height of the box. The example might be simple, but it is representing a common design goal.

