2
私はこのテクニックを1年以上使用してきましたが、他の場所では使用していません。簡単に言えば、私はCSSのクラスを使ってディスプレイの "状態"や "モード"を正式化しています。私は "CSSのモード"、 "CSSの状態"、 "ステートフルなCSS"などを検索しようとしましたが、それが存在する場合、それらの名前を使用しません。このCSSテクニックには名前がありますか？
ここに私がしていることの簡単な例があります。この例は応答性の高いテキスト入力です。これは、サーバーと通信して、選択したユーザー名が既に使用されているかどうかを動的に伝えるソートです。
マークアップ：
<div id="username-container" class="username-mode-ready">
<!-- input -->
<label for="username" class="username-label">Username:</label>
<input type="text" id="username" class="username-input" />
<!-- icons -->
<img src="error.png" class="icon error"/>
<img src="ok.png" class="icon accepted"/>
<img src="loading.gif" class="icon loading"/>
<!-- messages -->
<p class="message error">
That username is not available.
</p>
<p class="message accepted">
That username is available!
</p>
<p class="message loading">
Loading ...
</p>
</div>
CSS：
/* Default = hidden */
#username-container .error,
#username-container .accepted,
#username-container .loading {
display : none;
}
/* Show when appropriate */
#username-container.username-mode-error .error,
#username-container.username-mode-accepted .accepted,
#username-container.username-mode-loading .loading {
display : block;
}
今我々はJavascriptを追加します。
$('username-container').className = 'username-mode-loading';
そして、我々が戻ったとき、私たちはサーバの応答に基づいて、次のいずれかを実行します：私たちは私たちがやるのサーバーに行くとき
$('username-container').className = 'username-mode-accepted'; // Username available
$('username-container').className = 'username-mode-error'; // Username taken
この方法は、我々はできるだけで何百万もの異なる要素上のelement.style.displayを操作することなく、異なる表示モードを見るためにコンテナのclassNameを変更してください。
CSS：
/* Set label color to green or red depending on availability */
#username-container.username-mode-accepted .username-label {
color : green;
}
#username-container.username-mode-error .username-label {
color : red;
}
を、または複数のモード間でスタイルを適用する：我々はまた、表示/非表示以上のことを行うことができます
マークアップ：
<img alt="Whew! I searched as hard as I could!" src="done-searching.png" class="icon done-searching"/>
CSS：
/* New icon should display in accepted and error modes */
#username-container .done-searching {
display : none;
}
#username-container.username-mode-accepted .done-searching,
#username-container.username-mode-error .done-searching {
display : block;
これを持っています技術は既に記述されていますか？私はそれをモード指向のCSSと呼ぶようになっています。私はそれを人に説明するときに名前が欲しいと思っていますが、グーグルビールの名前があればそれを使っています。種類のこれらのアイデアのいくつかをカバーするこれらの記事アウト
あなたはサーバーとJavaScriptを使用しているので、私はそれを「CSS」と呼んでいません。それは簡単です：レスポンシブルデザイン –
jQuery UIを見たことがありますか？ –
@Diodeus：これはどのように反応しますか？ – BoltClock