HOME>WEBプログラム覚書>PEAR::HTML_CSSを使ってみる

PEAR::HTML_CSSを使ってみる

CSSを処理したり生成したりするためのPEAR::HTML_CSSを使ってみる。使う機会はあまりなさそうですが。

参照サイト

CSSファイルを変更

style.css

内容の取得変更するCSS

PHP

  1. <?php
  2. @CHARSET "utf-8";
  3.  
  4. h1 {
  5.     font-size: 160%;
  6. }
  7.  
  8. h2 {
  9.     font-size: 130%;
  10. }
  11.  
  12. h3 {
  13.     font-size: 130%;
  14. }
  15.  
  16. #html_css {
  17.    width: 300px;
  18.     height: 200px;
  19.     padding: 1em;
  20.     background: #CCCCCC;
  21. }
  22. ?>

テストコード

PHP

  1. <?php
  2. require_once 'HTML/CSS.php';
  3.  
  4. define('DIR_CSS', '/css/');
  5. $css_filename = DIR_CSS . 'style.css';
  6.  
  7.  
  8. // コンストラクタ
  9. $css = new HTML_CSS();
  10.  
  11. // test.cssの内容をパース
  12. $result = $css->parseFile($css_filename);
  13.  
  14. if (is_null($result)) {
  15.  
  16.     // 横幅変更
  17.     $css->setStyle('#html_css', 'width', '500px');
  18.  
  19.     //新しいセレクタの追加
  20.     $css->setStyle('#html_css_add', 'width', '200px');
  21.  
  22.     // 見出しをまとめて設定する
  23.  
  24.     // 既にCSS記述してあるhxを取得
  25.     $hxs = array_keys($css->grepStyle('/^h[1-6]$/'));
  26.     $group_selector = implode(', ', $hxs);
  27.  
  28.     if (!array_key_exists($group_selector, $css->toArray())) {
  29.  
  30.         // グループ化
  31.         $group_id = $css->createGroup(implode(',', $hxs));
  32.  
  33.         // グループに共通のスタイルを設定
  34.         $css->setGroupStyle($group_id, 'padding', '0px');
  35.         $css->setGroupStyle($group_id, 'font-weight', 'bigger');
  36.  
  37.         // PHP5系なら妥当性チェック可能
  38.         echo '<h4>Validate結果</h4>';
  39.         $message = array();
  40.         var_dump('結果は? ', $css->validate(array($css->toString()), $message));
  41.         var_dump('<pre>', $message, '</pre>');
  42.         echo '<hr />';
  43.  
  44.         // inVaildなので修正
  45.         $css->setGroupStyle($group_id, 'font-weight', 'normal');
  46.  
  47.         // 再度確認
  48.         echo '<h4>2回目:Validate結果</h4>';
  49.         var_dump('結果は? ', $css->validate(array($css->toString()), $message));
  50.  
  51.         // OKなので書き込むデータの確認
  52.         echo '<h4>書き込みデータ</h4>';
  53.         echo '<pre>';
  54.         echo $css->display();
  55.         echo '</pre>';
  56.  
  57.         echo '<hr />';
  58.  
  59.         // 上書き保存
  60.         $css->toFile($css_filename);
  61.  
  62.         // 1行にまとめて新規保存
  63.         $css->setSingleLineOutput(true);
  64.         $css->setLineEnd('');
  65.         $css->toFile(DIR_CSS . 'compress.css');
  66.     }
  67.  
  68. } else {
  69.     throw new Exception($result->getType() . '::' . $result->getMessage());
  70. }
  71. ?>
実行結果

Validate結果

string(13) "結果は? " bool(false) string(5) "

"
array(2) {
  ["errors"]=>
  array(1) {
    [0]=>
    array(6) {
      ["errortype"]=>
      string(11) "parse-error"
      ["context"]=>
      string(12) " h1, h2, h3 "
      ["property"]=>
      NULL
      ["uri"]=>
      NULL
      ["line"]=>
      string(1) "5"
      ["message"]=>
      string(235) "

                                Value Error :  font-weight (http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight)

                                bigger is not a font-weight value :
                            "
    }
  }
  ["warnings"]=>
  array(0) {
  }
}
string(6) "

"

2回目:Validate結果

string(13) "結果は? " bool(true)

書き込みデータ

@charset "utf-8";

h1, h2, h3 {
  padding: 0px;
  font-weight: normal;
}

h1 {
  font-size: 160%;
}

h2 {
  font-size: 130%;
}

h3 {
  font-size: 130%;
}

#html_css {
  width: 500px;
  height: 200px;
  padding: 1em;
  background: #CCCCCC;
}

#html_css_add {
  width: 200px;
}

一行にまとめたcompress.cssは下記のようになります。

PHP

  1. <?php
  2. @charset "utf-8";h1, h2, h3 { padding: 0px; font-weight: normal;}h1 { font-size: 160%;}h2 { font-size: 130%;}h3 { font-size: 130%;}#html_css { width: 500px; height: 200px; padding: 1em; background: #CCCCCC;}#html_css_add { width: 200px;}
  3. ?>

※Windows環境でグループとか使ってtoFile()で上書きすると結果がおかしくなる場合があるっぽい。

CMSとかジェネレータ作る時とかつかえそうです。あとは他のサイトの調査に使えます。

W3CのCSS確認

PHP

  1. <?php
  2. require_once 'HTML/CSS.php';
  3. $css = new HTML_CSS();
  4. $result = $css->parseFile(file_get_contents('http://www.w3.org/2008/site/css/minimum'));
  5. $message = array();
  6. var_dump('結果は? ', $css->validate(array($css->toString()), $message));
  7. ?>

実行結果

おっ!?vaildだw

投稿日 2009年11月22日 16:01
カテゴリ PHP
タグ PEAR | サンプルコード | テストコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1195

コメント

コメントする
Name
Email Address
URL