expressionについて（追加情報）

関連記事：javascriptの荒波に

この記事から引き続きexpressionについて調べていたのですが、オライリーの本でexpressionについて触れてあるのを発見し、早速（Amazonで）購入ー。届くまでの間にもう少し調べたら、Web上でもオライリーの情報が少しのっていて、テストサイトなんかもありました。これはありがたい。

http://www.marlin-arms.com/support/hpws/index7.html
驚きなのは、リンク先にある「CSS expressionを使ったカウンタ」。
expressionが評価されるたびに数が増えていくのですが、増え方ハンパ無さ過ぎ。「増え方すごいよ。ほんとだよ」とは言われていたものの、確かにこりゃ重くなるなと納得の数値です。お試しあれ。
これ見たらますますイベントハンドラの必要性を感じました。

今expression絡みで困ってること。
・expression直下でwindow.onresizeが使えるかどうか
・window.onresizeだけで初表示時はだいじょーぶなのかどうか
悩みがふえた（-ω-；）

expressionについてはこちらも詳しくて参考になります。ありがたやー。
ダイナミックプロパティ expression() のまとめ （Snow-Materiaさん）

javascriptの荒波に

Webサイトの高速化 ルール7　CSSのExpression()は使わない!
ここの記事によると、expressionを使うとあらゆるイベントに対して評価が行われ、動作が遅くなってしまうのだそうです。

Nefertのテンプレートではmin-width・max-widthをIE6で適用させるためにexpressionを使っているのですが、この情報を元にイベントハンドラをつかってみよーと思ったのでした。

が、いかんせんjavascriptの知識は皆無に近いもんで(；'-')
あってるのかどうなのかすら分からない状態になってしまいました…(；'-')

expression内のjavascriptの記述はこんな感じです。
意図としては、ウィンドウサイズが変化したときにウィンドウサイズによってwidthを指定するという感じなのですが…

window.onresize = ( 
           (document.documentElement.clientWidth > 1150)? "1150px" :
           (document.documentElement.clientWidth < 600)? "600px" :
           "auto")

javascriptに強い方、これってどーなんでしょうか。
ウィンドウサイズが変化したときだけではなく、ページを最初に読み込んだときにも幅を指定する必要があるので、onloadとかで入れ子？条件分け？したほうがいいのでしょうか。
一応動作確認した段階では問題なさげなのですが…(-ω-;)

問題なければこれを全テンプレートに適用させたいなと思いますー。

ソースコードのHTML化(08/05/01更新)

NefertではソースコードやらHTMLやらCSSやらの表示には、ソースコードHTML化コンバーター「唐辛子」を利用しています。
「唐辛子」はソースコードをコピー&ペーストして変換ボタンを押すだけでOKという手軽さと、変換後はCSSファイルで見た目を調整できるという自由度が魅力。ソースコードを見やすくするスクリプトを使う方も多いですが、あんまりゴテゴテさせたくなかったのでこちらを使うことにしました。

Nefertで使っているソースコード用CSSはこんな感じです。

pre.code {
    border          : 1px dotted #aaa;
    background-color    : #f5f5f5;
    background-image    : url("http://blog73.fc2.com/r/rimse/file/code_background.png");
    background-repeat   : no-repeat;
    background-position : left top;
    padding         : 30px 2% 25px;
    width           : 95%;
    font-size       : 12px;

}
@media screen {/* この中をMacIEは無視する */
pre.code {
    overflow        : auto;
    *overflow-x     : auto;
    *overflow-y     : hidden;
}
}
pre.code.html {
    background-image    : url("http://blog73.fc2.com/r/rimse/file/html_background.png");
}
pre.code.css {
    background-image    : url("http://blog73.fc2.com/r/rimse/file/css_background.png");
}
pre.code.javascript {
    background-image    : url("http://blog73.fc2.com/r/rimse/file/javascript_background.png");
}
pre.code span.tag       { color: #00f; }
pre.code span.attr      { color: #000; }
pre.code span.value     { color: #900; }
pre.code span.str       { color: #090; }
pre.code span.num       { color: #090; }
pre.code span.keyword   { color: #00f; }
pre.code span.rem       { color: #909; }

ソースコードのカラーリングは唐辛子標準のものを使用。
手動でpreのclassにhtml、css、もしくはjavascriptと記入すれば、上部の文字が「HTML」、「CSS」、「Javascript」になります。指定無しだと「CODE」。
もし使いたいよーという方がいらっしゃいましたらご自由にどうぞ(*＾-')ｂ→source.css

border-styleのブラウザ間の差（私的メモ）

ブラウザのレンダリングエンジンの違いによって、同じCSSでも微妙に表示に差が生じるというのは良くあることですが、個人的に気になったborder-styleのブラウザ間の違いをまとめてみました。


クリックで元サイズ表示。

メインマシンがWindows2000なので、XP以上にしか対応していないInternetExplorer7やらSafari(Windows版)やらは今回は除外しています。スクリーンショット撮影サービス使えばメインマシン上でも撮影できますが、簡単に言うと面倒だったので…。

比較的よく使われる値は「solid」「dashed」「dotted」でしょうか。「solid」に大した差が無いのは当たり前として、「dashed」はブラウザ間の差はほぼ無し。「dotted」はブラウザ間の表示の差が大きいようです。
InternetExplorer6では「dotted」は「dashed」とほぼ同じ表示になってしまっている（これはおそらくborder-widthが1pxの場合）ほか、Firefox・Opera間でもドットの間隔にわずかながら差が生じています。
ほんの些細な差とも言えますが、こだわる人にとっては少し面倒な問題ですね。

最近はボーダーに1ピクセルごとにドットが打たれた点線（ )を使いたいがために、border-styleプロパティでの指定ではなく、backgroundで背景にボーダーの画像を指定するようになりました。ただこれだと要素の四方のうちの一方のみにしかボーダーを指定できないというどうしようもない弱点もあり、最終的にborderプロパティも使うことに。そうすると最初からborderプロパティで全部指定した方が良いんじゃないかと思ってしまいます。うーん。


結論：気にしないのが一番。


追記部分にはテストに用いたHTMLを載せておきますね(*'-')ノ。

→ [border-styleのブラウザ間の差（私的メモ）]の続きを読む