RE: Extensibility and override-ability of multiple-valued CSS properties

Hi Giorgio,
 
Actually, I think you'll be pleased to learn this issue has already been discussed in the past on this mailing list. I still have some (outdated) draft [1] hanging somewhere about list-valued properties and Tab Atkins gathered some feedback over this in a blog post sometime last year [2].
 
So, this just to say that even if this issue isn't actively being undertaken now, the Working Group already know about it. I was not going to talk about my recent thoughts on it, but if someone else starts the thread, well... how could I resist ;-)
 
 
 
 
 
> I would suggest something to resolve the poor extensibility of the
> background, box-shadow and text-shadow properties (and similar ones)
>
> For example, at the moment, for to override/append a single value in the
> 'background-image' stack, I have to rewrite the whole value.
> 
> [...]
> 
> Also it would be useful to have "named" properties:
>
> #button {
>   box-shadow:
>     offset(2) name(abc) inset 0 1px white,
>     offset(1) name(def) 0 0 20px black;
> }
 
Firstly, I would like to compliment you: it took me a lot of time to figure out this was the most appropriate representation of list-valued properties. Great job.
 
Naturally, I still prefer the brackets syntax i.e. { background[abc:1]: url(a.img) } but I discovered recently that a representation similar to the one you presented (even if this was only an internal trick) was indeed the best way to harness the existing CSS cascade and implement only a minimal amount of new features.
 
What it actually means is that every 'value' of the list is possibly accompanied by two tags: an z-index and a name.
 
So, the recurring issue of this proposal is the order in which the values are finally put. My proposal is still the same: values are clustered by z-index and, inside a z-index plane, the final value is defined by the first occurrence of name (rule with the highest priority) and is inserted at the last occurrence of the name (rule with the lowest probability).
 
 
 
 
 
 
Let's consider some example:
 
  div {
    transform: translate(0px, 0px);
  }
 
  .zoomed-in {
    transform[zoom]: scale(1.1);
  }
   
  .upside-down {
    transform[rotate]: rotate(180deg);
  }
 
  .box {
    transform[hover:100]: scale(1.00) translate(0px, 0px);
    transition[]: transform[hover:100] 0.5s ease-in;
  }
   
  .zoomed-in.box {
    transform[zoom]: scale(1.2);    
  }
  
  .box:hover {
    transform[hover:100]: scale(1.05) translate(-5px, -5px);
  }
 
 
 
 
Let's see how this translate in a less-beautiful form:
 
  div {
    transform: translate(0px, 0px);
  }
 
  .zoomed-in {
    transform: item(0: zoom: scale(1.1)), cascade;
  }
 
  .box {
    transform: item(100: hover: scale(1.00) translate(0px, 0px)), cascade;
    transition: item(100: hover: transform[hover] 0.5s ease-in), cascade;
  }
     
  .zoomed-in.box {
    transform: item(0: zoom: scale(1.2)), cascade;
  }
  
  .box:hover {
    transform: item(100: hover: scale(1.05) translate(-5px, -5px)), cascade;
  }
 
 
 
  
On a <div.box.zoomed-in.updside-down> this results in
 
  {
    transform:
      item(0: zoom: scale(1.2)),
      item(100: hover: scale(1.00) translate(0px, 0px)), 
      item(0: rotate: rotate(180deg)),
      item(0: zoom: scale(1.1)),
      translate(0px, 0px);
  }
 
 
 
And now, the ordering algorithm: 
 
(1) let's divide by z-index; each z-index is a different context that doesn't care about the others
 
  {
    transform[0]:
      item(zoom: scale(1.2)),
      item(rotate: rotate(180deg)),
      item(zoom: scale(1.1)),
      translate(0px, 0px);
      
    transform[100]: 
      item(hover: scale(1.00) translate(0px, 0px));
  } 
 
(2) let's collect the named keys and their associated value, left to right; remove duplicate entries from right to left
 
  {
    transform[0]:
      rotate(180deg), scale(1.2), translate(0px, 0px);
    
    transform[100]:
      scale(1.00) translate(0px, 0px);
  }
 
(3) let's collect the values in one list (higher indices go after):
 
  {
    transform:
      rotate(180deg) scale(1.2) translate(0px, 0px);
      scale(1.00) translate(0px, 0px);
  }
 
 
 
 
As soon as the :hover class is applied, the final value (following the same algorithm) would become:
 
  {
    transform:
      rotate(180deg) scale(1.2) translate(-5px, -5px)
      scale(1.05) translate(0px, 0px);
  }
 
 

It can look a bit complex at first sight, but this is just completely natural :-)
 
Best regards,
François
 
______________________________
 
[1] http://fremycompany.com/TR/2012/ED-css-list-properties/ 
[2] http://www.xanthir.com/blog/b4KZ0/

Received on Tuesday, 30 April 2013 21:03:01 UTC