CSS for Mobile Browsers : Where to Insert the CSS

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
10/11/2010 1:54:10 PM
CSS is very forgiving. If the browser encounters a selector or attribute that it cannot understand, it will just ignore that rule. This will be very helpful in the following pages.

The previous chapter 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.0, CSS Mobile Profile, WAP CSS, or WebKit extensions, it will be just the same; we’ll use 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.

If you’re interested in having W3C-valid markup, remember that XHTML Basic 1.0 doesn’t support CSS, and that version 1.1 added support, but only for a style or link tag with external styles. The W3C standards don’t support the inner styles defined in the style attribute. And to be perfectly honest, in the real world, we won’t worry too much about standards in CSS; we will simply do whatever we need to do to create the most compatible stylesheet, and this will by default include official standards and extensions.

Note: Remember, there is no special MIME type, file extension, or XHTML tag for defining mobile CSS.

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.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.

A fourth option (a new way of including an external stylesheet) is specified in the WAP CSS standard, but it is not implemented and not recommended as it offers no advantages. It looks like this:

<?xml-stylesheet href="style.css" media="handheld" type="text/css" ?>

If the website you are creating is a one-page document (a widget, an Ajax mobile application, or just a simple mobile document), it will be faster to include the CSS in the <style> XHTML tag to avoid a request and a rendering delay. The other ideal situation for this technique is if your home page is very different from the other pages in your site. Otherwise, odds are good that external stylesheets will help you manage your site more efficiently.

 Media Filtering

Is one CSS stylesheet adequate for all devices? Maybe. The first factor to consider is whether we are working on a desktop XHTML site or a mobile-specific one.

1. Desktop websites

If we decide to use only one XHTML site for both desktop and mobile devices, our only option for changing the design and layout is the CSS file. This situation is a good fit for the media attribute.

The CSS standard allows us to define more than one stylesheet for the same document, taking into account the possibility of a site being rendered on different types of media. The most used values for the media attribute are screen (for desktops), print (to be applied when the user prints the document), and handheld (for… yes, mobile devices). There are also other values, like tv and braille, but no browsers currently support these.

Great! We’ve found the solution. We can just define two stylesheets, one for screen and one for handheld, and all our problems will be solved. The two stylesheets can define different properties for the same elements, and we can even use display: none to prevent some elements from being shown on mobile devices:

<link rel="stylesheet" type="text/css" media="screen" href="desktop.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

However, this “ideal” situation becomes hell when we test it. Many modern mobile browsers rely on screen stylesheets because they can render any desktop website. And other browsers use screen when they think it is a desktop website and use handheld when they think it is a mobile website, depending on the DOCTYPE, a meta tag, or the user’s view preferences.
Warning: To further complicate the situation, some mobile browsers (such as Mobile Internet Explorer) use media="handheld" if it is the only value defined, but use media="screen" by default if both are defined. The hack is to define media="Screen", with an uppercase S; this causes Mobile IE to use the handheld option when both are defined.

Table 1 shows the media values selected by the different mobile browsers when both screen and handheld options are defined in the document. Clearly, we can’t rely on the media="handheld" attribute!

Table 1. CSS media compatibility table
Browser/platformMedia used
Android browserscreen
Nokia Series 40screen in 6th edition Both (no media understanding) before 6th edition
BlackBerryscreen (handheld if meta available)
Openwave (Myriad)handheld
Internet Explorerscreen
Motorola Internet Browserhandheld
Opera Mobilescreen
Opera Miniscreen

2. Media queries

CSS3 comes to our help with media queries. These complex media definitions include conditions about the screen size and media values allowed.

For example, we can say: “Apply this stylesheet for devices supporting only screen and with a maximum device width of 480.” This will apply to an iPhone, because in landscape mode it has a screen width of 480px and it doesn’t support print, handheld, or any other media type. Here’s how to write this as a conditional media query:

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width:
480px)" href="iphone.css" />

We can then target non-iPhone desktop devices with a filter saying: “Apply this stylesheet for browsers supporting at least screen and with a minimum device width of 481.” This query is written as follows:

<link media="screen and (min-device-width: 481px)" href="notiphone.css"
type="text/css" rel="stylesheet" />

Warning: Internet Explorer (through version 8) does not understand CSS media queries, so it will apply the iPhone stylesheet by default. That is why we need to add IE conditional comments:
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only
screen and (max-device-width: 480px)"
href="iphone.css" />

Some browsers also understand CSS media queries inside the same stylesheet file. For example, the following code will change the background color displayed on an iPhone (and other similar devices):

@media only screen and (max-device-width: 480px) {
body {
background-color: red;

An extension for conditional media queries is the orientation media query, which allows us to define different styles for different orientations. There are two possibilities: orientation:portrait and orientation:landscape. For a device running iOS 3.2 or later, you can use the orientation media query as follows:

<link rel="stylesheet" media="all and (orientation:landscape)" href="land.css" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="port.css" />

iPhone 4 and Pixel-Ratio

iPhone 4 comes with a 326-DPI screen, twice the original iPhone screen. This means that this new device has double width, double height in the same physical screen size. That is why Apple decided to give its browser the same CSS, viewport, and JavaScript dimensions as the low-DPI device, 320×480, and created a pixel-ratio of 2. This means that for every pixel, four real pixels will be drawn (a 2× zoom). Therefore, your website will render equally in iPhone 3GS or iPhone 4 beyond the clearer text. If you still want to show something different for iPhone 4 (as a high-DPI image) you can use the new media query condition -webkit-min-device-pixel-ratio:

<link media="all and (-webkit-min-device-pixel-ratio:2)"
href="iphone4.css" type="text/css" rel="stylesheet" />

The orientation query also works in Android from 2.0, in MicroB for MeeGo devices like the Nokia N900, and in Firefox Mobile. Table 2 provides a more complete list of browser compatibility for CSS media queries and the orientation extension.

Table 2. CSS3 conditional media queries compatibility table
Browser/platformConditional media queries compatibilityOrientation support
SafariYesYes, from OS 3.2
Android browserYesYes from 2.0
Symbian/S60Yes from 5th edition No before 5th editionNo
Nokia Series 40Yes from 6th edition No before 6th editionNo
Openwave (Myriad)NoNo
Internet ExplorerNoNo
Motorola Internet BrowserNoNo
Opera MobileYesNo
Opera MiniYesNo

Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us