[JS]スタイルシートを機能拡張するスクリプト -MoreCSS

MoreCSSは、スクリプトや複雑なスタイルシートを使用しないと実装できないものを、スタイルシートで簡単に指定するだけで実装できるようになるスクリプトです。

MoreCSS

ライセンスはCC3.0 Unportedのため、クレジットを消さない限り利用はフリーです。

下記は、MoreCSSで実装できるサンプルの一例です。
※下記以外にも、たくさんの機能が実装されています。

Property: auto-select
optionの値をスクリプトで実行。

form select {
auto-select: execute;
auto-select-execute: alert(%value);
}

Property: content
指定した前後に文字列を出力。

blockquote {
content: append;
content-before: '«';
content-after: '»';
}

Property: default-value
初期値の設定と、onfocusのコントロール。

input.mySearchField {
default-value: "Search …";
}

Property: include-content
外部テキストファイルをインクルード。

p#dynamicContent {
include-content: "example.txt";
include-position: after;
}

Property: list-type-char
リストのマークを変更。

ul {
list-type-char: "»";
}

Property: list-type-color
リストのマークの色を変更。

ul {
list-type-color: #CC0000;
}

Property: opacity
指定した要素の不透明度を指定。

div.glasLayer {
opacity: 0.5;
}

Property: second-elements-class
指定した要素の二番目のみに適用。

table tr {
second-elements-class: colorTable;
}

Property: target
リンクのターゲット指定。

a:active {
target: popup;
target-width: 800px;
target-height: 600px;
}

Property: tooltip
指定した属性の内容をツールチップで表示。

a:hover, abbr:hover {
tooltip: title;
tooltip-class: tooltip;
}

Property: validate
メールアドレスやURLの妥当性をチェック。

input.emailField {
validate: email;
validate-alert-text: 'This is not a valid email address.';
}

Post on:2008年3月12日