[JS]スタイルシートを機能拡張するスクリプト -MoreCSS
Post on:2008年3月12日
sponsors
MoreCSSは、スクリプトや複雑なスタイルシートを使用しないと実装できないものを、スタイルシートで簡単に指定するだけで実装できるようになるスクリプトです。
ライセンスはCC3.0 Unportedのため、クレジットを消さない限り利用はフリーです。
下記は、MoreCSSで実装できるサンプルの一例です。
※下記以外にも、たくさんの機能が実装されています。
Property: auto-select
optionの値をスクリプトで実行。
|
1 2 3 4 5 6 |
<textarea name="code" class="css" cols="60" rows="5"> form select { auto-select: execute; auto-select-execute: alert(%value); } </textarea> |
Property: content
指定した前後に文字列を出力。
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> blockquote { content: append; content-before: '«'; content-after: '»'; } </textarea> |
Property: default-value
初期値の設定と、onfocusのコントロール。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> input.mySearchField { default-value: "Search …"; } </textarea> |
Property: include-content
外部テキストファイルをインクルード。
|
1 2 3 4 5 6 |
<textarea name="code" class="css" cols="60" rows="5"> p#dynamicContent { include-content: "example.txt"; include-position: after; } </textarea> |
Property: list-type-char
リストのマークを変更。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> ul { list-type-char: "»"; } </textarea> |
Property: list-type-color
リストのマークの色を変更。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> ul { list-type-color: #CC0000; } </textarea> |
Property: opacity
指定した要素の不透明度を指定。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> div.glasLayer { opacity: 0.5; } </textarea> |
Property: second-elements-class
指定した要素の二番目のみに適用。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> table tr { second-elements-class: colorTable; } </textarea> |
Property: target
リンクのターゲット指定。
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> a:active { target: popup; target-width: 800px; target-height: 600px; } </textarea> |
Property: tooltip
指定した属性の内容をツールチップで表示。
|
1 2 3 4 5 6 |
<textarea name="code" class="css" cols="60" rows="5"> a:hover, abbr:hover { tooltip: title; tooltip-class: tooltip; } </textarea> |
Property: validate
メールアドレスやURLの妥当性をチェック。
|
1 2 3 4 5 6 |
<textarea name="code" class="css" cols="60" rows="5"> input.emailField { validate: email; validate-alert-text: 'This is not a valid email address.'; } </textarea> |
sponsors
