タグ : CSS

float を解除する 3つの方法


http://whisper.sakura.ne.jp/diary/2009/06/cssfloat.html
すぐ忘れるのでメモ。
空タグを使わない方法については float する対象をコンテナで囲むのは共通。
コンテナに対して clearfix (:afterに見えない要素を置いてそこでclearする)を使うか、
overflow:hidden をかけるかの2パターン。
 
参考:
- floatのclearについて
図解で分かりやすいです。
- clearは「floatの解除」ではない

各ブラウザのスタイルシートデフォルト値


Internet Explorer User Agent Style Sheets
IE6,IE7,IE8,IE9と、Firefox,Webkit,Opera の最新版のデフォルトスタイルシート。
特にIEについては比較表になっていて便利です。

table から div へ


  .tr{ clear:left; }
  .td{ float:left; }

と指定すれば、

 <div class=”tr”>
     <div class=”td”>foo</td>
     <div class=”td”>boo</td>
 </div>

のように簡易的に列揃えの疑似テーブル構造ができます(行揃えはなし)。
過渡期の置き換え作業の際はこのように td, tr クラスを作るのもいいかもしれません。
 
参考:
- CSS による段組(マルチカラム)レイアウト講座
- CSSリファレンス(実験室:P)
- テーブルを使わずにCSSでいこう

IE と Firefox の互換性を高める


全要素指定でデフォルト値を与えてやれば多少はましになるそうで。

 * {
    margin: 0;
    padding: 0;
    /* border-width: 0; */
    font-size: 100%;
    font-style: normal;
    font-weight: normal;
    text-indent: 0;
 }

CSS バグ辞典


http://members.at.infoseek.co.jp/cssbug/index.html
特に IE について、けっこうな量の不具合があるのだなぁと改めてびっくりです。
例えば vertical-align 周りの動作の怪しさはずっと気になっていたので、検証コードで確認できてすっきりしました。
参考:
- CSS テクニックコミュニティ(mixi)

StyleSheet on JavaScript


document.createStyleSheet(“javascript:’body{background:blue;}’”);

みたいな記法があるそうな。
createStyleSheet メソッドで、ファイルの URI として、単に body{background:blue;} というテキストを表現する javascript:’body{background:blue;}’ という文字列を渡して、それをドキュメントのスタイルシートとして適用する、という流れ。

javascript:’…’

という記法は知らなかった。
<http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/references/methods/createStyleSheet.htm>
- Microsoft: Dynamic HTML: createStyleSheet
<http://chaichan.hp.infoseek.co.jp/qa5000/qa5032.htm>
- 不思議な指定? javascript:’css〜’について

CSS で JavaScript を実行する(IEのみ)


expression(<expr>);
ex:
color: expression(“re”+”d”);
XSS を許すのでタグを許す場合 style 属性で呼び出されないように注意.