You are previewing Programming the Mobile Web, 2nd Edition.

Programming the Mobile Web, 2nd Edition

Cover of Programming the Mobile Web, 2nd Edition by Maximiliano Firtman Published by O'Reilly Media, Inc.
  1. Preface
    1. Who This Book Is For
    2. Who This Book Is Not For
    3. What You’ll Learn
    4. Other Options
    5. If You Like (or Don’t Like) This Book
    6. Conventions Used in This Book
    7. Using Code Examples
    8. How to Contact Us
    9. Safari® Books Online
    10. Acknowledgments
  2. 1. The Mobile Jungle
    1. The Mobile Ecosystem
      1. What Is a Mobile Device?
      2. Mobile Device Categories
    2. Brands, Models, and Platforms
      1. Apple iOS
      2. Android
      3. Windows
      4. Nokia
      5. BlackBerry
      6. Samsung
      7. Sony Mobile
      8. Motorola Mobililty
      9. Amazon
      10. LG Mobile
      11. HTC
      12. HP and Palm
      13. Firefox OS
      14. Ubuntu for phones
      15. Chinese platforms
      16. Other Platforms
      17. Smart TV Platforms
    3. Technical Information
  3. 2. Understanding mobile web
    1. Myths of the Mobile Web
      1. It’s Not the Mobile Web; It’s Just the Web!
      2. You Don’t Need to Do Anything Special About Your Desktop Website
      3. One Website Should Work for All Devices (Desktop, Mobile, TV, etc.)
      4. Just Create an HTML File with a Width of 320 Pixels, and You Have a Mobile Website
      5. Native Mobile Applications Will Kill the Mobile Web
      6. People Are Not Using Their Mobile Browsers
    2. What is the mobile web?
      1. Differences
    3. Mobile Web Eras
      1. WAP 1
      2. WAP 2.0
    4. The Mobile Browsing Experience
      1. Browsing Types
      2. Zoom Experience
      3. Reflow Layout Engines
      4. Direct Versus Cloud-based Browsers
      5. Multipage Experience
      6. Web Engines
    5. Fragmentation
      1. Display
    6. Market Statistics
  4. 3. Browsers and Web Platforms
    1. Web platforms that are not browsers
      1. HTML5 Webapps
      2. Web Views
      3. Pseudo-browsers
      4. Native Web apps, packaged apps and hybrids
      5. Ebooks
    2. Mobile Browsers
      1. Preinstalled Browsers
      2. User-Installable Browsers
      3. Browser Overview
  5. 4. Tools for mobile web development
    1. Working with Code
      1. Adobe Dreamweaver
      2. Adobe Edge Tools
      3. Microsoft Visual Studio and WebMatrix
      4. Eclipse
      5. Native web IDEs
    2. Testing
      1. Emulators and Simulators
      2. Real devices testing
      3. Remote Labs
    3. Production Environment
      1. Web Hosting
      2. Domain
      3. Error Management
      4. Statistics
  6. 5. Architecture and Design
    1. Mobile Strategy
      1. When to get out of the browser
      2. Context
      3. Server Side Adaptation
      4. Progressive Enhancement
      5. Responsive Web Design
      6. RESS
    2. Navigation
    3. Design and User Experience
      1. Touch Design Patterns
      2. Tablet Patterns
      3. Official UI Guidelines
      4. What not to do
  7. 6. Markups and Standards
    1. First, the very Old Ones
      1. WML
    2. Current Standards
      1. Politics of the Mobile Web
      2. Delivering Markup
    3. XHTML Mobile Profile and Basic
      1. Available Tags
      2. Official Noncompatible Features
      3. Creating Our First Compatible Template
      4. Markup Additions
    4. Mobile HTML5
      1. Creating our first HTML5 template
      2. Syntax Rules
      3. New elements
    5. CSS for Mobile
      1. WCSS Extensions
      2. CSS 3
    6. HTML5 Compatibility levels
      1. Testing your browser
    7. Confusion
  8. 7. Basics of Mobile HTML5
    1. Heading Structure
      1. Title
      2. Website icon
      3. Home Screen icons
      4. The viewport
      5. Changing the navigation method
      6. Removing automatic links
      7. Meta data for sharing
      8. Hiding URL address bar
      9. Native app integration
    2. The Document Body
      1. Main Structure
    3. HTML5 Mobile Boilerplate
    4. The content
      1. Block Elements
      2. Lists
      3. Tables
      4. Frames
      5. Links
      6. Accessibility
  9. 8. HTML5 Forms
    1. Form design
    2. Form elements
      1. Select lists
      2. Radio buttons and checkboxes
      3. Buttons
      4. Hidden fields
      5. Text input fields
      6. Range slider field
      7. Date input fields
      8. File selection fields
      9. Non-interactive form elements
    3. Form Control Attributes
      1. Placeholder
      2. Auto focus
      3. Autocomplete
      4. Validation input attributes
      5. Read only
      6. Safari extensions
      7. Firefox extensions
      8. XHTML mobile <code xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="literal">inputmode</code>
      9. Additional form attributes
    4. Form validation
      1. HTML5 validation
      2. WAP CSS validation
  10. 9. Feature and device detection
    1. Possible problems
      1. Possible solutions
    2. Informational websites
      1. Can I use
      2. MobileHTML5.org
      3. Web Platform
    3. Client-side detection
      1. HTML Fallbacks
      2. CSS Fallbacks
      3. Vendor Prefixes
      4. JavaScript fallbacks
      5. Modernizr
      6. Polyfills
      7. Platform detection
    4. Server-side detection
      1. HTTP
      2. Detecting the Context
      3. Cloud-based browsers
      4. Mobile detection
      5. Transcoders
      6. Device Libraries
  11. 10. Images and Media
    1. Images
      1. Image formats
      2. Using the img element
      3. Responsive Images
      4. Local pictograms
    2. Multiple density screens
      1. Using vector-based solutions
      2. Providing one single image
      3. Providing image alternatives
      4. SVG
      5. Canvas
    3. Adobe Flash
    4. Video
      1. Containers and Codecs
      2. Delivering video
      3. HTML5 video element
      4. Streaming
      5. Object embedding
      6. Video compatibility
    5. Audio
      1. Invisible audio player
      2. Web Audio API
      3. Audio Compatibility
  12. 11. CSS for Mobile Browsers
    1. Where to Insert the CSS
    2. Media Queries
      1. CSS3 Media Queries
    3. Selectors
    4. CSS Techniques
      1. Reset CSS Files
      2. Text Format
    5. Common Patterns
      1. Display Properties
      2. Rounded corners
      3. Border Image
      4. Pseudoclasses
      5. Backgrounds
      6. Scrollable areas
      7. Content
      8. Opacity
      9. Cursor management
      10. Selection management
      11. Touch Callout
      12. Highlight color
      13. Appearance override
    6. CSS Sprites
      1. Samples and Compatibility
      2. CSS Sprites Alternatives
      3. CSS3 Modules
      4. Gradients
      5. Reflection
      6. Masks
      7. Transforms
      8. Transitions
      9. Animations
      10. CSS Filter Effects
      11. CSS Regions and Exclusions
      12. CSS New Values and Units
  13. 12. JavaScript Mobile
    1. Coding for Mobile Browsers
      1. HTML5 script extensions
      2. Code Execution
      3. Cloud-based browsers
      4. JavaScript debugging and profiling
      5. Battery consumption
    2. Background execution
      1. Status detection
      2. Background tab notification trick
      3. Background execution compatibility
      4. Push notifications
    3. Supported Technologies
      1. Document Object Model
      2. Selectors API
      3. JSON
      4. Binary Data
      5. Web Workers
      6. HTML5 APIs
      7. Native webapp APIs
    4. Standard JavaScript behavior
      1. Standard dialogs
      2. History and URL management
      3. Manipulating windows
      4. Focus and scroll management
      5. Timers
      6. Changing the title
      7. Cookie management
      8. Event Handling
    5. JavaScript Libraries
      1. Mobile Libraries
    6. UI Frameworks
      1. Sencha Touch
      2. jQuery Mobile
      3. Enyo
      4. Montage
      5. iUI
      6. jQTouch
      7. JavaScript Mobile UI Patterns
  14. 13. Offline, Storage and Network
    1. Offline webapps
      1. The manifest file
      2. Reusing the manifest
      3. Accessing online resources
      4. Updating the package
      5. Deleting the package
      6. JavaScript API
      7. Compatibility and limits
    2. Client-side Storage
      1. Web Storage
      2. Web SQL Database API
      3. Indexed Database API
      4. FileSystem API
      5. User’s power
      6. Debugging storages
    3. Network communication
      1. Ajax
      2. Server Sent Events
      3. Web Sockets
  15. 14. Geolocation and Maps
    1. Location Techniques
      1. Accuracy
      2. Indoor Location
      3. Client Techniques
      4. Server Techniques
      5. Asking the User
    2. Detecting the Location
      1. W3C Geolocation API
      2. Carrier network location APIs
      3. IP Geolocation
    3. Maps and Navigation app integration
      1. Google Maps for Android
      2. iOS Maps
      3. Bing Maps
    4. Showing a Map
      1. Google Maps API v3
      2. Google Maps Static API
      3. Nokia Here
  16. 15. Device Interaction
    1. Mobile-specific URIs
      1. Making a call
      2. Sending email
      3. Sending an SMS
      4. Other communication apps
      5. Adding a contact to the phonebook
      6. Integrating with other applications
    2. JavaScript APIs
      1. Touch
      2. Gestures
      3. Sensors
      4. Network Information
      5. File Management
      6. Full Screen
      7. Web Notifications
      8. Camera
      9. Battery
      10. Vibration
      11. Other APIs
  17. 16. Native and installed Webapps
    1.  
      1. Pros and Cons
      2. Architecture
    2. Standards
      1. Packaging and Configuration Standards
    3. Official platforms
      1. iOS Web apps
      2. Symbian standalone webapps
      3. Windows 8 Store apps
      4. Mozilla Open Web Apps
      5. Chrome apps
      6. Samsung Web apps
      7. BlackBerry WebWorks
      8. Nokia S40 webapps
      9. Nokia Symbian webapps
    4. Apache Cordova / PhoneGap
      1. Template creation
      2. Cordova WebView
      3. CordovaJS
      4. Plugins
    5. Distribution
      1. iOS AppStore
      2. Android stores
      3. BlackBerry AppWorld
      4. Microsoft Windows Store
      5. Microsoft Windows Phone Store
    6. Full screen apps Patterns
      1. Multiple Views
      2. Layout
      3. Input Method
      4. One-View Widget
      5. Dynamic Application Engine
      6. Reload my webapp
  18. 17. Content Delivery
    1. MIME Types
      1. Static definition
      2. Dynamic definition
    2. File Delivery
      1. Direct linking
      2. Delayed linking
      3. OMA Download
    3. Application and Games Delivery
      1. iOS applications
      2. Android applications
      3. Windows applications
      4. Java ME
  19. 18. Debugging and Performance
    1. Debugging
      1. Server-Side Debugging
      2. Markup Debugging
      3. Client-Side Debugging
    2. Performance Optimization
      1. Measurement
      2. Best Practices
  20. 19. Distribution and Social Web 2.0
    1. Mobile SEO
      1. Spiders and Discoverability
      2. How Users Find You
      3. User Fidelizing
    2. Mobile Web Statistics
      1. Google Analytics for Mobile
      2. Yahoo! Web Analytics
      3. Mobilytics
    3. Monetizing your website
      1. Mobile Advertisement
    4. Mobile Web Social Features
      1. Authentication and sharing APIs
      2. Share Content
  21. A. MIME Types for Mobile Content
    1. Markup and Script MIME Types
    2. Image MIME Types
    3. Mobile Content MIME Types
    4. Audio and Video MIME Types
    5. Webapp MIME Types
  22. Index
  23. About the Author
  24. Colophon
  25. Copyright
