auの第三世代携帯電話にCSSを対応させる。今回は、Openwave SDK 6.2Kという、端末シミュレーターでだいたい動くことを確認した。
先に注意点。現実には、定額制のCDMA 1X WIN以外は、パケット代がばかすかかかるため、あまり実用的ではない。また、auの端末にはけっこう厳しいページ容量制限があるので、ADPの中でもところどころはページが読み取れなくなる（たとえば、"css"のみでサイト内検索をしたときの検索結果のページなど）。また、ADPからリンクされている他のサイトは、auで見られる保証はない。
じゃあ意味ないよね、というわけではない。今後、定額制が増えていくことは十分考えられるので、少なくとも知っておくことはそれほど無意味ではない。
やり方。どうやら、auの3G端末は比較的小さいファイルサイズのCSSファイルだけ読んでくるようだ。handheldメディア用CSSの作成（2）も考えてやってみる。
HTMLでは
<link rel="stylesheet" type="text/css" href="http://adp.daa.jp/default.css" />
<link rel="stylesheet" type="text/css" href="http://adp.daa.jp/media-specific.css" media="screen,print,handheld" />のように、link要素でdefault.cssとmedia-specific.cssを呼び出す。
のように、defaultのほうはミニマムなCSSを提供し、media-specificではそれぞれのメディアにあわせたCSSを提供する。なお、@media handheld {}の中身はADPではゼロにしている。
auの端末は大きなCSSファイルを読まないので（SDKで確認）、ある程度いろいろ書いたmedia-specific.cssは読みこまない。前回のOpera搭載AH-K3001V（のスモールスクリーンモード）と同様、all用のdefault.cssだけが適用されることになる。
CSSの振り分けの観点からも、このやり方はわりといいんじゃないかと思っている。古いブラウザはだいたいdefault.cssだけ読んでくれて、最近のパソコン用ブラウザは@mediaをちゃんと認識してmedia-specific.cssも適用してくれる。
最後に、ミニマムなCSSであるADP版default.cssと、default.css適用サンプルを紹介しておく。参考にされたし。
html, body, h1, h2, dd {
margin: 0;
padding: 0;
}
body {
background-color: white;
color: #333322;
}
body>* {
padding-left: 2%;
padding-right: 2%;
}
h1, h2 {
font-size: 100%;
padding: 4px 2%;
}
h1 {
background-color: #888877;
color: white;
}
h2 {
background-color: #ccccaa;
color: #804024;
}
p, dl {
line-height: 125%;
}
a:link {
color: #3333ff;
}
a:visited {
color: #6B56A4;
}
a:hover {
color: #ff2f56;
}
a img {
border-style: none;
}
dt {
color: #666688;
font-weight: bold;
}
img, input, textarea {
max-width: 95%;
}
.footer {
color: #777766;
}タグ、改行、ともに適用されません（たぶんそのまま）。