Good CSS developers will often create a general stylesheet for
sitewide styles, and individual stylesheets for specific sections or pages of the
website, and load these latter conditionally so as to decrease the amount of data
needing to be transferred on each request. The headLink()
placeholder makes such conditional aggregation of stylesheets trivial within your
application.
To accomplish this, headLink() defines a number of "virtual"
methods (via overloading) to make the process trivial. The ones we will be concerned
with are appendStylesheet() and
prependStylesheet(). Each takes up to four arguments,
$href (the relative path to the stylesheet),
$media (the MIME type, which defaults to
"text/css"), $conditionalStylesheet (which can be used to specify a
"condition" under which the stylesheet will be evaluated), and
$extras (an associative array of key and value pairs, commonly used
to specify a key for "media"). In most cases, you will only need to specify the first
argument, the relative path to the stylesheet.
In our example, we'll assume that all pages need to load the stylesheet located in
"/styles/site.css" (relative to the document root); we'll specify
this in our _initPlaceholders() bootstrap method.
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
// ...
protected function _initPlaceholders()
{
$this->bootstrap('View');
$view = $this->getResource('View');
$view->doctype('XHTML1_STRICT');
// Set the initial title and separator:
$view->headTitle('My Site')
->setSeparator(' :: ');
// Set the initial stylesheet:
$view->headLink()->prependStylesheet('/styles/site.css');
}
// ...
}
Later, in a controller or action-specific view script, we can add more stylesheets:
<?php $this->headLink()->appendStylesheet('/styles/user-list.css') ?>
Within our layout view script, once again, we simply echo the placeholder:
<?php echo $this->doctype() ?>
<html>
<?php echo $this->headTitle() ?>
<?php echo $this->headLink() ?>
<!-- ... -->
This will generate the following output:
<link rel="stylesheet" type="text/css" href="/styles/site.css" /> <link rel="stylesheet" type="text/css" href="/styles/user-list.css" />