This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
spec:css3-regions:sequestering-regions [2012/11/15 17:42] – created astearns | spec:css3-regions:sequestering-regions [2014/12/09 15:48] (current) – external edit 127.0.0.1 | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | Using HTML elements to produce the boxes for a region chain is a point of contention. The point made against the current version of the spec is that markup purely for presentational | + | Using HTML elements to produce the boxes for a region chain is a point of contention. The point made against the current version of the spec is that combining content and presentational |
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/ |
} | } | ||
</ | </ |