日向夏特殊応援部隊

俺様向けメモ

カスケード処理について

CSS

ってもこれCSSな人には常識なのか？

  1. Assigning property values, Cascading, and Inheritance
  2. 値の割り当て、カスケード処理、継承
  3. http://www6.plala.or.jp/go_west/nextcss/ref/basic/cascade.htm
  4. http://anslasax.net/css-make/cascade.html

ここら辺がソース。

追記

今日、会社のCSS勉強会があってそれの資料作ったので後ほど公開しまっする。
んでもってカスケード処理についても言及したので、興味のある人は見て下さい。

カスケード順位の定義

大まかに分けると次の4つの要素が問題となる。

  1. 媒体型(media type)
  2. 出所(誰が作ったスタイルか)
  3. 詳細度
  4. 出現順

で、適用される重みもこの順番。

出所について

つまりはこういう事です。

文書作成者のスタイル > ユーザースタイル > デフォルト

最重要宣言がある場合はユーザースタイルの方が優先になります。

詳細度

  1. セレクタ内の一意属性を数え上げ、その数を「a」とする。
  2. 他の属性及び擬似クラスを数え上げ、その数を「b」とする。
  3. 要素名を数え上げ、その数を「c」とする。
  4. 擬似要素は無視する。

で例えば10進法で詳細度を計算するならば、
上の桁を超えない十分大きな基数で計算すると、

(詳細度) = a * MAX(a, b, c)^2 + b * MAX(a, b, c) + c

で算出出来るみたいです。これ、如何なるCSSの如何なるセレクタも、仮に同じセレクタだとしても詳細度ってのはあくまで相対的な値になるだけみたいですね。*1

出現順

パースされた順番ですね。

まとめ

んー、ちょっと今度もう少し詳しく書くですよ。
!importantとかも割り込んでくるので、もう少し丁寧に調べないとですね。

*1:thanks id:amachang, id:cho45

CSS Hacks まとめ (5) Box model hack

CSS

はじめに

まずは下記のページ辺りがソースでございます。

  1. http://css-discuss.incutio.com/?page=BoxModelHack
  2. http://www6.plala.or.jp/go_west/nextcss/tip/trans/boxmodelhack_jp.htm
  3. 基礎編2 ボックスモデルとDOCTYPEスイッチ

標準のbox modelって言うのは、width, heightはcontent areaのみの大きさを決めて、margin, padding, borderと言うのはcontent areaの大きさには影響を与えません。しかしIE6の互換モードやIE6以前では解釈が異なる為にこのHackは存在します。

どんな風に解釈が異なるかと言えば、padding, borderの幅がwidth, heightの中に含まれるようなイメージとなってしまって、指定したwidth, heightからpadding, borderの幅を引いた値が実際のcontent areaになっちゃうよって話です。

解説は割愛w

これ長いので上記のリンク先見て下さい。
基本的にはあの手この手でwidth, heightをIEの時だけ書き換えるって感じですね。

まとめ

標準モードを使えば解決。今さら互換モードなんて使わないでしょう。

  1. http://hxxk.jp/2006/12/19/2100
  2. http://miniturbo.org/blog/2006/10/26/2359

ここらへんも合わせて読むと吉。

CSS Hacks まとめ (6) star html hack

CSS

追記(重要)

miniturboの中の人が言うにはOpera9とかにも当たっちゃうらしいです。
詳しい解説キボン

はじめに

  1. http://css-discuss.incutio.com/?page=StarHtmlHack
  2. http://css-discuss.incutio.com/?page=EmulatingFixedPositioning

「* html」からセレクタ指定するとIEでしか当たらないスタイルを書く事が出来ますよってHackです。

使い方

