2012年1月26日木曜日

Zend HeadLink ヘルパーでコンディショナルCSS

ZendViewヘルパーを使って<head>タグや<meta>タグを管理すると嬉しいことが一杯。

・layoutファイルがすっきりする(場合によっては全てのmoduleに同じlayoutファイルを適用できるようになる)
・ベタ書きしてれば微妙に大変な<title>の変更なんかも一発
・コントローラで設定すれば、継承してサブクラスでどんどんappendできる

CSSのlink設定でのTipsをメモ。

標準的には以下のような感じで設定。

Controllerで設定
{
public function preDispatch()
{
    parent::preDispatch();
    $this->view->headTitle('MyWEB', 'SET');
    $this->view->headLink()->appendStylesheet($this->view->baseUrl('path_to_css/css1.css'))
                           ->appendStylesheet($this->view->baseUrl('path_to_css/css2.css'));
    $this->view->headMeta()->setCharset('UTF-8'); //こんなのはbootstrapとかどこか固定で設定してもいい
}
Viewで出力
<?php echo $this->doctype(); ?>
<html>
<head>
<?php echo $this->headTitle() ?>
<?php echo $this->headMeta() ?>
<?php echo $this->headLink() ?>
<?php echo $this->headScript() ?>
</head>
<body>

コンディショナルな指定をする場合。
例えばIE7だけで適用するCSSの設定。

こんな感じ。
public function preDispatch()
{
    parent::preDispatch();
    $this->view->headLink()->appendStylesheet($this->view->baseUrl('path_to_css/common.css'))
                           ->appendStylesheet($this->view->baseUrl('path_to_css/ltIE7.css'), 'screen', 'lt IE 7');
    // <!--[if lt IE 7]> <link href="/path_to_css/ltIE7.css" media="screen" rel="stylesheet" type="text/css" ><![endif]-->
}

参考)
Zend Viewヘルパー

0 件のコメント:

コメントを投稿