O'Reilly logo

Chapter 11. CSS for Mobile Browsers

The previous chapters discussed the many standards in the mobile CSS world and noted the CSS extensions available in WAP CSS. Whether we decide to use CSS 2.1, CSS 3, CSS Mobile Profile, WAP CSS, or non-standard extensions, it will be just the same; we’ll use CSS at-rules, CSS selectors, and attributes for those selectors. The standards only tell us which ones are supported. What’s more, we will find some browsers that do not render standard styles but do render nonstandard ones.

In this chapter we are not going to get into basic CSS stuff but focus more on features that are specific or important on mobile devices.

Where to Insert the CSS

The first question to answer is: where should we tell the browser what styles to apply? We have many options:

  • <style> tags inside the XHTML or HTML markup

  • External stylesheets as .css files

  • style attributes inside the tags

The third option might seem like the most efficient approach, but it is not the best one. That said, there are times when it is useful. For the CSS WAP extensions for form controls described in Chapter 6, for instance, it is easiest to insert inline styles to avoid defining IDs and ID selectors for each control:

<input type="text" name="name" style="-wap-input-format: A*a">

Warning

On BlackBerry devices running Device Software 4.5 or earlier, stylesheets can be disabled from the browser or from a corporate policy.

If the website you are creating is a one-page document, it will be faster to include the ...

The best content for your career. Discover unlimited learning on demand for around $1/day.