Hatena::ブログ(Diary)

Yet Another Hackadelic

2007-08-17 息苦しい感

CSSTidyをCygwinから使う為のシェルスクリプト

CSSTidyとは

ググってくだしあ。。。

じゃあれなんで、簡単に説明すると、

  • CSSの圧縮してくれる
  • CSSの整形してくれる

って感じのコマンドラインツール。

多分みんな俺ルールみたいのでプロパティのソートとかしてるだろうけど、

もうそういうのは頭使わずPCに任せる方向でね。

使う前に

Cygwinでビルドできるかと試してみたんだけど、どうも無理っぽぃのでバイナリ版落としてきましょう。

当然ながらWindows用になってるんで、パスの変換が必要。

あと何故かこのツール、オプションにセミコロンが付く物があって余りにイケてない感があるので、そのところもちょっと直した。

ソース

#!/bin/sh

ARGS=""
CSSTIDY="/usr/local/bin/csstidy"

while 
  case $# in
      0)  false;;
      *)  true;;
  esac
do
    arg="$1"; 
    shift;
    case $arg in
        --allow_html_in_templates|--compress_colors|--compress_font-weight|--discard_invalid_properties|--lowercase_s|--preserve_css|--remove_bslash|--silent|--sort_properties|--sort_selectors|--timestamp|--merge_selectors|--case_properties|--optimise_shorthands|--template) 
            ARGS="$ARGS=$1"; shift
            ;;
        --remove_last_semicolon)
            ARGS="--remove_last_;=$1"; shift
            ;;
        --help)
            cat << EOF
Usage: csstidy input_filename [
 --allow_html_in_templates=[false|true] |
 --compress_colors=[true|false] |
 --compress_font-weight=[true|false] |
 --discard_invalid_properties=[false|true] |
 --lowercase_s=[false|true] |
 --preserve_css=[false|true] |
 --remove_bslash=[true|false] |
 --remove_last_semicolon=[false|true] |
 --silent=[false|true] |
 --sort_properties=[false|true] |
 --sort_selectors=[false|true] |
 --timestamp=[false|true] |
 --merge_selectors=[2|1|0] |
 --case_properties=[0|1|2] |
 --optimise_shorthands=[1|2|0] |
 --template=[default|filename|low|high|highest] |
 --help | 
 output_filename ]
EOF
            exit 0;
            ;;
        *)
            ARGS="$ARGS "`cygpath -w $arg`
            ;;
    esac
done

$CSSTIDY $ARGS

バイナリを /usr/local/bin/csstidy.exe として保存してある物と仮定。

んでこのシェルスクリプトを/usr/local/binよりも優先度の高い所にぶち込んでおけば多分OKだと思われます。

Cygwin使いはcygpathは知っといた方がいいです。

参考とか

2007-05-07 GWが明けると五月病の開始

「display: none」によるPattern Driven 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>タイトル1</h2>
      <p>
        なんか適当な本文がだらだらある。
      </p>
    </div>
    <div id="entry-2" class="section archive">
      <h2>タイトル2</h2>
      <p>
        なんか適当な本文がだらだらある。
      </p>
    </div>
    <div id="entry-3" class="section archive">
      <h2>タイトル3</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>タイトル1</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で2段組みしたいとすると、

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の記述を集中的に書けるかなと。

2007-02-22 画像作成って難しいでつ

デブサミ2007出張Shibuyaイベントの資料を公開します

ってバタバタしててなかなか公開出来ずにいた資料ですが、下記に公開します。

CSS Study Meeting Digest & Perl/CSS

本当は結構突っ込んだネタとかやりたかったんですけど、LTって事なんで圧縮させて見ました。w

CSSってPerlに取っては未開拓なゾーンなんでネタとしては面白いと思います。

追記

わかりやすくTAKESAKOさんのまとめページにトラックバック打ってみました。

2007-01-18 あともうちょっと

新春CSSかくし芸大会の資料を公開します

2007 CSS Study Meetingの資料を公開します。

資料はこちらです

Pattern Driven CSS (pdf)

ざっくりした内容

Web design patternの発展みたいな奴です。

どんな風にサイトの設計を行うのかCSSの観点から考えた手法です。

2007-01-16 日付が変わりました。えっくしょん

CSS Hacks まとめ (10) Owen Hack

はじめに

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

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のようですね。

カスケード処理について

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

  1. Assigning property values, Cascading, and Inheritance
  2. 値の割り当て、カスケード処理、継承
  3. NOT_FOUND 404
  4. CSS解説 -移転のお知らせ-

ここら辺がソース。

追記

今日、会社の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の如何なるセレクタも、仮に同じセレクタだとしても詳細度ってのはあくまで相対的な値になるだけみたいですね。*2

出現順

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

まとめ

んー、ちょっと今度もう少し詳しく書くですよ。

!importantとかも割り込んでくるので、もう少し丁寧に調べないとですね。

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

はじめに

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 まとめ (8) High pass filter

はじめに

ソースはこちら

  1. High Pass Filter
  2. NOT_FOUND 404

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

どんな物か

  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 まとめ (7) lone star hack

はじめに

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

  1. no title

使い方

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

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

まとめ

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

CSS Hacks まとめ (6) star html hack

追記(重要)

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

詳しい解説キボン

はじめに

  1. Under Construction | Best Seller
  2. Under Construction | Best Seller

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

使い方

&#42; html{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

まとめ

IE7でもstar html hackは有効みたいですね。*3

従って現在でも便利なHackって言えそうです。


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

CSS Hacks まとめ (5) Box model hack

はじめに

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

  1. Under Construction | Best Seller
  2. NOT_FOUND 404
  3. サービス終了のお知らせ - Yahoo!ジオシティーズ

標準の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. Hello! My Name Is 404│hxxk.jp
  2. no title

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

CSS Hacks まとめ (4) Anti NN4 Selectors Hack

はじめに

これはNN4がセレクターの後にコメントブロックを書くと、そのセレクタ自体が無効になるよってバグを利用した部分的にスタイルを隠す技です。

仕組み

html /* rest of selector */ {
    /* Nav4 alone ignores these rules */
}

まとめ

要らないYO!

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

*2:thanks id:amachang, id:cho45

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