designjs のWikiページへようこそ。
cssテキスト(linkタグで取り込むファイルまたは、styleタグ内に書かれるテキスト)は、記載にミスがあってもhtmlファイルの表示やJavaScriptの実行を妨げません。
期待したスタイルがブラウザに読み込まれないことによる表示の崩れやCSSアニメーションの不実行があるだけで、それは人間が目に初めて認識されることになります(開発ツールによってある程度のエラーを知る方法はあります)。
重要な要素であるデザインが、cssテキストの文法エラー(セレクタの指定方法の間違いや、ルール内の文字列のクォーテーションの閉じ忘れ)で「エラー」とならずに、製品としてサーバに配置される危険性は、html/JavaScriptアプリケーションの提供を業務として行う上で、致命的な欠陥といわざるを得ません。
ブラウザの開発ツールやチェックサイトを使用することで、開発時に確認することも可能ですが、そのチェック作業は容易にスキップされがちです。
もっとも懸念されるのは、ちょっとした修正のつもりの書き換えによって、修正した箇所は正常でも、それまで正常に動いていたルールを巻き込んで無効にしてしまい、表示に異常をきたしたアプリケーションがエンドユーザの目にさらされる危険性がついて回るという現実です(クォーテーションの閉じ忘れが、まさにコレを引き起こします)。多くの場合、「ちょっとした修正」の対象しか確認しないために、「まき沿い」を食った箇所が未確認のままに放置されるからです。この問題を、ブラウザはアラートしません。
Design.jsは、.cssテキストではなく、JavaScriptを使用してラインタイムにCSSのルールを作成するモジュールです。これにより、単純な書き間違いはJavaScriptの文法エラーとして表面化します(すわち、アプリケーションが起動しない）。
また、同じブラウザでも、バージョンによって対象が異なるベンダープレフィックスも、一切、指定する必要がありません。「Design.js」が、ブラウザに問い合わせて、適切なプレフックスを付与してルールを作成します。これにより、誤ったプレフィックスによってスタイルが無効になる問題は避けられます。また、プレフックスの確認作業や、指定要素の量の削減も期待できます。
さらに、解像度やブラウザ(種類、バージョン、スクリプト・エンジン)といった動作環境によって、動的に適用するスタイルを切り替えることもできます。たとえば、PC、タブレット、スマートフォンで、それぞれに適したスタイルを生成することができます。これは、指定に柔軟性のないメディア・クエリを使用するよりも容易です。どんなブラウザにも対応するように、ムダに同じ意味の指定をズラズラならべることも必要なくなります。
CSSテキストをlinkタグで読み込むように、アプリケーションの起動時にすべてのデザイン・ルールを構築していしまうというのが、もっとも単純な利用法です。それに加え、ユーザとのインタラクションにより、ルールそのものを動的に変更することで、たとえばデザイン・テーマを切り替えたり、コンテンツの配置を変更するというテクニックも利用できます。
従来では、エレメントのstyle属性を書き換えるか、必要なだけ、クラス・セレクタによるルールをズラっと定義しておき、エレメントのクラス属性を入れ替えるという方法しかありませんでした。Design.jsの活用は、こうした硬直化した開発手法に代わり、より自然で柔軟性のある解決策を提供します。
edit Design.cast({
...................................
"body": {
"font-size": "100%",
"font-family": "'Droid sans' sans-serif",
...................
},
".main_panel": {
...................
"box-sizing": "border-box",
...................
}
...................................
...................................
});
キー部分はスタイルのセレクタなので、「.<クラス名>」のようにJavaScriptにとっての演算子や、ハイフンやスペースが入ることもあるので、文字列定数で指定します。擬似要素も、そのまま含められます。
Design.create()メソッドに、cssテキストに指定するのに等しいテキストを与えることで、新しいスタイルシートを作成します。 この場合は、ルールを個別に指定するのではなく、１つのスタイルシートに含めるすべてのルールを指定できます。
重要 このメソッドでは、ベンダー・プレフィックスの自動検索などの機能が利用できないので、「セレクタ{ルール}の形式による通常のスタイル指定に使用するのは適当ではありません。
上記のようにオブジェクト化ができない、特殊な文法であるcssアニメーションの作成が適しています。
文字列での指定なので、内部に変数や関数の戻り値を含められるのは、当然です。また、必要なベンダー・プリフックスも、アプリケーション・フレームワークから取得できるのであれば、同じルールをベンダーごとに複数指定する無駄は排除できます。
Design.create(
"@" + (N3C.getAnimationInfo())[0] + "keyframes media_playing {" +
"0% {}" +
"100% {" + (N3C.getAnimationInfo())[0] + "transform: rotate(360deg) }" +
"}\n"
);
// N3C.getAnimationInfo()は、フレームワークが自動検出したベンダー・プレフィックスを取得するメソッドです。
メソッドDesign.remove()を使用することでDesign.cast()定義したCSSルールをメモリ上から削除できます。
Design.remove(".my_class");