HTML and CSS Reference
In-Depth Information
CSS3
LAYOUT MODULES
IN
BRIEF
Although CSS3 has a number of layout-oriented modules, I'll mainly focus on
discussing the following modules because of reasonable current support, future
importance, and limited page count:
allows you to split a body of content into a number of different columns
with column rules, column breaks, and more.
defines new values for the
display
property to allow for more powerful
layout techniques that control the ordering and spacing of the children of a
container, which were previously very di
cult to achieve without JavaScript.
Ve r t i c a l l y is p a c i n g m u l t i p l e e l e m e n t is e q u a l l y i n is i d e a p a r e n t c o n t a i n e r i is a
good case in point. This module has recently had an overhaul, and most
browsers don't support the new syntax at the time of this writing. However,
implementation of this module should come quickly, because browser
vendors are very interested in it.
creating neat, consistent, balanced web layouts, but traditionally you've had
to build your own or use a third-party grid system of some kind. The CSS
Grids module provides a standardized, native way to create grids. Again,
current browser support is patchy, but more should follow soon.
I'll also cover the following modules briefly at the end of the chapter. These
do not have solid browser support as of yet, but they are damn cool and will be
important in the future:
to allow you to define a series of content regions in a document and an order
in which content is placed into those regions as it fills them up.
CSS3 Exclusions and Shapes Module Level 3 (
http://dev.w3.org/csswg/
css3-exclusions).
Shapes allow you to define geometric shapes for content
to flow around or inside, whereas exclusions allow you to flow content
around those shapes. This module should allow for complicated magazine-
style layouts.
