This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
spec:css3-regions:regions-use-cases [2012/09/24 15:28] – [CSSOM use cases] astearns | spec:css3-regions:regions-use-cases [2012/11/29 17:57] – one more property name change rhauck | ||
---|---|---|---|
Line 124: | Line 124: | ||
wrap-flow: both; | wrap-flow: both; | ||
/* prevent the content from touching the edges of the box */ | /* prevent the content from touching the edges of the box */ | ||
- | | + | |
color: lightblue; | color: lightblue; | ||
font-size: 2em; | font-size: 2em; | ||
Line 235: | Line 235: | ||
flow-from: breaking-news; | flow-from: breaking-news; | ||
| | ||
- | /* allow scrolling when content overflows the region */ | + | /* allow scrolling when content overflows the last region |
- | region-overflow: auto; | + | region-fragment: auto; |
overflow: auto; | overflow: auto; | ||
} | } | ||
Line 286: | Line 286: | ||
</ | </ | ||
- | This works only if the class=" | + | This works only if the class=" |
- | + | ||
- | <code css> | + | |
- | .segment { | + | |
- | flow-into: combined-segments; | + | |
- | flow-from: combined-segments; | + | |
- | height: 50vh; | + | |
- | } | + | |
- | </ | + | |
==== Capturing region overflow content ==== | ==== Capturing region overflow content ==== | ||
Line 326: | Line 318: | ||
margin-top: | margin-top: | ||
- | /* This region will catch all the overflow | + | /* Control |
- | region-overflow:auto; | + | region-fragment:auto; |
overflow: | overflow: | ||
} | } | ||
Line 367: | Line 359: | ||
position: absolute; | position: absolute; | ||
/* prevent text from touching the edges of the slices */ | /* prevent text from touching the edges of the slices */ | ||
- | | + | |
} | } | ||
#slice_1 { | #slice_1 { | ||
Line 417: | Line 409: | ||
{{: | {{: | ||
+ | |||
+ | ==== Content re-ordering on the client ==== | ||
+ | |||
+ | There are content management systems that assemble markup on demand, but have limited options for changing the markup (and therefore the layout) based on the capabilities of the client that requests a page. One not-so-good solution is to offer a separate ' | ||
==== CSSOM use cases ==== | ==== CSSOM use cases ==== |