How to write ZPT to render correct XHTML

Revision: $Id$

Contents

1   Do XHTML Transitional 1.0 or die

  1. Check empty tags. Change:
    • <meta ...> into <meta ... />
    • <link ...> into <link ... />
    • <br> into <br />
    • <hr> into <hr />
    • <input ...> into <input ... />
    • <img ...> into <img ... />
  2. Check unvalued attributes:
    • <... selected> into <... selected="selected">
    • <... checked> into <... checked="checked">
  3. Use lowercase tag name and attributes. Change:
    • <form method="POST" ...> into <form method="post" ...>
    • <form method="GET" ...> into <form method="get" ...>
    • All your tags should be in lowercase (this is good for compression).
  4. Names must be a single token. Change:
    • <... name="foo bar"> into <... name="foo_bar">
  5. Make http://validator.w3.org/ your homepage and use it.
  6. Limitation: Some attributes are not available in XHTML:
    • colspan
    • onclick
    • ?

We keep them for the moment until we know how to remove them.

2   XHTML and nuxeo CSS

  1. Give up the following attributes:

    • color=
    • bgcolor=
    • font=

    Even style="" is a problem. You should think of adding a new CSS class.

  2. Any form should be like the following:

    All input should be grouped using class="group". Use row/label and field classes for the layout. Example:

    <form method="post">
    <div class="group">
    
      <div class="row">
        <div class="label">foo</div>
        <div class="field"><input type="text" ... /></div>
      </div>
    ...
      <div class="row">
        <div class="field">
           <input type="submit" class="context">
        </div>
      </div>
    
    </div>
    </form>
    
  3. Inputs:

    • Radio, checkbox should always use class="noborder".
  4. Buttons:

    • Submit can be:

    • The main action of the form should be class="standalone"

    • Sub action should be class="context"

    • A delete action should be class="destructive" with a js confirm window Example:

      <input type="submit" value="button_delete"
        class="destructive" i18n:attributes="value"
        tal:attributes="onclick python:'return window.confirm(\'%s\')' %
                       (cpsmcat('description_confirm_delete'), )" />
      
  5. Heading:

    • The title of the page must be in <h1>.
    • Do not jump to <h3> without using <H2>.
  6. Table:

    • Always add a summary attribute saying if it is a layout or a listing table (shame on you if it is a layout). Example:

      <table summary="3 col layout">
      
    • If you have headers, use <th>.

  7. To display a list of properties in 2 columns, use something like:

    name: ...
    firstname: ...
    

    Think of using <dd> and <dt>, hope to have an example in CPS soon.

  8. Copy stuff:

    • For an example, take a look at what was done in CPSDefault/Document/Schema/Directory.
  9. Miscellaneous:

    • For all other questions ask our local experts: Marc-Aurèle and Emmanuel.