Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Last revisionBoth sides next revision
spec:css3-regions:regions-styling [2012/03/16 10:13] vhardyspec:css3-regions:regions-styling [2012/04/12 21:35] vhardy
Line 1: Line 1:
 ==== Region Styling: Proposed alternate syntax ==== ==== Region Styling: Proposed alternate syntax ====
 +
 +PAGE OBSOLETE: in light of the discussion on www-style (see http://lists.w3.org/Archives/Public/www-style/2012Mar/0490.html), there seem to be a 
 +preference for sticking to the @region syntax. The getComputedStyle API can be provided differently, for example as a method on the
 +Region interface (e.g., Region.getComputedStyle(elem)).
  
 == Problem Description == == Problem Description ==
Line 75: Line 79:
  
 === Open questions === === Open questions ===
- +  Limitation: styling pseudo elements
-  Can we chain pseudo-elements? For example, can we do the following: +
- +
-<code> +
-window.getComputedStyle(elem, "::before::in-region(regionA)"); +
-</code>+
  
 According to the [[http://dev.w3.org/csswg/selectors3/#w3cselgrammar|Selectors Level 3]] specification:  According to the [[http://dev.w3.org/csswg/selectors3/#w3cselgrammar|Selectors Level 3]] specification: 
        
 <file> <file>
-Note that pseudo-elements are restricted to one per selector and occur only in the last simple_selector_sequence.+... pseudo-elements are restricted to one per selector and occur only in the last simple_selector_sequence.
 </file> </file>
  
-which seems to prevent the combination of a '::before' pseudo-element selector with another '::in-region()' pseudo selector. +which prevents the combination of a '::before' pseudo-element selector with another '::in-region()' pseudo selector
 +In a situation like: 
 + 
 +<code> 
 +#myElement { 
 +    flow-into: article; 
 +
 + 
 +#myElement::before { 
 +    content: "The quick brown fox"; 
 +
 + 
 +</code> 
 + 
 +There is no way to select the fragment of #myElement::before that falls into, say, regionA. That selector would be: 
 + 
 +<code> 
 +#myElement::before::in-region(regionA); 
 +</code> 
 + 
 +but that would require combining pseudo-elements, which is not possible currently with Selector 3. 
 + 
 +Proposal: accept the limitation of Selector 3. If that gets lifted in Selector 4, authors will get more flexibility. 
 +  
 +  * Limitation: nested regions. 
 + 
 +Consider the following use case: 
 + 
 +<code> 
 +<div id="postit-A"></div> 
 +<div id="postit-B"></div> 
 + 
 +<div id="regionA"></div> 
 +<div id="regionB"></div> 
 +<div id="regionC"></div> 
 +<div id="regionD"></div> 
 + 
 +#postit-A, #postit-B { 
 + flow-from: block-flow; 
 +
 + 
 +#regionA, #regionB, #regionC, #regionD { 
 + flow-into: block-flow; 
 + flow-from: article; 
 +
 +</code> 
 + 
 +What if we want to have special styling for a '.title' that falls into regionB if regionB is in postit-A but not in postit-B? 
 + 
 +.title::in-region(regionB) selects the fragment of .title that falls into regionB. There is no way to say "… that falls  
 +into the fragment of regionB that falls into postit-A.  
 + 
 +Proposed resolution: accept this limitation.
 
spec/css3-regions/regions-styling.txt · Last modified: 2014/12/09 15:48 by 127.0.0.1
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki