alt-styles 代替スタイルシートを制御するweb component

TRY THIS NOW

実際に試してみる

このデモページではBootstrapとBootswatchを自由に切り替えることができます。

MARKUP

マークアップは通常の代替スタイルシートと同じで構いません。HTTPリクエストを減らす為に

<link href="alt_style.css" rel="alternate stylesheet" title="代替スタイルシート">

の代わりに

<link data-href="alt_style.css" rel="alternate stylesheet" title="代替スタイルシート">

とすることもできますが、ブラウザメニューからは変更できなくなります。詳しくはこのページのソースを御覧ください。

ソースを見る »

USAGE

distフォルダにあるalt-styles.htmlをimportします。好きなところに

<alt-styles></alt-styles>

を挿入します。
例：

<html>
  <head>
    <link href="http://example.com/path/to/file/alt-styles.html" rel="import">
  </head>
  <body>
    <alt-styles></alt-styles>
  </body>
</html>

web componentはChromeしかサポートしていないので、通常はpolyfillであるwebcomponents.jsも読み込みます。

OPTION

data-site

<alt-styles data-site="your_site_name"></alt-styles>

このようにdata-site属性にサイトの名前を設定すると、ユーザがスタイルシートを変更した際に自動的に設定を保存します。サイトの他のページに移動しても、自動的に保存した設定を読み込み、そのスタイルシートを適用します。(ブラウザがDOM Storageに対応している必要があります。)。localStorageのkeyはalt-stylesです。

data-expire

<alt-styles data-site="my_website" data-expire="600000"></alt-styles>

このようにdata-expire属性値に時間（単位はミリ秒）を設定すると、設定の自動保存の有効期限を決めることができます。600000だと10分後に設定が無効になります。data-siteが設定されていない場合は意味がありません。デフォルト値(無指定の場合)は10分(600000)になります。
上のdemoだと1分に設定してあります。
また、"-1"と設定すると期限を定めず、設定が保存されている限り有効です。

data-prefix

<alt-styles data-site="my_website" data-expire="600000" data-prefix="unique_"></alt-styles>

このようにdata-prefixを設定すると、localStorageのkeyに接頭辞を付けることができます。既にalt-stylesというkeyを他で利用している場合に利用します。通常は設定しなくてもよいです。同じようなものにdata-suffix属性があり、こちらは接尾辞を設定できます。

data-color

<alt-styles data-color="dark"></alt-styles>

このようにdata-colorに"dark"を設定すると色が黒っぽくなります。chromeで見難くなったのでオススメしません。こんな感じ

data-style

<link href="alt_style.css" rel="alternate stylesheet" title="代替スタイルシート" data-style="background-color:#DD4814;color:#FFF">

このようにlinkタグにdata-styleを設定すると、セレクトメニューのスタイルを変更できます。ゴチャゴチャするのであまりオススメできません。

API

via dom

data-title属性に代替スタイルシートのtitleを設定すると、そのスタイルシートに切り替えます。

document.querySelector("alt-styles").setAttribute("data-title", "Darkly");

via javascript

changeStyleメソッドを利用してスタイルシートを切り替えることができます。

document.querySelector("alt-styles").changeStyle("Superhero");

Custom Message

子要素を設定すると好きなメッセージが表示できます。

<alt-styles><p>ここに好きな<b class="text-primary">メッセージ</b>を入れてください</p></alt-styles>

これが下のようになります。

ここに好きなメッセージを入れてください

Browser Support

web componentsなので何もしないで動くのは今現在Google Chromeだけです。polyfillした状態で、Firefox 38で動作しました。恐らくIE9+でも動くと思われます。

Alternative Style Sheets!