The W3C Cascading Stylesheets Working Group has published a new working draft of CSS Template Layout Module. According to the latter,
The styling of a Web page, a form or a graphical user interface can roughly be divided in two parts: (1) defining the overall “grid” of the page or window and (2) specifying the fonts, indents, colors, etc., of the text and other objects. The two are not completely separate, of course, because indenting or coloring a text influences the perceived grid as well. Nevertheless, when one separates the parts of a style that should change when the window gets bigger from the parts that stay the same, one often finds that the grid changes (room for a sidebar, extra navigation bar, big margins, larger images…), while fonts, colors, indents, numbering styles, and many other things don't have to change, until the size of the window becomes extreme.
The properties in this specification work by associating a layout policy with an element. Rather than letting an element lay out its descendants in their normal order as inline text or as blocks of text (the policies available in CSS level 1), the policy defined in this module, called template-based positioning, gives an element an invisible grid for aligning descendant elements.
Because layouts on the Web have to adapt to different window and paper sizes, the rows and columns of the grid can be made fixed or flexible in size.
The typical use cases for these properties include:
- Complex Web pages, with multiple navigation bars in fixed positions, areas for advertisements, etc.
- Complex forms, where the alignment of labels and form fields may be easier with the properties of this module than with the properties for tables and margins.
- GUIs, where buttons, toolbars, labels, icons, etc., are aligned in complex ways and have to stay aligned (and not wrap, for example) when the window is resized.
- Paged displays (e.g., printed media) where each page is divided in fixed areas for different kinds of content.
Template-based positioning is an alternative to absolute positioning, which, like absolute positioning, is especially useful for aligning elements that don't have simple relationships in the source (parent-child, ancestor-descendant, immediate sibling). But in contrast to absolute positioning, the elements are not positioned with the help of horizontal and vertical coordinates, but by mapping them into slots in a table-like template. The relative size and alignment of elements is thus governed implicitly by the rows and columns of the template. A template doesn't allow elements to overlap, but it provides layouts that adapt better to different widths.
The mapping is done with the ‘
position’ property, which specifies in this case into which slot of the template the element goes. The template itself is specified on the ‘display’ property of some ancestor of the elements to remap.
