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/platform | Media
used |
|---|
| Safari | screen |
| Android
browser | screen |
| Symbian/S60 | screen |
| Nokia Series
40 | screen in
6th edition Both (no
media understanding) before
6th edition |
| webOS | screen |
| BlackBerry | screen (handheld if meta available) |
| NetFront | handheld |
| Openwave
(Myriad) | handheld |
| Internet
Explorer | screen |
| Motorola Internet
Browser | handheld |
| Opera
Mobile | screen |
| Opera
Mini | screen |
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" />
<!--<![endif]-->
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 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/platform | Conditional media
queries compatibility | Orientation
support |
|---|
| Safari | Yes | Yes, from OS
3.2 |
| Android
browser | Yes | Yes from
2.0 |
| Symbian/S60 | Yes from
5th edition No before
5th edition | No |
| Nokia Series
40 | Yes from
6th edition No before
6th edition | No |
| webOS | Yes | No |
| BlackBerry | No | No |
| NetFront | No | No |
| Openwave
(Myriad) | No | No |
| Internet
Explorer | No | No |
| Motorola Internet
Browser | No | No |
| Opera
Mobile | Yes | No |
| Opera
Mini | Yes | No |
