At the Web Directions South conference in Sydney on Friday, Jina Bolton presented "Creating Sexy Style Sheets", which gave an insight into some of the new features in CSS 3. The modules discussed are outlined below.
Backgrounds and Borders
This module will allow you to play with backgrounds and borders of any box in new ways. Below are some of the techniques:
- border-radius — allows for rounded borders
- border-break — can close the border of a box that has been stopped at a break point (page break, column break, line break)
- border-image — instead of using a border style, it sets an image as the border
- box-shadow — adds a shadow to an element
This module's aim is to let you display your content in multiple columns with less code. The multi-column layout adds a new kind of container — column box. The content of multi-column elements flows from column to column. The column box is encapsulated within the main div container of the content. Column-count and column-width determine the number of columns and their ideal width. All columns are all of equal width and height with the same distance between them.
The goal is to keep the content and the layout order separate. The module attempts to simplify laying out elements on complex Web pages and forms. Two methods proposed are Template Based Positioning and Tabbed Displays. Template Based Positioning lets you create a grid layout and place elements within slots on the grid. The Tabbed Display method piles up elements like tabbed cards, displaying only one at a time.
The aim with this is to allow you to create grid layouts easily, that is align elements across invisible grid columns.
The grid can be created in the following ways:
- Explicit grid — generated with grid-columns and grid-rows
- Natural grid — generated automatically, for instance multi-column elements — the edges on both sides of the column make grid lines
- Default grid — elements that do not fit into the two grid categories above are regarded as having a single-cell grid
Some new selectors that have been introduced are described below:
- E:only-of-type — refers to an element which is the only sibling of its type
- E:not(s) — selects any element that doesn't match the simple selector s
- E ~ F — selects an F element that comes after an E element
- E:nth-child(n) — selects an element which is the nth child of its parent element
- E:nth-last-child(n) — same as the previous selector, but counting from the last one
- E:nth-of-type(n) — selects an element which is the nth sibling of its type
The aim is to extend the functionality of media types by adding expressions. Some of the media features that can be used in these expressions are width, height and colour. This allows pages to be customised for different devices without changing the content.
A media query can either be true or false. It's true only when the media type in the media query is the same as that of the device and all the expressions are also true. In that case the appropriate style sheet is applied.