Adding Some Style
30 CHAPTER 2: Building a Mobile HTML Entry Form
This stylesheet can now be included in your form code, with the following HTML tag placed in the head section of the page:
<link rel="stylesheet" media="screen" href="todolist.css" /> Notice that some nonstandard CSS definitions that have been included in the code
(shown in bold in the preceding code snippet). I will discuss these in more detail in the following section.
NOTE: These kinds of CSS definitions will be used throughout the book. They represent early WebKit implementations of CSS3 (the next generation of CSS) that are often used in conjunction with HTML5 to achieve some nice visual effects. HTML5 and CSS3 are very complementary technologies, and their combined use is really the enabler for mobile web apps to compete with native mobile apps.
Figure 2–5 shows the browser output displayed after the preceding CSS is applied to our adjusted HTML.
Figure 2–5. The updated form layout with CSS applied
Parts
» Form Styles with a Splash of CSS3
» Handling Device Orientation Changes
» Saving Objects to Web Storage Using JSON
» Saving To-Do List Items with a Client-Side Database
» Single HTML File, Multiple App Pages
» Building the Application’s Main Screen
» Home Screen Storage Requirements
» Building the All Tasks Screen
» Getting Started with Google App Engine
» Sending Your Offline Data to jsonengine
» Updating the User Interface for Online Synchronization
» Querying a jsonengine Instance
» Adding a Simple Loading Spinner
» Making Your Application Location-Aware
» The Offline Cache Manifest File
» Introduction to the HTML5 Canvas
» Interactivity: The Way of Touch
» Drawing a Frame of Animation
» Drawing Images: Accounting for Device DPI
» Creating Realistic Movement in Animations
» Canvas Transformations and Animation
» Transformations and Our Car Animation
» Tile5: An Alternative HTML5 Mapping API
» A Mobile-Optimized Mapping UI
» Coding a Boilerplate Mobile Mapping UI
» Implementing UI Navigation in the Boilerplate
» Implementing the Tapless Marker Selection
» Building the Sample Application
» Tidying Up: Renaming Classes
» Transferring Existing Code into a PhoneGap App
» Locating Resources in Moundz
» Finding Nearby Resources with the Geominer API
» Using Geolocation to Track Your Position
» Twitter Anywhere and the Login Process
» Alternative Twitter Authentication via Geominer
» Setting Up for the Framework Comparison
» Getting Started with jQTouch
» Applying Some jQTouch-Ups to Moundz
» Getting Started with jQuery Mobile
» Getting Started with Sencha Touch
» Reinstating the Login Screen
» Building the Resource Details Screen
» Using Geominer for Resource Tracking
» Supplying an Application Launcher Icon
» An Overview of Android Intents
» Using PhoneGap Plug-Ins to Handle Intents
» Packaging Our Application for Release
» Embracing Progressive Enhancement
Show more