日向夏特殊応援部隊

俺様向けメモ

「display: none」によるPattern Driven CSS

HTML CSS

d:id:ZIGOROu:20070118:1169089995 で提唱したPattern Driven CSS(以下PDCで略す)ですけど、昨日ふと思いついた事です。
あとちょっと追記しました。

「display: none」によるパターンのフォーカス

例えば下記のようなHTMLがあるとする。

<body>
  <div id="content-root" class="section">
    <h1>Yet Another Hackadelic</h1>
    <ul id="global-navigation">
      <li><a href="" title="">最新の日記</a></li>
      <li><a href="" title="">日記一覧</a></li>
      <li><a href="" title="">日記を書く</a></li>
      <li><a href="" title="">管理</a></li>
      <li><a href="" title="">ログアウト</a></li>
      <li><a href="" title="">ヘルプ</a></li>
    </ul>
    <div id="entry-1" class="section archive">
      <h2>タイトル１</h2>
      <p>
        なんか適当な本文がだらだらある。
      </p>
    </div>
    <div id="entry-2" class="section archive">
      <h2>タイトル２</h2>
      <p>
        なんか適当な本文がだらだらある。
      </p>
    </div>
    <div id="entry-3" class="section archive">
      <h2>タイトル３</h2>
      <p>
        なんか適当な本文がだらだらある。
      </p>
    </div>
  </div>
</body>

でこの時、div.archiveのみにスタイルを当てようと考える。
しかもdiv.archiveがページの中でどのように配置されるかは後回しにする。

こう考えた時、今まではページを独自に作ると推奨してみた物の、自分でいざやってみたらもの凄い大変だったので、現実的では無いと感じたのですが、
以下のように「display: none」を使うと結構楽してリキッドレイアウトする枠組みが出来るかも。

#content-root h1 { display: none; }
#global-navigation { display: none; }
#content-root div.archive { display: none; }
#entry-1 { display: block; }

ここまでお膳立てしてあげれば、事実上htmlは、

<body>
  <div id="content-root" class="section">
    <div id="entry-1" class="section archive">
      <h2>タイトル１</h2>
      <p>
        なんか適当な本文がだらだらある。
      </p>
    </div>
  </div>
</body>

と言う事になる。

よって適宜htmlをCSSによってシンプルにしつつ、スタイルを定義して行くと分かりやすいかもなぁと思いました。
ちょっと試してみたけどなかなか良いです。

追記

はてブコメントで「ブラウザで見えなくなるだけじゃ？」ってコメントがあったんで、一応補足。
仰る通りなんだけども、やりたい事は特定のパターン以外、一時的に見ないと言う事。

サンプルのhtmlだと分かりにくいので、別の例にしてみると、

<body>
  <div id="main" class="section">
    <!-- 中身略 -->
  </div>
  <div id="local-navigation">
    <!-- 中身略 -->
  </div>
</body>

div#main, div#local-navigationで２段組みしたいとすると、

body { width: 100%; }
body > div#main { float: left; width: 80%; }
body > div#local-navigation { float: left; width: 20%; }

みたいな書き方になるけども、このノリで書いて行くと「body > div#main」、「body > div#local-navigation」ベースで具体的にセレクタ書いて行くのがほとんどの人の例だと思いますが、
div#local-navigationを一旦忘れて、なおかつ実際80%の割当であるdiv#mainも100%扱いに一時的にする。div#mainはbodyのclass属性に例えば「debug」などを適当に突っ込んで、

body.debug > div#main { width: 100%; }
div#local-navigation { display: none; }

とすれば一時的にdiv#mainだけ100%になるはずだから、このdiv#mainにだけCSSの記述を集中的に書けるかなと。

DBI-1.55は結構良さそう

Perl CPAN

DBI::Changes - List of significant changes to the DBI - metacpan.orgによれば、
今回は結構意欲的なバージョンアップのようですね。

パフォーマンス面

  1. Changed some handle creation code from perl to C code, to reduce handle creation cost by ~20%.
  2. Changed connect_cached and prepare_cached to avoid a FETCH method call, and thereby reduced cost by ~5% and ~30% respectively.

handleを生成するコードがperllからCになって、速くなったみたいですね。
それとconnect_cached, prepared_cachedも改善してるみたいです。*1

機能面

  1. Added more functionality to the (undocumented) Callback mechanism. Callbacks can now elect to provide a value to be returned, in which case the method won't be called. A callback for "*" is applied to all methods that don't have their own callback.
  2. Added $h->{ReadOnly} attribute.


callbackが実装されたみたいですね。面白そう。
ReadOnlyって言う属性も追加されたみたい。slaveなんかには敢えて立てておいた方が安全ですね。*2

*1:最もこのメソッドを使う事の是非は色々議論されてるみたいですけど

*2:最もslave用ユーザーに権限与えなければいいんですけど、念のため