Web Kit Support for Advanced CSS

The Android browser implements subsets of the World Wide Web Consortium's CSS 2.1 and 3 specifications (www.w3.org/TR/css3-roadmap/). According to design, web browsers are designed to simply ignore any CSS property that they don't support, so when you test any of the specifications defined on your own web pages, the Android browser gracefully ignores some of them.

It is beyond the scope of this book to reproduce the highly detailed specifications found on the Consortium's website, but an exciting example should interest you enough to explore the technology in greater depth. This example involves the box-shadow property for making the browser automatically put a shadow around text and graphics.

You can read about it in depth at www.w3.org/TR/css3-background/#the-box-shadow. You can also see a demonstration of the feature by creating the following small HTML text file, installing it on your web server, and having your cellphone browse it:

A Demonstration of box-shadowing:

<title>Android: Webkit Extentions</title>

<span style="-webkit-box-shadow:10px 10px 5px #888;"> Box shadowed image... </span>

<img src="image.gif"

style="-webkit-box-shadow:10px 10px 5px #888;">

When this small snippet of HTML code is rendered on your Android cellphone, the text and the image file will have a shadow around it.

You'll notice that the style property -webkit-box-shadow differs from the CSS3 specification. If you want to read up on more specific details of the WebKit standard, see http://developer.apple.com/safari/library/documentation/ AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties. html. Not all of those specifications are supported by Android, but most are.

0 0

Post a comment