CSS for Mobile Browsers : Selectors

10/11/2010 1:54:46 PM
The classic CSS 2.1 selectors are compatible with almost every device, and for the few that don’t recognize them entirely, it may not be worth the effort to create alternatives. The mobile CSS–compatible selectors we can trust for every device are:
  1. Universal: * (compatible but not recommended)

  2. Element: tagName

  3. Class: .className

  4. Unique ID: #elementId

  5. Descendant: selectorselector

  6. Child: selector > selector

  7. Multiple: selector, selector

  8. Pseudoclasses (link, visited, active, focus): selector:pseudoclass

As we discussed previously, some mobile browsers also understand some additional styles to CSS 2.1. A compressed list of other selectors to use for these mobile browsers is:

  1. Selector with attribute: selector[attribute]

  2. Selector with attribute condition: selector[attribute<operator>value]

Note: operator can be one of the following: equals (=), contains as one value (~=), begins with (^=), ends with ($=), contains as a string (*=), or begins with and followed by hyphen (|=).
  1. Negation: selector:not(selector)

  2. Immediately preceded by: selector + selector

  3. Preceded by: selector ~ selector

  4. Pseudoclasses (after, before, root, nth-child(n), first-child, last-child, empty, and others): selector:pseudoclass

Warning: Some CSS3 selectors don’t work for mobile devices. How complex should a mobile website be, though? If it has that much complexity, perhaps we should consider simplifying.

CSS3 selectors should be used only for noncritical features for the basic behavior. For example, we can use one style for input tags and, only if the device supports it, another style for different input types. For very important features, we should consider using class selectors instead.

Table 1 lists the browsers’ compatibility with CSS3 selectors, as well as their ACID 3 results (on a scale of 0 to 100, with 100 being a perfect score). The ACID test is a well-known test from the Web Standards Project that evaluates how similar to the standard the implementation is on each browser.

Table 1. CSS3 selectors compatibility table
Browser/platformCSS3 selectors compatibilityACID 3 results
Android browserYes93
Symbian/S60Partial on 5th edition: problems with attribute and child selectors Poor support before 5th edition47 (5th edition)
Nokia Series 40None40 (6th edition) Complete fail before
webOSPartial92 in webOS 1.4 Incompatible test until 1.2
Openwave (Myriad)None 
Internet ExplorerNone 
Motorola Internet BrowserNone 
Opera MobileYes99
Opera MiniPartial in 5.098
Firefox on MaemoYes94

If a browser has only partial support for some attribute or selector, that means the behavior is not complete. For example, the browser may not accept all the possible values, or it may render a selector properly in the original document but not apply the style if we change the DOM dynamically. This stylesheet fragment illustrates a noncritical use of CSS3 selectors:

input {
background-color: yellow;
border: 1px solid gray;
/* The next style will only work in CSS3-compatible browsers */
input[type=button] {
background-color: silver;

  •  CSS for Mobile Browsers : Where to Insert the CSS
  •  iPhone Programming : Creating a Table View
  •  iPhone Programming : Simplifying the Template Classes
  •  Mobile SEO
  •  Building Android Apps : Adding Basic Behavior with jQuery
  •  Adding the Android Look and Feel
  •  Adding the Android CSS
  •  Building Android Apps : Basic Styling
  •  Building Android Apps : Web Programming Crash Course
  •  Synchronizing Mobile Data : Using RDA
  •  Installing Remote Data Connectivity
  •  Understanding SQL Server CE Synchronization
  •  Cocoa Fundamentals
  •  Tracing the iPhone Application Life Cycle
  •  Inside Cocoa Touch : Exploring the iOS Technology Layers
  •  The Language of Apple Platforms : Memory Management
  •  The Language of Apple Platforms : Objective-C Programming Basics
  •  The Language of Apple Platforms : Exploring the Objective-C File Structure
  •  The Language of Apple Platforms : Object-Oriented Programming and Objective-C
  •  Using the iPhone Simulator
    Top 10
    Windows 7 : Command-Line and Automation Tools - Windows Script Host
    Windows 7 : Command-Line and Automation Tools - Batch Files, Windows PowerShell
    Windows 7 : Command-Line and Automation Tools - The MS-DOS Environment
    Windows 7 : Command-Line and Automation Tools - Setting Environment Variables
    The Windows 7 Command Prompt Environment
    ASP.NET 3.5 Social Networking : Messaging (part 4) - Implementing the presentation layer
    ASP.NET 3.5 Social Networking : Messaging (part 3) - Implementing the services/application layer
    ASP.NET 3.5 Social Networking : Messaging (part 2)
    ASP.NET 3.5 Social Networking : Messaging (part 1)
    Apple iPod Nano – The Trendy Compactness
    Most View
    Designing a Windows Server 2008 R2 Active Directory : Understanding the Multiple Domain Model
    Get Started With Hyper-V Virtualization (Part 2)
    Fashionable Huawei Ascend P1 XL
    Upgrade Website With Mysql On Linux (Part 1) - Access MySQL from PHP
    Some Of The Biggest Brands In The World Had Their Products (Part 1) - Acer Aspire S5
    Getting Started with Device Manager
    How To… Digitize Your Analogue Media (Part 2)
    The Year That Went By
    Some Of The Biggest Brands In The World Had Their Products (Part 2) - Fujitsu Lifebook LH772, Acer Aspire V5- 571G
    Programming with DirectX : Textures in Direct3D 10 (part 2)
    Sony Xperia S - Short Of Being Truly Amazing
    Speed up Linux (Part 2) - Banish unnecessary processes with the bum
    A Complete Instruction For Your PC Kit And How To Buy (Part 5) - Overclockers UK Primo 6100i
    The SQL Programming Language : Complex Queries and Join Queries (part 3)
    Web porn ban: what does it mean?
    Using Remote Assistance to Resolve Problems in Vista
    Maintaining Your Windows XP System : Checking Your Hard Disk for Errors (part 2) - Checking Free Disk Space, Deleting Unnecessary Files
    Canon EOS M Uses The Same Sensor With 650D
    4G- Can Telecom Operators Count On 50%?
    Tools for the job (Part 4) - Anatomy of a live CD