RE: [css-regions] Changed @region rule to ::region() pseudo-element

• From: François REMY <francois.remy.dev@outlook.com>
• Date: Mon, 20 May 2013 12:57:32 +0200
• To: Håkon Wium Lie <howcome@opera.com>, Brad Kemper <brad.kemper@gmail.com>
• CC: Tab Atkins Jr. <jackalmage@gmail.com>, Alan Stearns <stearns@adobe.com>, Sylvain Galineau <galineau@adobe.com>, "www-style@w3.org" <www-style@w3.org>
• Message-ID: <DUB120-W14D313211FB8CFBB399876A5AF0@phx.gbl>

> From: howcome@opera.com
> Syntax is important. Could someone post a couple of code examples
> for common use cases that highlight the differences between the two
> (three, perhaps, with @nest?) syntax propoals?

pseudo-element only:
    
    someElement {
        abc: def;
        abc: def;
    }
    
    someElement::region(>strong) {
        abc: def;
        abc: def;
    }
    
    someElement::region(>strong:hover) {
        abc: def;
        abc: def;
    }
    
    someElement::region(>italic) {
        abc: def;
        abc: def;
    }
    
    someElement::region(>italic:hover) {
        abc: def;
        abc: def;
    }
    
combinator only:
    
    someElement {
        abc: def;
        abc: def;
    }
    
    someElement ...> strong {
        abc: def;
        abc: def;
    }
    
    someElement ...> strong:hover {
        abc: def;
        abc: def;
    }
    
    someElement ...> italic {
        abc: def;
        abc: def;
    }
    
    someElement ...> italic:hover {
        abc: def;
        abc: def;
    }
    

at-rule only:
    
    someElement {
        abc: def;
        abc: def;
    }
    
    @region someElement {
        
        :scope> strong {
            abc: def;
            abc: def;
        }
    
        :scope> strong:hover {
            abc: def;
            abc: def;
        }
    
        :scope> italic {
            abc: def;
            abc: def;
        }
    
        :scope> italic {
            abc: def;
            abc: def;
        }
        
    }
    
at-rule + nesting:
    
    someElement {
        abc: def;
        abc: def;
    }
    
    @region someElement {
        
        :scope> strong {
            abc: def;
            abc: def;
            @where :hover {
                abc: def;
                abc: def;
            }
        }
        
        :scope> italic {
            bac: def;
            abc: def;
            @where :hover {
                abc: def;
                abc: def;
            }
        }
        
    }
    
combinator + nesting:
    
    someElement {
        abc: def;
        abc: def;
        
        @then ...> strong {
            abc: def;
            abc: def;
            @where :hover {
                abc: def;
                abc: def;
            }
        }
        
        @then ...> italic {
            abc: def;
            abc: def;
            @where :hover {
                abc: def;
                abc: def;
            }
        }
        
    }
    
pseudo-element + nesting:
    
    someElement {
        abc: def;
        abc: def;
        
        @where ::region(>strong) {
            abc: def;
            abc: def;
            @where :hover {
                abc: def;
                abc: def;
            }
        }
        
        @where ::region(>italic) {
            abc: def;
            abc: def;
            @where :hover {
                abc: def;
                abc: def;
            }
        }
        
    }
    
+ <add-your-favorite-variant-here> 		 	   		  

Received on Monday, 20 May 2013 10:58:04 UTC