[JS]Javascriptの有効・無効でCSSを変更する

javascriptが無効の時、有効で使ってるCSSだと表示がおかしくなる場合の回避方法について。

最近作ったサイトが、コンテンツの表示をmootoolsで動かしていて(スライドとかで)、javascript無効にすると まったく見えない状態になってしまう。
XHTMLソースを変更しているわけではないので、CSSだけ変更すれば見れる状態になる。(CSS無効でもXHTMLだからそれなりに見れる)
というわけで、javascriptの有効・無効でCSSを変更する方法についてのメモ。

“[JS]Javascriptの有効・無効でCSSを変更する” の続きを読む

[CSS]overflowとpositionを使うとスクロールできなくなる(IE)

外の要素にoverflow:autoなどを指定し、中の要素にposition:relativeを設定したとき、IEではスクロールバーが出てもスクロールがされない。

IE6 bug with overflow and position:relative (2008-02-20)

どうやらバグらしい。
filter:alphaを使うときに、中の要素の透過防止にposition:relativeをするが、
そうするとoverflow:autoしてもスクロールしなくなってしまう。
回避策ないのかな…

[mootools]ボタンでスタイルシートを切り替える(Cookie使用)

mootoolsを使ってスタイルシートを切り替えるサンプル。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

ベースのCSSをlinkさせておいて、クリックでCSSファイルを切り替えるようにする。
ボタンをクリックしたときCookieを発行し、リロードしたら記憶させたCSSファイルを読み込んで表示する。
リロードしても選択したCSSを表示する動作になるが、Cookie読み込んだりAssetしたりというJavascriptの動作分だけ、CSSが切り替わるのにタイムラグが発生する。
Assetよりsrcだけ書き換えた方がいいのかも。

書き散らしたから汚い…

“[mootools]ボタンでスタイルシートを切り替える(Cookie使用)” の続きを読む

[mootools]ボタンでスタイルシートを切り替える

mootoolsで最近ブログに多いスタイルシート切り替えのサンプル。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

スタイルの違うファイルを3種類用意し、それぞれボタンを押すと切り替わるようにするもの。
このサンプルは記憶させないので、ページを開くたびにシートがデフォルトに戻る。

“[mootools]ボタンでスタイルシートを切り替える” の続きを読む

[mootools]ランダムスタイルシート

mootoolsでアクセスするたびにスタイルシートを変えるサンプル。
(ダウンロード時にRemoteのAssetsが必須)
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも

読み込みが始まってからランダムを実行するので、スタイルが適用されるまで数秒のタイムラグが発生する。
レイアウトのスタイルをlinkしといて、このランダムで上書きするのが妥当かも。

window.addEvent('domready', function(){
var style = ['style-a.css','css/style-b.css','css/style-c.css'];
var src = style.getRandom();
new Asset.css(src, {id: 'base'});
});

アクセス初回だけという制限も出来ると思うが、そもそもCSSをランダムにする必要があるのかは疑問。
どうせやるならボタン切り替えの方がいいと思うが、どっちにしても押し付けがましい気がして個人的にはあまり好きではない。

[CSS]float解除ハックClearFix

親要素にfloatが使えない場合の解決策として使われる超有名ハック。
これ考えた人尊敬するわ。

このハックを使う主なケース。

  • margin:0 auto;で中央配置にしてるブロック要素の中でfloat指定するものを配置する
    (親要素にfloat指定することが出来ない状態)
  • liやdt、dlにfloatかけたから手っ取り早くクリアしたい
  • clear:bothとか置けない。もしくは置くのが面倒。置くと美しくない

大概は親要素にfloat指定するか、下にclear指定しとけばおkだけど、たまにどちらも使えない場合がある。そんなときはこのハックを思い出すと幸せになれる。
使用するとIEで妙な隙間が出来る場合があるので注意。多分バグだろうけど。
“[CSS]float解除ハックClearFix” の続きを読む

[CSS]ユニバーサルセレクタ

XHTML+CSSコーディングする際なくてはならないもの。
CSSファイル作ったらとりあえず一番先頭に書いておくもの。
始まりに相応しいので最初はユニバーサルセレクタから。

ユニバーサルセレクタとはアスタリスクのことで、単独で使えばブラウザ表示エリア内の隙間(padding)や、h1、h2などの見出しタグについてるマージン(margin)など、ブラウザが独自に持ってるスタイルを全て消去出来る。

“[CSS]ユニバーサルセレクタ” の続きを読む