This shows you the differences between two versions of the page.
| Next revision | Previous revisionNext revisionBoth sides next revision | ||
| spec:css3-regions:sequestering-regions [2012/11/15 17:42] – created astearns | spec:css3-regions:sequestering-regions [2012/11/16 09:00] – astearns | ||
|---|---|---|---|
| Line 3: | Line 3: | ||
| One way to use an external file for presentational purposes is being defined by the [[http:// | One way to use an external file for presentational purposes is being defined by the [[http:// | ||
| - | Let's take a very simple example of regions use, so that the different versions are more easily compared. This simple example just has two regions, the first being 60% if the height of the viewport. The named flow is then interrupted by an image, and resumes afterwards in a second region. You can take this basic structure and scale it up to a more complex layout such as the one found in [[http:// | + | Let's take a very simple example of regions use, so that the different versions are more easily compared. This simple example just has two regions, the first being 60% of the height of the viewport. The named flow is then interrupted by an image, and resumes afterwards in a second region. You can take this basic structure and scale it up to a more complex layout such as the one found in [[http:// |
| Here's the starting point with empty presentational elements in the content markup: | Here's the starting point with empty presentational elements in the content markup: | ||
| Line 33: | Line 33: | ||
| </ | </ | ||
| - | Using custom elements, you could put the presentational elements in a separate HTML file: | + | Using custom elements, you could put the presentational elements in a separate HTML file. I have extended the img element here, but you could instead extend the body element. |
| <code html content.html> | <code html content.html> | ||
| Line 71: | Line 71: | ||
| </ | </ | ||
| - | Or you could use decorators: | + | Or you could use decorators. Again, I chose to add a class to the img element, but you could decorate the body element if that's your preference. |
| <code html contents.html> | <code html contents.html> | ||
| - | <link rel=" | ||
| < | < | ||
| article { | article { | ||
| Line 89: | Line 88: | ||
| .bar { | .bar { | ||
| - | decorator: url(# | + | decorator: url(region-layout.html/ |
| } | } | ||
| </ | </ | ||