個人的メモ。
CSS関連でやるべきことは、
- CSSEngineOn/CSSEngineOff機能の追加
- CSS変換エンジンの実装
## データ構造
### property型
* name
* value
### selector型
* name (tag, class, id)
* propertyのリスト
### stylesheet型
* selectorのリストを保持する。
* linkタグがあった場合、該当CSSを読み込み、同一セレクタが既にある場合には上書きする。
* linkタグがあった場合、該当CSSを読み込み、同一セレクタが無い場合は新規にselectorを追加する。
* @importルールがあった場合、該当CSSを読み込み、同一セレクタが既にある場合には、該当セレクタのプロパティだけ
を更新する。
* @importルールがあった場合、該当CSSを読み込み、同一セレクタが無い場合には、新規にselectorを追加する。
### current_stylesheet型
* 現在有効なプロパティのリストを保持する。
* 各プロパティは静的にもつ。
* 定義されていないプロパティについては、nullが設定されている。
### current_stylesheetスタック
* 現在有効なcurrent_stylesheet型を要素とするスタック。
* タグがオープンされると、現在最上位にあるcurrent_stylesheetをコピーして新しいcurrent_stylesheetを
作成し、current_stylesheetにpushする。
(extended_environment)
* タグがクローズされると、current_stylesheetスタックをpopする。
## 各コンバータでの処理
1) タグがオープンされる。
1-1) current_stylesheet型領域を確保する。
1-2) current_stylesheet型領域にcurrent_stylesheetスタックの最上位(if any)のプロパティを設定する。
1-3) オープンされたタグ名、クラス名、ID名により、該当selectorをstylesheet型から探す。
1-4) もしあれば、該当selectorのプロパティでcurrent_stylesheetのプロパティを更新する。
1-5) current_stylesheetをcurrent_stylesheetスタックにpushする。
2) タグ内の処理
2-1) style属性があれば、style属性のvalue値をパースする。
2-2) パース結果でcurrent_stylesheetスタックの最上位にあるcurrent_stylesheetのプロパティを更新する。
3) 各端末用タグの生成
3-1) current_stylesheetを考慮したうえで、各端末用にタグを出力する。
DoCoMoであればstyle属性出力等。
4) タグがクローズされる。
4-1) current_stylesheetスタックから1要素popする。
# selectorの特定方法
## class,IDが指定されている場合
1) tag.class#IDを検索する
2) tag#IDを検索する
3) #IDを検索する
4) 「classのみが指定されている場合」へ
IDのみが指定されている場合は、
1) tag#IDを検索する
2) #IDを検索する
3) 「tagのみが指定されている場合」へ
classのみが指定されている場合
1) tag.classを検索する
2) .classを検索する
3) 「tagのみが指定されている場合」へ
tagのみが指定されている場合
1) tagを検索する
2) *を検索する
同一定義があった場合は後に書かれているものが優先。
うーむ・・・。
.
0 コメント:
コメントを投稿