Skyscraper

スマートフォン時代のcssの在り方

前回のエントリで、スマートフォンだと、ページみにくい話をしたのですが

今回はその続きの話です。

なんとかスタイルシート側の工夫で、スマートフォンでもPCでも快適にサイトが閲覧できるか考え直すために

久しぶりに、css2の仕様書を見直してみたのですが、主な分類はこのようになっています

all	全デバイス向け
braille	点字出力
embossed	点字プリンタ
handheld	白黒の携帯画面
print	プリンタ
projection	プロジェクタ
screen	コンピュータのディスプレイ
speech	音声
tty	文字のみ出力可能な低機能プリンタ
tv	テレビ

このとき久しぶりに気づく

あ、handheldって白黒画面向けなのね･･･

つまり

片手で持てるサイズの画面サイズ
基本フルカラー

この条件を満たすメディアタイプは存在しないということです。

というわけで、結論から言ってしまいますが

smartmediaって名前で、携帯電話向けのメディアタイプを追加すべきではないでしょうか？

他にも、携帯ゲーム機やカーナビ等、それなりのCPUと画面サイズを持ったデバイスは色々とあります。将来的には、IT家電等も、小さな画面＋タッチパネルでの操作を持つデバイスの代表的なものの一つに入るでしょう

(実際には、現在それらのメディアはCSS2にそれなりに対応しています。個人的にはそんなことをするよりcss1に完全対応を目指して欲しい所･･･)

ついでに、ぶっちゃけた話。これだけメディアタイプが使われていない原因って、css2で宣言されているからなんですよね。

css1を完全に理解できないと、css2の仕様を取り込めない。でもメディアタイプに宣言されている点字機器や、白黒画面のデバイス、音声出力など、市場の小ささや機器の性能が低い事を前提とするデバイスにcss1の仕様を全て理解させるのは決して現実的な話ではありません。

この様な状況では、過半数以上のメディアがcssを理解するなと言っている様なものです。

なので、私は次の仕様を含んだ、css1の拡張であるcss1.1を作ることを提唱したいです。

メディアタイプsmatmediaをメディアタイプとして追加

上記のとおりですが、正直そこそこ小さい画面＋フルカラーのメディアに対する仕様が存在しないのは初期設計のミスであったとしか言いようが無い

@import "foo.css" screen, tv　いう形のメディアタイプの

メディアタイプの定義の方法はたくさんありますが、現在一番良く使われているのはこれですので

css1.0程度しか理解できないブラウザに出来るだけ負担をかけないように実装させるためにこの仕様のみくぉcss1の方に落としてあげるべきだと思います

@cssversion

cssのバージョンを、次の様にして定義します。

@cssversion "1.0"

これを文書の先頭で定義してやることで、自分の対応し切れていないCSSがある場合はシート全体の読み込みをパスします。

現在css3に対応しているブラウザとcss2までしか対応していないブラウザの切り分けをしないといけない問題が出ていますが

今後、様々なメディアタイプのスタイルシートの切り分けを行わなければならないことまで考えると、いいかげん、こういうバージョンでの切り分け機能が必要だと思われます。

規格と歴史にはベクトルと質量がありますから。ここを逃すとズルズルと代替手段の無いまま後方互換性の波に飲まれて規格自体が消えかねない所に来ています。

正直、それを考えると、CMS等を使わないでアマチュアがデザインを管理するためには、メディアタイプを有効に使うしかないし、今は、その最大最後のチャンスではないかと思っています。

こんなネットの片隅で叫んでもなかなかうまくはいかないのは分かっていますが、何方かこの危機を感じ取っていただける型の目に留まることを祈るばかりです

投稿者 baban 2010/06/12 at 02:34

no comments no trackbacks

忘れ去られたメディアタイプ

大分久しぶりですが、HTML、CSSのオハナシ。

最近、といっても2月末あたりなのですが携帯をAndroidのものに変更しまして

常時ネットワークに繋がっているカイカンを楽しませていただいているのですが

携帯向けの画面だと全体を見ると文字が小さいし、拡大すると全体が見えないんですよね

インターフェースの拡大、縮小機能が秀逸なので、大きなストレスにはなっていないのですが

ここでやっと気が付いた。

あ、cssのメディアタイプ切り分け機能ゼンゼン役に立っていないジャン！

メディアタイプ、cssを使っている人だとおおよそみんな知っていると思うのですが

スタイルシートでデータを読み込む場合等に

@import "def/html-default-css2.css" screen, tv;

とすれば、特定のメディアタイプだけに表示の変更を行えますが

スマートフォンに適した形に、整形をするための切り分けがぜんぜん出来ていない･･･

というよりは、cssのメディアタイプという機能はCSSハックのときの道具に成り下がっている。

何故こんな事になっているのか？　原因を手繰っていくと最初のcssの設計に辿り着く。

最初のcssは普及はHTMLにcolorやsize属性でデザインを埋め込んでいくのを出来るだけうまくやめるという当時の問題を解決するだけの非常にシンプルな設計だった

その後、css2が出てきたときに、その仕様は音声出力や印刷関連まで仕様を盛り込んだ、実装するには非常に重いものになりました

このとき一緒に入ったのがメディアタイプによる読み込むシートの切り分けと言う機能ですが

既にcss2はどのベンダーにも実装する機能が多すぎる負担の大きいものになっていた。

通常のPCでも重いものを、携帯デバイスが処理できるかと言うとそんなはずはないわけで

cssはiPhoneクラスのスマートフォンの登場と、PCと同じブラウザの搭載で解決されるまでの間があったのですよ。

こうなると、PC向けのスタイルシートだけ解釈させていればスマートフォンでも見れるじゃないか、画面小さいのは操作法で解決してネ！

デザイナでは操作できない領域だし

という方向に作る側の頭も働く。

でもですね。現実的には使っていて次の様な問題が発生するんですよ

単純に重い！Xperiaでも1GHz程度のCPUしかないのに、css3を使用したサイトを処理させようとするのはおかしい。他のプロセスを動かせたはずの領域を無駄遣いしている
フルFlashやSilverLightを使ったサイトを大抵処理できないし、そこは振り分けるのが自然な解答
PC向けのディスプレイ向けの設計をスマートフォンの小さい画面でみると平気ではみ出る

結局のところ、スマートフォン向けにページを作ったり、ページを切り分けたりする必要が出てくる

CMSなら、User-Agent情報から判別して切り分けることも出来ますが、全てのサイトがシステム化する現実は私には想像できない

現実的には読み込むスタイルシートをブラウザ側が選択するcssのメディアタイプが一番現実的です

なのでスマートフォンならスマートフォン向けに適したスタイルシートを読み込むような

使われるような形でのメディアタイプの見直しが必要なのではないかなと感じます

投稿者 baban 2010/05/30 at 00:13

no comments no trackbacks