How to Match WCSS
Cascading Style Sheets to Different User Agents?

Before
we talk about how to match WCSS cascading style sheets to different
user agents, let's go back to the request-response cycle between a
server and a client browser that we mentioned earlier. We copy and
paste it here for your convenience.

The
WAP browser requests an XHTML MP page from the server.

The
server receives the request and delivers the XHTML MP document to
the WAP browser.

The
WAP browser receives the XHTML MP document and finds that it
contains a <link> tag that references to an external
cascading style sheet.

The
WAP browser sends another request to the server in order to obtain
the WAP CSS cascading style sheet.

The
server receives the request and delivers the WAP CSS cascading
style sheet to the WAP browser.

The
WAP browser receives the WAP CSS file and displays the XHTML MP
page according to the style information contained in the WAP CSS
file.

The
steps repeat when the user selects an anchor link or types a new
URL in the WAP browser.

As
you can see from above, the server receives a HTTP request at step 2
and step 5. This means to match the appropriate WCSS cascading style
sheet to a client browser, you can either:

(Way
1) Detect the user agent at step 2. Then according to the
user-agent header value, change the URL to the WCSS cascading style
sheet (the URL is contained in the href attribute of the <link>
tag) in the XHTML MP document

Or

(Way
2) Detect the user agent at step 5. Then according to the
user-agent header value, change the contents of the WCSS cascading
style sheet

Let's
see an XHTML MP/WCSS example that can help you understand how to use
JSP and the user-agent header to match cascading style sheets to
different user agents.

In
this XHTML MP/WCSS example, we define three cascading style sheets.
The first one is for Nokia's mobile phone browsers, the next one is
for Sony Ericsson's mobile phone browsers and the last one is for
desktop web browsers.

Below
is the WAP CSS style sheet for Nokia's mobile phone browsers. It
specifies that level-1 headings should be displayed with the marquee
effect. (In case you forget how to use the marquee extension, you can
go back to "WCSS Marquee
Extension" and have a look.)

Below
is the JSP file that contains the XHTML MP markup. The JSP code
demonstrates how to match WCSS cascading style sheets to different
client browsers using Way 1 (detecting the user agent when the XHTML
MP document is requested).

1.
The user-agent HTTP header value is obtained and is assigned to the
variable uaheader.

String
uaheader = request.getHeader("user-agent");

2.
The variable uaheader is checked to see if it contains the
words "Nokia", "SonyEricsson" or "Mozilla".
The indexOf(String str)
method of the String object returns the index of the first occurrence
of the str substring.
If str is not found,
-1 is returned by the indexOf(String str)
method. In other words, if str
is found, the return value will not be -1.

If
the variable uaheader
contains "Nokia", it means the user agent is a Nokia mobile
phone browser and we change the URL of the external cascading style
sheet to nokia.css.

Otherwise
if the variable uaheader contains "SonyEricsson", it
means the user agent is a Sony Ericsson mobile phone browser and we
change the URL of the external cascading style sheet to
sonyericsson.css.

Otherwise
if the variable uaheader contains "Mozilla", it
means the user agent is a desktop web browser (like IE, Firefox and
Mozilla) and we change the URL of the external cascading style sheet
to webbrowser.css.

Note that we
have to check for the word "Mozilla" in the last "else
if" statement since the user-agent header value of some mobile
phone browsers contains the word "Mozilla". For example,
let's say the user-agent header value of a certain Nokia mobile phone
browser contains that word "Mozilla". If we check for the
word "Mozilla" in the first "if" statement, the
JSP code will wrongly identify the Nokia mobile phone browser as a
desktop web browser.

Now
let's move on to another example that demonstrates how to match WCSS
cascading style sheets to different client browsers using Way 2
(detecting the user agent when the cascading style sheet is
requested). This example produces the same result as our first
example.

Otherwise
if the variable uaheader
contains "SonyEricsson", it means the user agent is a Sony
Ericsson mobile phone browser and we add the contents of the file
sonyericsson.css into
the cascading style sheet.

Otherwise
if the variable uaheader
contains "Mozilla", it means the user agent is a desktop
web browser (like IE, Firefox and Mozilla) and we add the contents of
the file webbrowser.css
into the cascading style sheet.

What do you think about this web page? It is very helpful. It is helpful, but some information I wanted is missing. It is not helpful. It has broken links. It has typos / grammatical mistakes. It has incorrect information. Others

(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Due to the amount of messages we received, we may not be able to reply to all messages.