* html{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

こんな風にするとMac, Windows共にIEだけで適用されます。

まとめ

IE7でもstar html hackは有効みたいですね。*1
従って現在でも便利なHackって言えそうです。


なんか段々適当になってきた。w

*1:http://miniturbo.org/blog/2006/10/26/2359

CSS Hacks まとめ (7) lone star hack

CSS

はじめに

IE5(WinとMacのclassic)だけに適用されるHackです。

  1. http://www.media451.com/experiments/css/hacks/ie_star.html

使い方

.loneStarHack {
    background-color: #ff0000;
    * background-color: #060; 
}

ってやると*がついたプロパティで上書きが出来ます。

まとめ

うーん、今さらIE5ってのもなぁ。

CSS Hacks まとめ (8) High pass filter

CSS

はじめに

ソースはこちら

  1. High Pass Filter
  2. http://www6.plala.or.jp/go_west/nextcss/tip/trans/highpass_jp.htm

特に２番めの和訳を一読すると何かってのはすぐ分かるはず。

どんな物か

  1. IE5/Mac or later
  2. IE6/Windows or later
  3. Netscape 6 or later
  4. Opera 5 or later

ならばそれ以下のスタイルが正しく適用される、逆に言えばそれ以前のブラウザでは無視されると言ったHackです。

具体的には、

<link rel="stylesheet" href="highpassfilter.css" />

のようにhighpassfilter.cssを読み込み、このCSSファイルの中で

@import "null.css?\"\{"; 
@import "highpass.css";

と記述するとhighpass.cssを正しくimportするのは上記のブラウザですよって内容。

まとめ

便利っちゃ便利だけど@import hackだけで十分な気がする。

CSS Hacks まとめ (9) Inline high pass filter

CSS

はじめに

d:id:ZIGOROu:20070116:1168900766のinのinline版です。

  1. http://www.tantek.com/CSS/Examples/inlinehpf.html

どんな物か

<style type="text/css">
p.attention { background:yellow }
i{content:"\"/*"}
p.attention { background:lime }
</style>

i要素に当ててるルールのcontentの中身が誤解釈されて古いブラウザだとそれ以降のスタイルが当たらないよって事。

背景がlimeになるのが、

  1. IE5/Mac or later
  2. IE6/Windows or later
  3. Netscape 6 or later
  4. Opera 5 or later

です。

まとめ

場合によっては使えるかもしれないですな。

CSS Hacks まとめ (10) Owen Hack

CSS

はじめに

あと、普段は事実上使えないセレクタについてどうしても知識が必要です。
Adjacent sibling selectorsと言う隣接セレクタです。

ここら辺が分かりやすくて吉です。

仕組み

まぁ下記のようなCSSですね。Opera6以下とIE6/winでは見えないルールを定義したい場合に使うみたいです。

/* the following selector is seen by EVERY browser */
.myClassSelector {
    background-image: none
}
/* the Owen hack -- http://www.albin.net/CSS/OwenHack.html */
/* the following selector is NOT seen by Opera 6 (and below) or by IE6/win */
head:first-child+body.myClassSelector {
    background-image: url("regularImage.png");
    background-attachment: fixed;
}

でこの隣接セレクタをサポートしてるかしてないかって問題でして、上記のブラウザはサポートしてないので使ってる部分は普通に無視される訳です。

合わせ技1(Operaのみで適用したい)

これも古い情報なので現在どの程度有効かちと不明

/* be nice to Opera... um, maybe not. */
html>body div.myDiv { color: red; }
/* the Owen hack -- http://www.albin.net/CSS/OwenHack.html */
head:first-child+body div.myDiv { color: black; }

child selector(>)はIE6以下はサポートしておらず、Operaはサポートしてるんで、結果としてdiv.myDivはOperaでは赤く見えるヨって事。

これ"be nice to Opera" hackって言うらしいです。

合わせ技2(Opera6にのみ適用したい？)*1

"be nice to Opera"に組み合わせて"Be Mean to Opera" hackってのを使うと出来るみたいです。

/* The "be nice to Opera" rule */
html>body div.myDiv {
    c\olor: red; /* now be mean to Opera 6 using the "simplified box model hack" (i.e. Tantek's hack) */
}
/* the Owen hack -- http://www.albin.net/CSS/OwenHack.html */
head:first-child+body div.myDiv {
    color: black;
}

g-zまでの文字の直前を「/」でエスケープするとOpera5以前ではスルーされるよってバグを付いたHackのようですね。

*1:ここの原文、間違ってる気がする。どうでしょ？