表示サンプル： このページの修正箇所は次のように表示されます。
クライアントサイド又はサーバーサイドのスクリプトとともに使用されるCSS
これは、次の達成基準に関連する実装方法である：
ウェブページのデフォルトの表示が部分的に達成基準を満たさない場合、「適合要件」の条項(適合要件1)にある「代替バージョン」を用意することで必要条件を満たすことができる。いくつかの必要条件を満たすことが目的なら、ページ全体をそのレベルに適合するような表示に変更できるスタイル・スイッチャーをページ上のリンク又はコントロールによって呼び出すようにすれば、コンテンツ制作者は同じ情報の複数バージョンを作らなくても済む。
この実装方法の目的は、ウェブページの適合している代替バーションを提供するために、スクリプトと組み合わせてCSSを使う方法を示すことだ。 この実装方法では、コンテンツの表示を制御するために使用されているCSSを変更するコントロールを提供することで、コンテンツ制作者はコンテンツの代替表示を提供する。 ウェブページ内で提供されるコントロールは、そのレベルで要求される達成基準を満たすことができるような表示方法を利用者が選択・変更することを可能にする。 これによって、以下のような状況において、利用者が異なる表示方法を選択できるようになる:
パソコンの知識や権限がないことが原因で、利用者はブラウザやOSの設定を調整できないかもしれない
テキストが、ブラウザやOSの設定では対処できない方法で提供されている（テキストが画像の中に書き込まれているなど）
コンテンツのデフォルトの表示では、一部のユーザーに対して十分なコントラストがない
この実装方法で達成させるには、以下の3項目を満たしていなければならない。
オリジナルのページのリンクまたはコントロールは、それ自身が達成基準を満たしていなければならない。 たとえば、もしスタイル・スイッチャーがフォントサイズを大きくするために提供されているのに、そのコントロールが小さいフォントで書かれていたら、利用者はそのコントロールを作動させて代わりの表示方法で見ることができないかもしれない。
新しいページは、オリジナルのページと同じすべての情報と機能を含んでいなければならない。
新しいページは、希望する適合レベルのすべての達成基準に適合しなければならない。 たとえば、ひとつの要求は満たすが、それを使うと別の要求に適合しなくなってしまうような代替スタイルシートは使用できない。
スタイル・スイッチャーを使う場合は、以下の課題と制限について検討することが重要である：
利用者が行うことのできる変更の数や形式は、ウェブページのコンテンツ制作者によって制御される範囲に限定される。 できる限り多くの利用者のニーズに対応できるようにするために、バラエティ豊かな表示と設定項目が提供されるべきだ。 しかしながら、コンテンツ制作者は、利用者に多くのオプションを提供することに起因する、利用者にとっての設定可能な項目と複雑さの相互作用について熟考することも重要だ。
あるページから別のページに移動しても利用者の設定を保持しておくには、利用者の機器にクッキーで保存したり（詳細はリソースのセクションを参照）、ウェブサーバーに保存されるプロファイルにクエリー文字列として渡して格納するなどの方法で実現できる場合がある。
スタイル・スイッチャーを実装するための技術的手法は、利用者の環境においていくつかの技術が利用可能であることを前提としている（たとえば、多くのクライアントサイド・ソリューションは、JavaScriptとCSSの両方が利用可能であることを必要とする）。 これらのウェブコンテンツ技術が適合のために当てにできる場合を除き、クライアントサイドのサポートとウェブコンテンツ技術の利用可能性が保証されない場合には、コンテンツ制作者はサーバーサイドのウェブコンテンツ技術を使うことを検討すべきである。 その代案としては、これらのウェブコンテンツ技術のサポートを適合のために当てにできない場合に、使用されているいくつかのウェブコンテンツ技術が有効でなくてもコンテンツが確実に適切な表現に変換されるような実装方法を使うことが、より良いページにするための効果的な方法となる。
この例では、文字色と背景色を変更するリンクをJavaScriptで提供する。 そのリンクは、利用者の環境でJavaScriptがサポートされており、かつ有効な場合にのみ挿入されるようにすべきだ。 これは、そのリンク自身を挿入するためにスクリプトを使う（つまりJavaScriptがサポートされており、かつ有効な場合にのみリンクが表示される）ことで実現できる。
以下のコードは、JavaScriptに依存した色を変更するリンクとウェブページのコンテンツの一部、及びそこに適用されるスタイルシート、そして色を変更するリンクが選択された時に使われるスタイルシートを変更するためのJavaScriptだ。
この例は、現在のページの表示だけに適用される。実稼働環境では、利用者がそのサイトで一度選択すれば済むように、その設定をクッキーまたはサーバーサイドのユーザー・プロファイルに保存することが望ましい。
XHTML（抜粋）:
コード例：
In <head> section:
<head>〜</head>内:
<link href="main.css" rel="stylesheet" type="text/css" />
<link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" />
In <body> section:
<body>〜</body>内:
<div id="colorswitch">
<p>Change colors:</p>
<p>色の変更:</p>
<ul class="inline">
<li><a href="#" onClick="javascript:changeColors('altColors1.css');return false;"
id="altColors1">文字:紺 背景:白</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors2.css');return false;"
id="altColors2">文字:黄 背景:黒</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors3.css');return false;"
id="altColors3">文字:黒 背景:黄</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors4.css');return false;"
id="altColors4">文字:黒 背景:白</a></li>
<li><a href="#" onClick="javascript:changeColors('defaultColors.css');return false;"
id="default">デフォルトに戻す</a></li>
</ul>
</div>
<div id="mainbody">
<h1>カンファレンス・レポート</h1>
<p>先週のカンファレンスは、そうそうたる顔ぶれのスピーカーにより...</p>
</div>
CSS（抜粋）:
コード例：
main.css内：
body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }
#mainbody {
padding: 1em;
}
#colorswitch {
float: right;
width: 12em;
border: 1px #000066 solid;
padding:0 1em 1em 1em; margin:0;
}
#colorswitch p {
padding-top:.5em;
font-weight:bold;
}
defaultColors.css内：
body, p {
color:#000000;
background-color:#FFFFFF;
}
h1, h2, h3 {
color:#990000;
background-color:#FFFFFF;
}
altColors1.css内：
body, h1, h2, h3, p, a {
color:#000066;
background-color:#FFFFFF;
}
altColors2.css内：
body, h1, h2, h3, p, a {
color:#FFFF33;
background-color:#000000;
}
altColors3.css内：
body, h1, h2, h3, p, a {
color:#000000;
background-color:#FFFF99;
}
altColors4.css内：
body, h1, h2, h3, p, a {
color:#000000;
background-color:#FFFFFF;
}
JavaScript（抜粋）:
コード例：
function changeColors (newCSS)
{
document.getElementById('currentCSS').href = newCSS;
}
このコードの実装サンプル：異なる外部スタイルシートファイルを適用するためにJavaScriptのコントロールを使う
この例はコンテンツの一部分を単純に変更するもので、複雑なサイトやページに対してはあまり実用的なものではないかもしれない。 この例では、特定のコンテンツを強調表示するための背景として（あらかじめ用意された選択肢から）利用者が選択した色を反映させるために、クラス名を変更する目的でクライアントサイドのJavaScriptを使用している。
注: 以下のコードには、実装方法を理解しやすくする目的で、XHTMLコード内からJavaScriptを呼び出す部分が含まれている。しかし、コンテンツ制作者は、JavaScriptを組み込むためのその時点でのベストプラクティスを採用することが推奨される（アンオブトルーシブJavaScriptとプログレッシブ・エンハンスメントについての詳細はリソースを参照）。
XHTML（抜粋）:
コード例：
<h1>製品の比較</h1>
<p>比較のためにあなたが選択した製品は以下のとおりです。
各製品の相違点は強調表示され、イタリック体で表示されています。</p>
<p class="inlinePara">強調表示の色を変更: </p>
<ul class="inline">
<li><a href="#" onClick="changeColor('hghltLightYellow');return false;"
class="hghltLightYellow">薄い黄色</a></li>
<li><a href="#" onClick="changeColor('hghltBrightYellow');return false;"
class="hghltBrightYellow">濃い黄色</a></li>
<li><a href="#" onClick="changeColor('hghltLightBlue');return false;"
class="hghltLightBlue">水色</a></li>
<li><a href="#" onClick="changeColor('hghltBrightBlue');return false;"
class="hghltBrightBlue">青</a></li>
<li><a href="#" onClick="changeColor('hghltLightRed');return false;"
class="hghltLightRed">ピンク</a></li>
<li><a href="#" onClick="changeColor('hghltDrkRed');return false;"
class="hghltDrkRed">茶色</a></li>
</ul>
<table width="400" border="1">
<tr>
<td> </td>
<th scope="col">製品1</th>
<th scope="col">製品2</th>
</tr>
<tr>
<th scope="row">比較項目1</th>
<td>あり</td>
<td>あり</td>
</tr>
<tr>
<th scope="row">比較項目2</th>
<td class="hghltLightYellow">あり</td>
<td class="hghltLightYellow">なし</td>
</tr>
<tr>
<th scope="row">比較項目3</th>
<td>対応</td>
<td>対応</td>
</tr>
</table>
CSS（抜粋）:
コード例：
body { color:#000000; background-color:#FFFFFF; }
.hghltLightYellow { color: #000000; background-color: #FFFF99; font-style:oblique; }
.hghltBrightYellow { color: #000000; background-color: #FFFF00; font-style:oblique; }
.hghltLightBlue { color: #000000; background-color: #33FFFF; font-style:oblique; }
.hghltBrightBlue { color: #FFFFFF; background-color: #0000FF; font-style:oblique; }
.hghltLightRed { color: #000000; background-color: #FF6266; font-style:oblique; }
.hghltDrkRed { color: #FFFFFF; background-color: #993300; font-style:oblique; }
.inlinePara {display:inline; }
.inline {display: inline; margin-left:0px; padding-left:0px; line-height:3em; }
.inline li { display:inline; }
.inline li a {padding: 0.5em 1em; border: 2px solid #000000; }
JavaScript（抜粋）:
コード例：
function changeColor(hghltColor)
{
// 表のセルのデータを配列に入れる
var els = document.getElementsByTagName('td');
// 配列の要素の中から、"hghlt"で始まるクラス名を探す
// 見つかったら、クラスの値を現在選択されているものに変更する
// このスクリプトは、td要素のクラスは強調表示のためだけに使用されていることを前提としている点に注意
for (var i=0; i<els.length; i++)
{
if (els[i].className.indexOf("hghlt") == 0) { els[i].className = hghltColor; }
}
}
このコードの実装サンプル：CSSプロパティを変更するためにクライアントJavaScriptを使う
このシンプルな例では、２つあるうちの１つの外部スタイルシートを適用するためにPHPの「$_GET」を使用している。 同様のことは、PHPの様々な機能を使って実現できる。 この例では、現在のページの表示だけに適用される。 実際の制作においては、利用者がそのサイトにおいて一度選択すれば済むように、設定をクッキーまたはサーバーサイドのユーザープロファイルに保存することが望ましい。
以下のコードはPHPであるが、同様のアプローチは様々なサーバーサイドのウェブコンテンツ技術によって可能である。
PHPとXHTML（抜粋）:
コード例：
PHPの冒頭において：
<?php
$thestyle = $_GET['set'];
if ($thestyle == "style1")
{
$thestyle = "style2";
}
else
{
$thestyle = "style1";
}
?>
<head>〜</head>内：
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo($thestyle);?>.css" >
<body>〜</body>内：
<?php
if ($thestyle == "style1") {
echo "<a href=\"index.php?set=style1\">スタイルシート2に変更</a>";
}
else {
echo "<a href=\"index.php?set=style2\">スタイルシート1に変更</a>";
}
?>
<div id="mainbody">
<h1>カンファレンス・レポート</h1>
<p>先週のカンファレンスは、そうそうたる顔ぶれのスピーカーにより...</p>
</div>
CSS（抜粋）：
コード例：
style1.css内：
body, p { color:#000000; background-color:#FFFFFF; }
h1, h2, h3 {color:#990000; background-color:#FFFFFF; }
style2.css内：
body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }
このコードの実装サンプル：異なる外部スタイルシートファイルを適用するためにPHPの「$_GET」を使う
以下の例では2つのファイルを使用している：
フォームを含むJava Server Page (JSP)及びフォームの処理コード
上記ページ及び同様のスタイルを使用する他のページで使用される関数を含むインクルードファイル
サーバーサイドのコードは、利用者が選択したスタイルシートのための通常のlink要素及び他のスタイル用の「alternate stylesheet」のついたlink要素を出力する。そのコードは、２つめの例にあるように、クライアントサイドのコードのフォールバックとして使用することもできる。
フォームを含むJSPページ:
コード例：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
%><%@include file="_jsp/styleswitch.jsp"%><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>スタイルを変更する</title>
<%
String fStyle = "";
String styleName = "style";
String defaultStyle = "default";
Cookie[] cookies = request.getCookies();
// get style from post request parameters
if (request.getMethod().equals("POST") && request.getParameter("styleSelect") != null) {
fStyle = request.getParameter("styleSelect");
// code that validates user input (security) not shown
if (fStyle.equals("nostyle")) { // user prefers no author style
} else { // user requests author style
out.println(createStyleLinks(fStyle).toString());
}
storeStylePreferenceCookie(request, response, fStyle);
} else if (request.getMethod().equals("GET")) {
// GET request; get style from cookie; else default style links
// get style from cookie
if (cookies != null) {
// get style from cookies
fStyle = getStyleFromCookies(cookies);
if ( !fStyle.equals("NULL_STYLE") ) { // user requests author style
out.println(createStyleLinks(fStyle).toString());
} else { // no cookie for style; process request for style preference
// default style links
out.println(createStyleLinks(defaultStyle).toString());
}
} else { // GET request without cookies: default styles
out.println(createStyleLinks(defaultStyle).toString());
}//end else cookies
}
%>
</head>
<body id="home">
<form action="_styleSwitch.jsp" method="post" id="styleswitchform" name="styleswitchform">
<p><label for="styleSelect">スタイルを選択: </label>
<select id="styleSelect" name="styleSelect">
<option value="default">デフォルト (緑)</option>
<option value="wonb">黒背景に白い文字</option>
<option value="bonw">白背景に黒い文字</option>
</select>
<input type="submit" value="スタイルを変更" />
</p>
</form>
</body>
</html>
上記ファイルにインクルードされる「styleswitcher.jsp」ファイル:
コード例：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%!
/**
* Get the links (link elements) to the CSS files based on cookies, ...
*/
private String getStyleLinks(HttpServletRequest request) {
String styleLinks = "";
Cookie[] cookies = request.getCookies();
String defaultStyle = "default";
String tempStyle = "";
// GET request; get style from cookie; else default style links
// get style from cookie
if (cookies != null) {
// get style from cookies
tempStyle = getStyleFromCookies(cookies);
if ( tempStyle.equals("NULL_STYLE") ) {
// no cookie for style; process request for style preference
// default style links
styleLinks = createStyleLinks(defaultStyle).toString();
} else { // user requests author style
styleLinks = createStyleLinks(tempStyle).toString();
}
} else { // GET request without cookies: default styles
styleLinks = createStyleLinks(defaultStyle).toString();
}//end else cookies
return styleLinks;
}
/**
* Get style cookie from request
*/
private String getStyleFromCookies( Cookie[] cookies ) {
String fStyle = "NULL_STYLE";
for (int i = 0; i < cookies.length; i++) {
Cookie cookie = cookies[i];
String name = cookie.getName();
if ( name.equals("style") ) {
fStyle = cookie.getValue();
// code that validates cookie value (security) not shown
}
}
return fStyle;
}
/**
* Store the style preference in a persistent cookie
*/
private void storeStylePreferenceCookie(HttpServletRequest request,
HttpServletResponse response, String theStyle) {
final int ONE_YEAR = 60 * 60 * 24 * 365;
Cookie styleCookie = new Cookie("style", theStyle);
styleCookie.setMaxAge(ONE_YEAR);
response.addCookie(styleCookie);
}
/**
* Create the link elements for the stylesheets
*/
private StringBuffer createStyleLinks(String prefStyle) {
StringBuffer theStyleLinks = new StringBuffer();
//two-dimensional array with identifiers (adding '.css' gives the name of the CSS file)
// and strings for the title attribute of the link element
// the identifiers must correspond to the in the "value" attributes in the "option"
// elements in the style switcher form
String [] [] styles = {
{ "default", "Default style"},
{ "wonb", "White on black"},
{ "bonw", "Black on white"}
};
// loop over 2dim array: if styles[i][1] matches prefStyle,
// output as normal, else as alternate stylesheet
for (int i = 0; i < styles.length; i++) {
if ( styles[i][0].equals(prefStyle) ) { // output pref stylesheet as normal stylesheet
theStyleLinks.append("<link rel=\"stylesheet\" href=\"_css/").append(styles[i][0])
.append(".css\" title=\"").append(styles[i][1]).append("\" type=\"text/css\" />").append("\n");
} else { // output other stylesheets as alternate stylesheets
theStyleLinks.append("<link rel=\"alternate stylesheet\" href=\"_css/")
.append(styles[i][0]).append(".css\" title=\"").append(styles[i][1])
.append("\" type=\"text/css\" />").append("\n");
}
} // end for loop
return theStyleLinks;
}
%>
他のJSPページは、以下のコード（include / scriptlet）を用いてこのコードを使用できる:
コード例：
<%@include file="_jsp/styleswitch.jsp"%><% out.println(getStyleLinks(request)); %>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
StyleSwitching - css-discuss
[削除ここまで]クッキーを通して利用者のコンピュータ上に情報を保管することによって、利用者による設定はページ全体に渡って永続的に保存しておくことができる。 この機能を利用するには、利用者のコンピュータでクッキーがサポートされており、かつその利用が許可されている必要がある。 クッキーは、Javascriptのようなクライアントサイドのスクリプト、またはCGIスクリプトのようなサーバーサイドのスクリプトを使用することで、作成・読み込み・変更・削除することができる。 クライアントサイドの実装に依存するということは、クッキーがサポートされその利用が許可されていることに加えて、利用者のコンピュータでその実装方法がサポートされており、かつ利用可能であることを要求することになる。
クッキーの生成と使用方法に関する情報はWeb上にある。以下にいくつかの参考となるページを示す。
コンテンツ制作者はクッキーをサポートしているかどうかのテストを行い、もしサポートされていなければ別のコントロールを提供することが推奨される。この別のコントロールには、「この設定をすべてのページに適用する」のような設定の有効化に関する情報が含まれるべきである。メッセージや別のコントロールの設定に応じて利用者に向けて表示されるページは、クッキーの動作環境とそれ以外の環境で利用できるオプションについての情報を提供する。 利用者がクッキーを有効にできない状況において、もし利用者がサイトの閲覧を継続することを選択した場合、それはどうなることを意味するのかということについての説明を含める。そしてクッキーをサポートしている場合と同様の結果を得るにはユーザーエージェントをどう設定すればよいかということについての情報を提供する。
例：「このブラウザはクッキーを受け付ける設定になっていません。このサイトでは、サイト内の全ページに渡って、あなたの変更した設定を適用するためにはクッキーが有効になっている必要があります。お使いの環境においてクッキーを有効にする方法については[ここから変更] How to Enable Cookies[変更ここまで]を参照してください。ただし、これを実行するためには、お使いのコンピュータにおける管理者の権限が必要となる場合がありますので注意してください。クッキーが利用できない場合、あなたの設定はこのサイト内の他のページも含めて保存されません。弊社では、この機能をコンピュータの性能に関わらず提供できるよう努力しておりますが、それが実現できるまでの間でも、各ページにおいて設定を変更することは可能です。」
HTMLまたはXHTMLページにおけるJavaScript実装のための現在のベストプラクティスは、構造及び表現からコンテンツの動作を分離させた形で使用することだ。「プログレッシブ・エンハンスメント」と「アンオブトルーシブJavaScript」という言葉は、ページの機能を向上させ、さらに良いものにするだけでなく、JavaScriptがサポートされていない場合でもコンテンツが機能し続けられるようにうまく作られているスクリプトを指す用語としてよく使用されている。
より詳しく知るための推奨される情報:
利用者が代わりの表示を選択できるようなコントロールがウェブページに含まれている。
そのコントロールで表示を変更できる。
結果として表示されたページは、元のページの「適合する代替バージョン」になっている。
上記のすべてを満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。