Richard Knop's Zend Framework Blog » Web design

Zend Framework content negotiation plugin

Richard Knop — Sat, 10 Jul 2010 17:33:41 +0000

Even though most designers write nice and valid XHTML it usually gets served to browser as text/html. In other words, what browser sees is a chaotic tag soup instead of XML (remember that while HTML was based on SGML, XHTML is based on XML or it is a reformulation of HTML in XML). The major reason why XHTML pages are getting served as text/html is infamous Internet Explorer which does not support serving XHTML the correct way (as XML). But why should your website suffer because of one browser? You can serve the tag soup to IE and serve XML to other browsers. This is called content negotiation and I’m going to show you a simple Zend Fraemwork controller plugin that will negotiate different content to different browsers:

class My_Controller_Plugin_NegotiateContent extends Zend_Controller_Plugin_Abstract
{
public function preDispatch(Zend_Controller_Request_Abstract $request)
{
$viewRenderer = Zend_Controller_Action_HelperBroker::getExistingHelper('ViewRenderer');
$viewRenderer->initView();
$view = $viewRenderer->view;
// content negotiation
header('Vary: Accept');
if (false === stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml')) {
header('Content-Type: text/html; charset=utf-8');
$view->doctype('HTML4_STRICT');
$view->headMeta()->appendHttpEquiv('Content-Type', 'text/html; charset=UTF-8');
$view->xhtmlAllowed = false;
} else {
header('Content-Type: application/xhtml+xml; charset=utf-8');
$view->doctype('XHTML1_STRICT');
$view->headMeta()->appendHttpEquiv('Content-Type', 'application/xhtml+xml; charset=UTF-8');
$view->xhtmlAllowed = true;
}
}
}

This plugin will serve HTML 4.01 Strict as text/html to IE and XHTML 1.0 Strict as application/xhtml+xml to other browsers.

The only thing you need to do is to register the plugin to the front controller during bootstrapping:

$frontController->registerPlugin(new My_Controller_Plugin_NegotiateContent());

And it will take care of content negotiation. The plugin will also set a boolean view variable $view->xhtmlAllowed so you can use different markups in layouts and views if needed ( in HTML and in XHTML).

Zend Framework IE conditional stylesheets and scripts

Richard Knop — Fri, 05 Mar 2010 21:27:17 +0000

You can append a conditional stylesheet in a controller action like this:

$this->view->headLink()->appendStylesheet('/path/to/some/styles.css', 'screen', 'IE 8');

Which would produce this markup:

Adding a conditional JavaScript file is similar:

$this->view->headScript()->appendFile('/path/to/some/script.js', 'text/javascript', array('conditional' => 'IE'));

And that would produce markup like this:

It can pretty useful when you need to use IE conditional comments just for a single controller action. Otherwise, if it applies site-wide, it’s better to just put conditional stylesheets and/or scripts in a layout file.

Rounded corners menu

Richard Knop — Fri, 29 May 2009 14:35:55 +0000

Rounded corners menu is very popular in modern designs and it’s handy to know how to achieve it with a simple CSS applied on a semantic XHTML markup. First, here is the markup:


    Home
    About
    Services
    Portfolio
    Contact
    Blog

Quite simple. The only thing that’s not right there are span tags – those are there because it’s the easiest way to add a hover effect (such as color change) to the rounded menu links.

Here are images I used:

The CSS I used:

.rounded li {
    display: inline;
}
.rounded a {
    float: left;
    height: 43px;
    margin-right: 1em;
    background: url('rounded-left.gif') left top no-repeat;
    color: white;
    line-height: 43px;
}
.rounded span {
    float: left;
    height: 43px;
    padding: 0 1em;
    background: url('rounded-right.gif') right top no-repeat;
}

To add the hover effect I used another two images (different only in color):

And two additional styles:

.rounded a:hover {
    background: url('rounded-left-hovered.gif') left top no-repeat;
}
.rounded a:hover span {
    background: url('rounded-right-hovered.gif') right top no-repeat;
}

Here is the demo. Tested in following browsers:

IE6, IE7
Firefox
Opera 9.64
Chrome 1.0.154.65

You will need to clear the floats after the menu though. I usually do it by adding an additional class to the next element:

.clear {
    clear: both;
}